參考資料: https://code.visualstudio.com/docs/editor/userdefinedsnippets
1. 為什么要自定義代碼片段？
在使用Dreamweaver、Webstorm等HTML頁面編輯器時，其自帶的自動補全功能（我更樂意稱之為模板）往往可以減少我們寫代碼時的工作量，但IDE打開速度慢、占用內存高的缺點不斷蠶食我的耐心。當發現VS code的代碼片段自定義功能后，我決定將web開發的主戰場轉移至其上，其輕量級和可擴展性是前所未有的吸引人的。
2. 怎么做？
由於是在書寫html頁面時用到了代碼片段功能，因此以創建html文件的代碼片段為例說明創建的流程、語法。
2.1 流程
打開VS code，“文件-首選項-用戶代碼片段”（file-preference-User Snippets），在下拉列表中選擇html文件，此時在VS code的應用數據文件夾內自動新建了一個名為html.json的文件，我們在這個json文件中定義我們的代碼片段。
我們需要首先定義snippet name，在snippet name中，prefix和body是必不可少的兩個字段(The prefix is what is used to trigger the snippet and the body will be expanded and inserted.)
我們定義一個html框架，命名為html template，代碼如下：
"html template": {
"prefix": "html template",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<title>${1:Title}</title>${2}",
"</head>",
"<body>",
"\t${3}",
"</body>",
"</html>",
"${0}"
],
"description": "create a html frame"
} 保存，新建一個html文件，輸入html template，按下Tab鍵，就可以自動補齊整個框架。
2.2 語法說明
- 在body中，使用轉義字符
\來書寫制表符Tab、雙引號"等內容； - 使用
${num: default name}來定義輸入位置，按下Tab鍵來遞進光標到下一個； num的值為0,1,2,3...。0為光標的最終位置，1,2,3...決定了光標的順序位置；default name是默認值，可按下Tab不編輯直接跳過。
2.3 Global or Specific Snippets
代碼片段分為兩種：全局和特定，這意味着我們可以定義適用於多種文件類型的代碼片段，也可以定義僅僅針對於一種文件類型的代碼片段。
全局代碼片段的文件后綴名為.code-snippets，在用戶代碼片段下拉列表中，最上方有一個“新建全局代碼片段文件”。
全局代碼片段的語法規則和特定代碼片段的語法規則一致，唯一區別在於其增加了一個字段scope，用於指定該規則適用於何種語言：（例）
{
"For_Loop": { "prefix": "for", "scope": "javascript,typescript", "body": [ "for (const ${2:element} of ${1:array}) {", "\t$0", "}" ], "description": "For Loop" },
}2.4 自定義引用css和JavaScript的標簽的代碼片段
"link template": {
"prefix": "<link rel...",
"body": [
"<link rel=\"stylesheet\" type=\"${1:text/css}\" href=\"${2}\">${0}"
],
"description": "complete css link"
},
"script template": {
"prefix": "<script type...",
"body": [
"<script type=\"${1:text/javascript}\" src=\"${2}\"></script>${0}"
],
"description": "complete script quote"
}