VS Code 快捷指令(Snippet)設定

John Hsu

Apr 4, 2021

為了增加 coding 速度在課堂上學了設定快捷指令(Snippet)的方法，回家稍微再研究了一下，做出一些整理。

相信做這個設定的方法有很多，在這分享我覺得稍微比較方便的方法。

以下都是在 Windows 環境下使用 VS Code 對應的方法

在編輯器中輸入想建立的快捷指令
把指令框起來
按 Ctrl + shift + p 叫出指令輸入框，輸入 create snippet
輸入完選取 create snippet 後會有四個步驟，要依序輸入：

適用的語言 (注意在 html 裡的 <style></style> 區塊內的部分要用 css，其他根據所需輸入 html, ruby, erb…等)
Snippet 的名稱 (會在往後輸入指令時顯示在右方<見下圖 1 >)
呼叫 Snippet 需輸入的文字 (用來呼叫、同時也會顯示在輸入指令時的左邊 <見下圖 2 >)
Snippet 的描述 (可以在往後輸入指令時按顯示更多看到 <見下圖 3 >)

全部輸入完之後就算建立好了

建立完之後可以用以下方法檢查及修改：

到 File > Preferences > User Snippets 中選取相對應的 Snippets file

選到相對應的檔案之後會看到一些像是指令的東西，可以在裡面做修改刪除（要記得繼續遵守裡面的格式，不然功能會失效）<見下方範例>

根據剛剛輸入的資訊可以把指令說明為：

"<Snippet 名稱>": {
  "prefix": "<Snippet 指令>",
  "body": [
    <輸入 Snippet 指令後會出現的東西(陣列形式)>
  ],
  "description": "<Snippet 敘述>"
},- 上方 < > 中的文字為要更改的部分
- 在最後一個 Snippet 後面不能放逗號，否則以後直接用指令設定的 Snippet 會無法建立>

在 body 中的一些說明：

前方的空白會從插入點後的階層開始套用
（如果都沒有空白，呼叫時 VS Code 會自動幫忙調整成同一個階層）
制定預設插入點及應修改範圍

用 $ + 數字可以加入插入點（插入順序為從 1 開始往大的跑）
${數字:預設文字} 這樣可以設定呼叫指令時放入的預設文字，在依照數字順序進行修改（例：呼叫上方圖片中的 Snippet "grid” 時會預設顯示 <div class=”col col-md-6 col-lg-4 col-xl-4"> 然後再從 6 開始進行修改）
呼叫時可使用 tab 進行插入點切換
$0 (數字 0) 代表最後一個插入點（如果沒有 $1, $2...）則插入點會直接跑過去
如果沒設定插入點的話會以 body 中的最後位置為插入點

重新設定完後記得存檔

這樣應該就可以設定好自己想要的快捷指令了

VS Code 快捷指令(Snippet)設定

Written by John Hsu