你还在一个字一个字敲代码吗?【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 axiossnippets 怎么写呢,其实很简单:

{
	"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!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区