[前端]VsCode自定义用户的代码模板

为了提高编码效率,我们通常会将一些重复性的 代码片段,代码框架 定义为-->代码模板

这样的好处时不必每次书写重复枯燥的基础代码

在idea中定义这些代码模板非常简单 因为它是基于可视化页面的

但是在vscode中 则需要我们直接去操作底层的代码模板文件

这些文件的名字为 css.json  html.json  js.json ....

如你所见 它们针对于不同的语言 给出了不同的json文件 以支持你定义你的代码模板

 1.如何找到这些文件

2.如何使用这些文件(定义代码模板)

参考这个:

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

其中:

Print to console 是当前所属组的名字

log2 将触发代码模板

body 则是真正的代码模板

description则是这个模板的说明

3.如何将代码转为代码模板文件格式?

使用该网站:snippet generator

4.更好的代码模板  直接创建.code-snippets后缀的文件 然后定义模板

注意每个目标的作用范围一定要把 js.css.html.vue 都声明上

这样这个模板的作用范围将会非常大