vscode中添加html自定义模板
通常,在编写代码时,在编辑器中输入部分就会生成相关的联想如输入HTML选择html:5的联想就会出现以下内容那么如何在vscode编辑器中自定义模板,输入特定字符就会生成事先定义好的模板呢1.点击界面左下角的设置图标,选择“用户代码片段”2.选择html.json3.在.json文件中添加以下内容,并保存4.在.html文件中输入vue,回车,并会生成刚刚自定义的模板内容注意...
·
通常,在编写代码时,在编辑器中输入一些前缀就会生成相关的联想
如输入在.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:[]中的模板代码是数组中的内容,所以每一条数据(每一行代码)后都要有一个逗号,另外类似“”(引号)等特殊字符需要进行转义。
更多推荐
已为社区贡献15条内容
所有评论(0)