VSCode 自定义html5模板的实现

（一）新建htML快捷键

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

 （二）自定义html5模板

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

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

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

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

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

"h5 template": {
            "PRefix": "vh", // 对应的是使用这个模板的快捷键        "body": [         "!DOCTYPE html>
    ",         "html lang=\"en\">
    ",         "head>
    ",         "\tmeta charset=\"UTF-8\">
    ",         "\tmeta name=\"viewport\" content=\"width=device-width, inITial-scale=1.0\">
    ",         "\tmeta http-equiv=\"X-UA-Compatible\" content=\"ie=Edge\">
    ",         "\ttitle>
    Document/title>
    ",         "\tscript src=\"./lib/vue-2.4.0.js\">
    /script>
    ",              "/head>
    \n",         "body>
    ",         "\tdiv id =\"app\">
     /div>
    \n",         "\tscript>
",         "\t //创建vue实例,得到 ViewModel",         "\t VAR vm = new Vue({
",         "\t\tel: '#app',",         "\t\tdata: {
}
,",         "\t\tmethods: {
}
",         "\t }
    );
    ",         "\t/script>
    ",         "/body>
    \n",         "/html>
"        ],        "description": "HT-H5" // 模板的描述     }
    

转义字符解释：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！