初次接触前端之后，我们使用vscode的“！+ tab”就快速的创建了HTML基本骨架，这其实是在vscode中提前预设好的用户代码片段
Document
其实我们自己也可以自定义模板：打开设置>用户代码片段
template
之后我们选择：“html.json”
html.json
打开json文件，注释中vscode给我们提供了一个实例
uhfue.PNG
注释的意思就是：把你的html代码片段放在这里。每个代码段都在代码段名称下定义，并具有前缀、正文和描述。前缀是用来触发代码段的，正文将被展开和插入，以原有的“！”生成HTML片段为例，这个叹号就是前缀。
基本的框架：
"template_name": {
"prefix": "",
"body": [],
"description": ""
}
- template_name:自定义你所设置的模板名称
- prefix：前缀，简单说就是你设置的快捷键
- body：模板内容
- description：对模板的描述
以生成简单的vue模板为例：将下一段代码放在body中
"",
"",
"",
"\t",
"\t",
"\t",
"\tDocument ",
"\t",
"\n",
"",
"\t\n",
"\t",
"\n",
""
- 每行代码都需要使用双引号引起来，若里面还需要加引号，就需要使用转义字符“\”
- \t: 表示缩进，一个“tab”
- \n: 换行
基本
{
"vue_template": {
"prefix": "vl",
"body": [
"",
"",
"",
"\t",
"\t",
"\t",
"\tDocument ",
"\t",
"\n",
"",
"\t\n",
"\t",
"\n",
""
],
"description": "vue学习时创建文件的模板"
}
}
其他配置：添加占位符，就是在打开模板之后光标所定位的位置，使用'$'
- 单纯的光变定位：在开发时为了方便，需要光标多个地方定位，按照顺序在要定位的地方加上 $1, $2, $3······，使用tab键进行切换
- 定位以及加上注释：${1:注释}，${2:注释}······
如：
"\t${1:name}\n",
是不是很麻烦？哈哈哈，这里给大家提供一个简单的方法
https://snippet-generator.app/，这个网站可以自动为我们做上面的操作
Snipaste_2022-04-23_11-11-51.png