用vscode创建自定义模板

用vscode创建自定义模板

• 在vscode中快速创建自定义的模板，可提高代码编写的效率，减少一些繁杂的输入，在此以创建vue 模板为例，介绍在vscode中创建自定义模板。

该vue模板是在html页面中设计的

首先，在vscode中找到设置->用户代码自定义

输入html，选择html.json

点击进入编辑

接下来就是编写我们的模板

• prefix 为前缀属性，就是当我们在自己的代码中，输入该prefix的属性值，按enter就会输出该模板，如当我在输入 vue ，按enter之后就会打印出该vue 模板；
• 在body 部分定义自己的模板；
• 一双引号代表一行，当模板中有双引号时，需转义

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"creat a vue template": {
		"prefix": "vue",
		"body": [
			"",
			"",
			"",
				"\t",
				"\t",
				"\t",
				"\t",
				"\t",
			"",
			"",
				"\t
",
				"\t",
				"\t
",
				"\t",
				"\t",
			"",
			"",
		],
		"description": "Log output to console"
	}
}

使用

按enter

在此就完成在vscode中创建一个vue的自定义模板，其他自定义模板也可仿造此方法创建