初次接觸前端之后，我們使用vscode的“染突！+ tab”就快速的創(chuàng)建了HTML基本骨架，這其實是在vscode中提前預(yù)設(shè)好的用戶代碼片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
其實我們自己也可以自定義模板：打開設(shè)置>用戶代碼片段
template
之后我們選擇：“html.json”
html.json
打開json文件，注釋中vscode給我們提供了一個實例
uhfue.PNG
注釋的意思就是：把你的html代碼片段放在這里部默。每個代碼段都在代碼段名稱下定義，并具有前綴造虎、正文和描述傅蹂。前綴是用來觸發(fā)代碼段的，正文將被展開和插入累奈，以原有的“贬派！”生成HTML片段為例，這個嘆號就是前綴澎媒。
基本的框架：
"template_name": {
"prefix": "",
"body": [],
"description": ""
}
- template_name:自定義你所設(shè)置的模板名稱
- prefix：前綴搞乏，簡單說就是你設(shè)置的快捷鍵
- body：模板內(nèi)容
- description：對模板的描述
以生成簡單的vue模板為例：將下一段代碼放在body中
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"../js/vue.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"></div>\n",
"\t<script>",
"\t //創(chuàng)建Vue實例,得到 ViewModel",
"\t var vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
- 每行代碼都需要使用雙引號引起來，若里面還需要加引號戒努，就需要使用轉(zhuǎn)義字符“\”
- \t: 表示縮進请敦，一個“tab”
- \n: 換行
基本
{
"vue_template": {
"prefix": "vl",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"../js/vue.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"></div>\n",
"\t<script>",
"\t //創(chuàng)建Vue實例,得到 ViewModel",
"\t var vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "vue學習時創(chuàng)建文件的模板"
}
}
其他配置：添加占位符镐躲，就是在打開模板之后光標所定位的位置，使用'$'
- 單純的光變定位：在開發(fā)時為了方便侍筛，需要光標多個地方定位萤皂，按照順序在要定位的地方加上 $1, $2, $3······，使用tab鍵進行切換
- 定位以及加上注釋：${1:注釋}匣椰，${2:注釋}······
如：
"\t<div id =\"app\">${1:name}</div>\n",
是不是很麻煩裆熙？哈哈哈，這里給大家提供一個簡單的方法
https://snippet-generator.app/禽笑，這個網(wǎng)站可以自動為我們做上面的操作
Snipaste_2022-04-23_11-11-51.png
