怎么在VSCode中自定义一个html5模板-创新互联

这篇文章给大家介绍怎么在VSCode中自定义一个html5模板，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

静乐ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

（一）新建html快捷键

当我们想在VSCode中新建html代码时，可以输入! 然后回车或者Tab即可自动生成一个html文件模板，效果如下：

怎么在VSCode中自定义一个html5模板

（二）自定义html5模板

但我们每次新建html模板时候，总是感觉太单调，例如我是希望每次新建都自动引入Vue并新建一个空的页面模板，这是是完全可以实现的：

（1）找到html.json文件：点击设置，找到用户代码片段

怎么在VSCode中自定义一个html5模板

搜索html，出现html.json文件，点击即可

怎么在VSCode中自定义一个html5模板

（2）打开html.json文件后即可自定义设置H5模板

怎么在VSCode中自定义一个html5模板

附上html.json文件配置，直接填入原大括号中即可：

"h6 template": {
        "prefix": "vh", // 对应的是使用这个模板的快捷键
        "body": [
         "",
         "",
         "",
         "\t",
         "\t",
         "\t",
         "\tDocument",
         "\t",     
         "\n",
         "",
         "\t

\n", "\t", "\n", "" ], "description": "HT-H5" // 模板的描述 }

转义字符解释：

\t \" \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
\t 的意思是横向跳到下一制表符位置等于 Tab键
\" 的意思是双引号
\n 的意思是回车换行

关于怎么在VSCode中自定义一个html5模板就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

本文名称：怎么在VSCode中自定义一个html5模板-创新互联
当前路径：http://azwzsj.com/article/dohpeo.html

怎么在VSCode中自定义一个html5模板-创新互联

其他资讯