打開VS code，“檔案-首選項-使用者代碼片段”（file-preference-User Snippets），在下拉清單中選擇html檔案，此時在VS code的應用資料檔案夾内自動建立了一個名為html.json的檔案，我們在這個json檔案中定義我們的代碼片段。
html.json：自定義如下
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"html template": {
"prefix": "vn",
"body": [
"<!DOCTYPE html>",
"<html en\">",
"<head>",
"<meta charset=\"UTF-8\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"<title>Document</title>",
"\r",
"<script src=\"./lib/vue.min.js\"></script>",
"\r",
"</head>",
"\r",
"<body>",
"\r",
"\t <div id=\"app\">",
"\t \t <p>{{msg}}</p>",
"\t </div>",
"\r",
"\r",
"\t <script>",
"\r",
"\t\tvar vm = new Vue({",
"\t\t\t el : '#app',",
"\t\t\t data : {",
"\t\t\t msg : '歡迎學習vue'",
"\t\t\t}",
"\t\t}) \r",
"\r",
"\t </script>",
"\r",
"</body>",
"\r",
"</html>"
],
"description": "html template"
}
}
1：字元串間如果值裡包含特殊字元需要 \ 進行轉義. 如本例中的雙引号
2：換行：\r或者\n
3：tab鍵制表符：\t
生成效果為：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
msg : '歡迎學習vue'
}
})
</script>
</body>
</html>
![《VS Code》_VS Code快速生成H5模闆代碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)