vscode自定义HTML模板内容

经常使用vscode编辑器的朋友都知道，新建html文件之后直接！+Tab键即可新建一个HTML模板，但是这只是一个基础版，当然也可以自定义HTML模板。

1、打开首选项--用户代码片段

2、在打开的搜索框内搜索 ‘html.json’，并打开html.json文件

3、html.json文件中有一段文字以及一个example

// 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"
	//}

文字翻译过来大致意思就是在该大括号内填写html代码片段，每个代码段都在代码段名称下定义，并具有前缀-prefix、正文-body以及描述-description。前缀的内容就是触发的代码字段，正文即将要被展开的内容（$0、$1、$2表示的是光标的位置，$0代表光标会在代码最末位置）。

若还是不理解，可将示例打开，在html文件中输入log后回车，即可看到展开内容--console.log()

4、在html.json中输入自己的模板（按自身需要增减内容）

"create new HTML file":{
		"prefix": "h5",
		"body": [
			"",
			"",
			"",
				"\t",
				"\t",
				"\t",
				"\t",
				"\t",
				"\t",
			"",
			"",
			"",
			"",
			""
		],
		"description": "create new HTML file"

 body中引号需要使用反斜杠\转义，行之间用逗号隔开。

保存之后即可在新建的html中使用输入prefix的值进行测试，自定义html模板完成。

既然可以自定义html模板，那也可以自定义其他的代码片段，举一反三。