vscode如何修改默认的HTML模板?vscode如何创建vue模板?(现成vue和vueRouter模板,一键创建) ∠( °ω°)／ 前端知识

修改HTML模板

首先我们点击vscode左下角的设置按钮 > 然后在选择用户代码片段(如下图)

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

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

{
	// 将用于html的代码片段放在这里。
	// 每个代码片段都在代码片段名称下定义，并具有前缀、主体和描述。前缀用于触发代码片段，主体将被展开和插入。
	// 可能的变量有:$1，$2用于制表符位置，$0用于最终的光标位置，${1:label}， ${2:another}用于占位符。连接具有相同id的占位符。
        "Vue": {
        "prefix": "!v", // 对应的是使用这个模板的快捷键
        "body": [
        "",
        "",
        "",
                "\t",
                "\t",  
        "\n",
        "",
                "\t
\n\t\t$4\n\t
",
        "\n",
        "",
        "",
        "",
        ""
        ],
        "description": "基于vue的HTML模板" // 模板的描述
        },

        "vueRouter": {
        "prefix": "!vr", // 对应的是使用这个模板的快捷键
        "body": [
        "",
        "",
        "",
                "\t",
                "\t",  
        "\n",
        "",
                "\t
",
                        "\t\t$5",
                        "\t\t",
                        "\t\t",
                "\t
",
        "\n",
        "",
        "",
        "",
        "",
        "",
        ""
        ],
        "description": "基于vue路由的HTML模板" // 模板的描述
     }
}

我们哪上方第一个举例,

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

具体效果如下图: