Visual Studio Code 设置特定语言的自定义代码块

1、打开特定语言的json文件

文件(File)->首选项(Preferences)->用户代码片段(Configure User Snippets)->选择代码段应显示的语言。（以下用vue为例）
注：macOS：代码（Code）>首选项（Preferences）

2、添加代码段
"Print to console"：代码块名称；
"prefix"：前缀，用来触发代码片段，在正文中展开和插入；
"body"：代码块内容；
"description"：描述说明；

官方示例：

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

vue示例

vue.json
{
    "vue2 code": {
		"prefix": "vue2",
		"body": [
			"<template>",
			"\t<div>",
			" ",
			"\t</div>",
			"</template>",
			"<script>",
			"export default {",
			"\tname:'',",
			"\tcomponents: {",
			" ",
			"\t},",
			"\tdata() {",
			"\t\treturn {",
			" ",
			"\t\t}",
			"\t},",
			"\tcreated() {",
			"",
			"\t},",
			"\tmethods: {",
			" ",
			"\t},",
			"}",
			"</script>",
			"<style lang=\"scss\" scoped>",
			" ",
			"</style>"
		],
		"description": "vue2 basic module"
	},    
}

 3、设置多个代码块
json文件中写多个对象。

vue.json
{
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"vue2 code": {
		"prefix": "vue2",
		"body": [
			"<template>",
			"\t<div>",
			" ",
			"\t</div>",
			"</template>",
			"<script>",
			"export default {",
			"\tname:'',",
			"\tcomponents: {",
			" ",
			"\t},",
			"\tdata() {",
			"\t\treturn {",
			" ",
			"\t\t}",
			"\t},",
			"\tcreated() {",
			"",
			"\t},",
			"\tmethods: {",
			" ",
			"\t},",
			"}",
			"</script>",
			"<style lang=\"scss\" scoped>",
			" ",
			"</style>"
		],
		"description": "vue2 basic module"
	},
}

4、使用代码块
在需要插入代码块的地方，输入前缀（vue2）回车。
示例