VS Code Snippet — [Mac OS] 在Visual Studio Code加入自訂的Code Snippet

VS Code Snippet簡單設定三步驟

Photo by Nathália Rosa on Unsplash

Step 1: 設定 VS code 的 Setting.json

1) Command + P 尋找檔案

2) 輸入setting，選擇 setting.json

3) 新增以下語法：

// 啟用自訂程式碼樣版
"editor.tabCompletion": "on",
// 若有裝其他的 Snippet，可以將編輯器的權重提高
"editor.snippetSuggestions": "top",

Step 2: 新增自己的snippet

1) Command + shift + P

2) 輸入 “User Snippets”，選擇 Preferences:Configure User Snippets

3) 以html為例，在輸入框中輸入「html」，選擇「html.json」

就進入了Html的自訂Code Snippets編輯畫面

這段註解提供了自訂code snippet的撰寫方式。重新說明一下：

"自訂Code Snippet的名稱": {
"prefix": "輸入Code Snippet時用的縮寫",
"body": [
  "自訂的Code Snippet內容"
],
"description": "對於這段Code Snippet的說明文字"
}

另外，可以利用 snippet generator 創造自己的snippet！

Step 3: snippet generator

Description: 這段snippet的說明，之後輸入縮寫時會出現在後方的文字說明，以便區別

Tab trigger: 輸入snippet時用的縮寫

Your snippet: 你要縮寫的對象，完整程式碼

snippet generator會自動編譯成json格式，出現在右側欄位。只要將其複製，貼到剛剛開啟的json檔裡(範例是html.json)，儲存後就行了。

• 注意，貼到剛剛開啟的json檔時 (先清空檔案內容再貼過去)，要在程式碼最外圍加上 { } !! 不加 { } 會報錯!!