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"
}