VS code自定義使用者程式碼片段snippet
我的模板：
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"
}