修改HTML模板

首先我们点击vscode左下角的设置按钮 > 然后在选择用户代码片段(如下图)
在这里插入图片描述
点击用户代码片段后在软件中会弹出一个输入框,这里我们选择html.json(如果没有可以手动输入搜索一下),此方法还可以修改css,js之类的其余文件格式默认模板,当前我们主要就介绍html。

HTML的代码片段就放在其中,其中我输入的两个Vue会用到的模板。

{
	// 将用于html的代码片段放在这里。
	// 每个代码片段都在代码片段名称下定义，并具有前缀、主体和描述。前缀用于触发代码片段，主体将被展开和插入。
	// 可能的变量有:$1，$2用于制表符位置，$0用于最终的光标位置，${1:label}， ${2:another}用于占位符。连接具有相同id的占位符。
        "Vue": {
        "prefix": "!v", // 对应的是使用这个模板的快捷键
        "body": [
        "<!DOCTYPE html>",
        "<html lang=\"zh_CN\">",
        "<head>",
                "\t<meta charset=\"UTF-8\">",
                "\t<title>${1:dome}</title>",  
        "</head>\n",
        "<body>",
                "\t<div id =\"app\">\n\t\t$4\n\t</div>",
        "</body>\n",
        "<!-- 引入Vue -->",
        "<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>",
        "<script>",
                "\t// 创建Vue实例",
                "\tnew Vue({",
                        "\t\tel: '#app',",
                        "\t\tdata: {\n\t\t\t$2\n\t\t},",
                        "\t\tmethods: {\n\t\t\t$3\n\t\t}",
                "\t});",
        "</script>",
        "</html>"
        ],
        "description": "基于vue的HTML模板" // 模板的描述
        },

        "vueRouter": {
        "prefix": "!vr", // 对应的是使用这个模板的快捷键
        "body": [
        "<!DOCTYPE html>",
        "<html lang=\"zh_CN\">",
        "<head>",
                "\t<meta charset=\"UTF-8\">",
                "\t<title>${1:dome}</title>",  
        "</head>\n",
        "<body>",
                "\t<div id =\"app\">",
                        "\t\t<router-link to=\"/\">$5</router-link>",
                        "\t\t<!-- 路由匹配到的组件将渲染到router-view中 -->",
                        "\t\t<router-view></router-view>",
                "\t</div>",
        "</body>\n",
        "<!-- 引入Vue -->",
        "<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>",
        "<!-- 引入Vue路由 -->",
        "<script src=\"https://unpkg.com/vue-router/dist/vue-router.js\"></script>",
        "<script>",
                "\t// 创建首页模板",
                "\tvar index = Vue.extend({template:\"$4\"})",
                "\t// 创建Vue路由,并赋值,方便在Vue实例中调用",
                "\tvar router = new VueRouter({",
                        "\t\troutes:[",
                                "\t\t\t{path: \"/\", component:index},",
                        "\t\t]",
                "\t})",
                "\t// 创建Vue实例",
                "\tnew Vue({",
                        "\t\tel: '#app',",
                        "\t\t// 调用路由",
                        "\t\trouter,",
                        "\t\tdata: {\n\t\t\t$2\n\t\t},",
                        "\t\tmethods: {\n\t\t\t$3\n\t\t}",
                "\t});",
        "</script>",
        "</html>"
        ],
        "description": "基于vue路由的HTML模板" // 模板的描述
     }
}

我们哪上方第一个举例,

"Vue" ：指的是当前模板的名称,这个我们可以随意定义。
"prefix" ：前缀指的是我们在.html文件中快捷调用,这里我设置的是!v,在.html文件中,我只需要输入!v按下制表键(Tab)就可以调用此模板。
"body" : 主体指的是调用此模板生成的代码,这里我只要在.html文件中输入!v按下制表键(Tab)就会生成主体中的代码。
"description" : 描述,对此模板进行描述,可以让使用的人一眼就能看出这是一个用于做什么的模板。
${0:默认值} : 创建模板后光标默认出现的位置,默认值可以为空,写成$0,可以设置多个位置,如果$1,$2,在使用模板后,每次按下制表键(Tab)光标会按数字顺序从小到大出现每个指定的位置。