續，昨日

今天將講解剩下的部分，將介紹：

1. 如何讓 Snippets 連結到快捷鍵上。
2. 將 Snippets 對應到全域。
3. 補充 Snippets 的變數們，可視為 Snippets 的保留字，提供文字動態轉換的功能。

如何將 Snippets 綁定到快捷鍵上

開啟快捷鍵設定檔：keybindings.json

開啟步驟如下：

1. 將滑鼠挪到左下角的齒輪後，點擊。
2. 找到鍵盤快速鍵後，點擊。
3. 會開啟類似 GUI 功能的介面。
4. 將滑鼠挪到右上角，找尋此圖示後，點擊。
   
5. keybindings.json 開啟成功。

寫法（一）：直接 snippet 寫入 keybindings.json

提醒：command & when 不用修改。

{
  "key": "快捷鍵按法",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "snippets 寫在這"
  }
}

範例：

單行

{
  "key": "cmd+k a",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1)"
  }
}

多行

使用 \n 即可。

{
  "key": "cmd+k b",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('----')\nconsole.log($1)\nconsole.log($2)\nconsole.log('----')"
  }
}

寫法（二）：引用已經撰寫好的 snippets

前提：必須先行設定好一組 snippet，才可進行呼叫。

{
  "key": "快捷鍵按法",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "該 snippet 所在的語言名稱",
    "name": "該 snippet 的名稱"
  }
}

範例

引用前幾個範例。

{
  "key": "cmd+k c",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "javascript",
    "name": "Console Log 1"
}

如何將 Snippets 設定為全域

步驟如下：

1. 將滑鼠挪到左下角的齒輪後，點擊。
2. 找到使用者程式碼片段後，點擊。
3. 這次我們選擇新增全域程式碼片段檔案。
   
4. 輸入檔案名稱後，按下 enter。
5. 將會建立一個副檔名為 .code-snippets 的 json 檔。

差異：

1. 多了一個屬性：scope，負責定義對應的語言。

以下是預設範例：

{
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console",
  }
}

Snippets 的變數們

Snippets 有預設不少變數可以使用，只要使用在 body 內使用，程式碼就會自動顯示出來。

以下是列表

編輯內容、檔案系統

日期、時間

註解

用法

在變數名稱前方使用 $ 就可以觸發使用了。

以下提供範例：

{
  "Console Log 8": {
    "prefix": "clog8",
    "body": [
      "console.log('---- $CURRENT_YEAR -----')",
      "console.log($CURRENT_YEAR)",
      "console.log($CURRENT_YEAR_SHORT)",
      "console.log($CURRENT_MONTH)",
      "console.log($CURRENT_MONTH_NAME)",
      "console.log($CURRENT_MONTH_NAME_SHORT)",
      "console.log($CURRENT_DATE)",
      "console.log($CURRENT_DAY_NAME)",
      "console.log($CURRENT_DAY_NAME_SHORT)",
      "console.log($CURRENT_HOUR)",
      "console.log($CURRENT_MINUTE)",
      "console.log($CURRENT_SECOND)",
      "console.log($CURRENT_SECONDS_UNIX)",
      "console.log('---- $CURRENT_MONTH ----')",
      "$BLOCK_COMMENT_START",
      "$BLOCK_COMMENT_END",
      "$LINE_COMMENT"
    ],
    "description": "使用預設保留字的 console.log"
  },
}

輸出結果：

結論

完成！！！
透過這兩篇關於 Snippets 的介紹，讓設定專屬於自己的 snippets 不再是夢想，未來不會埋怨 extension 上沒有符合自己需求的 snippets 了！