vscode中添加html自定义模板

通常，在编写代码时，在编辑器中输入一些前缀就会生成相关的联想

如输入在.html文件中输入html，就会出现以下联想，选择html:5就会生成对应的工具模板

那么如何在vscode中自定义某个常用模板，输入特定字符就会生成事先定义好的模板呢

1.点击界面左下角的设置图标，选择“用户代码片段”

2.搜索并选择html.json

3.在.json文件中添加以下内容，并保存

附上代码：

"Print to vue": {//print to 后面的vue是模板的命名
			"prefix": "vue",//选择代码片段时将使用的前缀,即要打出的快捷键
			"body": [//模板代码
				"<div id=\"app\">",
        "\t<div>{{number}}</div>",
        "\t<input type=\"button\" value=\"+\" @click=add() >",
    		"</div>",
				"<script>",
				"\tconst app=new Vue({",
				"\t\tel:'#app',",
				"\t\tdata:{",
				"\t\t\tmessage:'hello',",
				"\t\t},",
				"\t\tmethods:{",			
				"\t\t}",
				"\t})",
				"</script>"
			],
			"description": "init vue template"//对模板的描述
		}
}在这里插入代码片
           

4.在.html文件中输入vue,回车，就会生成对应的自定义模板内容

注意：body:[]中的模板代码是数组中的内容，所以每一条数据（每一行代码）后都要有一个逗号，另外类似“”（引号）等特殊字符需要进行转义。