你还在一个字一个字敲代码吗？【vscode snippets 入门教程】

如果你现在还在手动敲每一行代码，或者是使用 ctrl-c， ctrl-v 粘代码，那实在是太累了，其实你可以释放你自己。把省下的时间用来写更有趣的代码！🌝

可能你用过一些 snippets ，也就是我们平时说的代码片段，就是只要敲几个字母，自动生成一大段代码，例如 React 创建一个组件的 snippets（如下图），可以极大的减少自己敲代码的代码量，而且能很好的节约时间，看起来是不是很 cool，其实自己写一个来生成自己的代码也很简单，下面我们来实现一个。

两种方式创建 snippets

axios 是我们常用的用来发送请求的库，那么我们经常会这样写

import axios from 'axios';

那么我们如何通过 snippets 来减少这个代码量呢？

方式一：通过 vscode 客户端创建

我们可以像下面一样建立一个全局的snippets代码片段。

通过客户端创建snippets

在打开的 json 文件中，我们可以看到有几行注释说明，告诉你把整个 vscode 全局的 snippets 放在这里，每个代码片段包含四个字段。

{
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

• scope： 作用域，也就是该 snippets 生效的文件类型，例如 javascript, typescript等；
• prefix： 前缀，就是在编辑器中敲下这个前缀以后就会出现的生成代码；
• body： 就是通过 prefix 生成出来的代码，
• description： 这个代码片段的描述

其实上面 🌰代码中， $1 、$2 是生成代码后按 tab 会停留给你输入的地方，而 $0 是生成代码后首先停留的光标的位置。后面还会遇到诸如 ${1:label}, ${2:another} 这样的占位符，其实还是一样的，但是占位符会有数字后面的英文名，例如上面的就是 label， another。

那继续说，我们要实现是一个 import axios 的 snippets 怎么写呢，其实很简单：

{
	"import axios":  {
		"scope": "javascript,typescript",
		"prefix": "ipax",
		"body": [
			"import axios from 'axios';"
		],
		"description": "import axios"
	}
}

效果如下：

axios 代码片段

输入 ipax 即可看到效果。

方式二： 通过 vsocde 脚手架生成一个 snippets vscode插件

如果你所做的项目是一个多人协作的项目，大家都希望共用你的 snippets 提高效率，那么你可以用过写一个 vscode snippets 插件的形式，写一个vscode snippets。

vsocde 的脚手架使用非常简单，因为官方给的工具( yo & generator-code )用起来实在是太好用了。

Step.1

$ npm install -g yo generator-code

Step.2

yo code, 生成 snippets vscode 插件的代码目录结构:

等待安装即可生成一份插件的脚手架代码即可

然后在生成的脚手架里面的 package.json 中添加下列代码：

"contributes": {
		"snippets": [
			{
				"language": "javascript",
				"path": "./snippets/snippets.json"
			}
		]
	},

意思是添加一个 javascript 的 snippets，然后在 "./snippets/snippets.json" 下建立 snippets 即可，语法就像上面的语法是一样的。

image.png

写好以后直接点击这里即可进入调试，非常方便。

vsoce 插件

打包发布的流程，可以点击这里查看，我这里简单引用一下文档的命令。

# 安装打包工具
$ npm install -g vsce

$ cd myExtension

# 打包
$ vsce package

# 发布
$ vsce publish
# <publisherID>.myExtension published to VS Code MarketPlace

发布后同事就可以使用你开发的插件啦。当然如果代码敏感，不能发布，可以打包 .vsix 文件，通过 vsix 文件安装。

总结

懒促使我们不停地优化工具，提高编码的效率，把更多的时间投入到书写更为优雅，效率更高的代码上，释放出来时间去做更多能释放时间的工具，是一个非常好的良性循环。 vscode 插件能做的事情非常多，大家可以继续探索！ have fun！