VsCode：用户代码片段 / 自定义代码片段

一、作用

把自己常用的代码书写习惯封装成一段代码段，方便多次调用

二、步骤

1. 打开VsCode，点击左下角齿轮（设置）

2. 点击用户代码片段

3. 输入xx.json，如我想封装console.log()，可以输入log.json

4. 以 console.log()和vue示例

• console.log()

{
	//提醒自己的字符，可以随便写
	"生成 console.log 模板": {
		//要封装的代码，这里写log，之后按输入log就会自动补全完整代码
		"prefix": "log",
		//body里写自定义的代码片段
		"body": [
			//每行用""括起来，用逗号隔开
			//$1表示光标最开始的位置
			"console.log($1)"
		],
		"description": "生成 console.log 模板"
	}	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果： 输入log，回车得到，光标默认在括号中

• Vue

//vue.json
{
	"生成 vue 模板": {
		"prefix": "vue",
		"body": [
			"Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示",
			"new Vue({",
			//这里可以空格，不可以按制表符，否则报错
           	"    el:'#root',",
            "    data:{$1",
            "    }",
			"})"
		],
		"description": "生成 vue 模板"
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：
按Vue后自动生成

5. 多个模板写在一个json文件里也行

{
	"生成 console.log 模板": {
		"prefix": "log",
		"body": [
			"console.log($1)"
		],
		"description": "生成 console.log 模板"
	},
	//模板间同样用逗号隔开
	"生成 vue 模板": {
		"prefix": "vue",
		"body": [
			"Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示",
			"new Vue({",
           	"    el:'#root',",
            "    data:{$1",
            "    }",
			"})"
		],
		"description": "生成 vue 模板"
	},	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22