如何在vs code中自定义添加html模板

在编写代码时，写一个标签并选中即可产生相应代码，如输入html:5

所以 当我们遇到需要多次编写的代码时，我们可以先把这段代码写为一个模板下次直接使用

那如何在vs code中自定义我们自己的模板呢

1.在左上角选中文件，选中首选项，选中用户片段  

 2.输入并选择html.json,在下边文件输入代码

3.这里我创建的是名为vue的代码片段 ，输入代码并保存

 以下为我的代码：

{
    "Print to vue": { //这里的vue是模板的命名
        "prefix": "vue", //这里的vue是我们要使用的快捷键，输出的是下边body里的内容
        "body": [ //模板代码
            "<div id=\"app\">",
            "\t{{message}}",
            "</div>",
            "<script src=\"../vue.js\"></script>",
            "<script>",
            "\tconst app = new Vue({",
            "\t\tel: '#app',",
            "\t\tdata: {",
            "\t\t\tmessage: '你好啊'",
            "\t\t}",
            "})",
            "</script>"
        ],
        "description": "init vue template to use" //对模板的描述
    }
}

测试结果：

 最后说一句：要注意的是写在body里的是数组，所以每一行最后要加逗号，类似双引号等特殊字符需要转义。

希望对你有帮助。