前言

今天要跟各位介紹，關於如何製作程式碼片段，Snippets。之前我十分仰賴 extension，但是在使用上，總會感到有些許不便，不時會想說：「如果 XX 的片段能使用，那該有多好」。

看完這篇後，這個念頭從此就消失了！

現在就讓我來介紹 Snippets 的相關設定吧。

開啟設定檔

• 方法一
  • 將滑鼠挪到左下方並點擊齒輪。
  • 點擊使用者程式碼片段。
• 方法二
  • Windows
    • 將滑鼠挪到視窗的最上方
    • 檔案 -> 喜好設定 -> 使用者程式碼片段
    • File -> Preferences -> User Snippets
  • macOS
    • 將滑鼠挪到畫面的左上方
    • Code -> 喜好設定 -> 使用者程式碼片段
    • Code -> Preferences -> User Snippets

點擊後會開啟選單。

從介紹介紹單一語言開始吧！

請選擇 JavaScript 後，開啟編輯畫面。

關於如何設定

基本設定介紹

Snippets 的設定才用 JSON 的格式，該份檔案每個 Snippets 的寫法是：

{
  "填寫 Snippet 的名稱": {
    "prefix": "填寫關鍵字",
    "body": "填寫要輸出的內容",
    "description": "（選擇性）填寫描述，將會顯示在 IntelliSense 上"
  }
}

以下會列出幾個示範案例，想要試試的話，請加範例全部複製後，直接貼到 javascript.json 上，完全覆蓋。。

只有單行的話

{
  "Console Log 1": {
    "prefix": "clog1",
    "body": "console.log()",
    "description": "單行的 console.log"
  },
}

輸出結果：

多行也辦得到

使用陣列就能輸出多行。

{
  "Console Log 2": {
    "prefix": "clog2",
    "body": [
      "console.log('-----------')",
      "console.log()",
      "console.log('-----------')"
    ],
    "description": "三行的 console.log"
  },
}

輸出結果：

數個以上關鍵字

如同輸出多行，使用陣列在 prefix 即可。

{
  "Console Log 3": {
    "prefix": [
      "clog3",
      "l4"
    ],
    "body": [
      "console.log('-----------')",
      "console.log()",
      "console.log('-----------')"
    ],
    "description": "多重關鍵字的 console.log"
  },
}

輸出結果：
（關鍵字：clog3）

（關鍵字：l4）

預設輸入位置

使用 $0、$1、​$2...等，使用 tab 可以跳到下一個位置。
順序從 1 開始，0 固定為最後。

{
  "Console Log 4": {
    "prefix": "clog4",
    "body": [
      "console.log('---- $1 -----')",
      "console.log($0)",
      "console.log('---- $2 -----')"
    ],
    "description": "預設輸入位置的 console.log"
  },
}

輸出結果：

在輸入的位置先擺上文字

等同是 placeholder 的概念，具備解說的功能。

{
  "Console Log 5": {
    "prefix": "clog5",
    "body": [
      "console.log('---- ${1:輸入標題} -----')",
      "console.log(${0:輸入變數})",
      "console.log('---- ${3:輸入結尾} -----')"
    ],
    "description": "預設輸入欄位的 console.log"
  },
}

輸出結果：

巢狀 placeholder 也沒問題。

{
  "Console Log 6": {
    "prefix": "clog6",
    "body": [
      "console.log('---- ${1:輸入標題 ${2:輸入副標題}} -----')",
      "console.log(${0:輸入變數})",
      "console.log('---- ${3:輸入結尾} -----')"
    ],
    "description": "巢狀寫法的 console.log"
  },
}

輸出結果：

在輸入的位置上擺上預設選項

提供選項，讓使用者可以選擇。

{
  "Console Log 7": {
    "prefix": "clog7",
    "body": [
      "console.log('---- ${1|元件,物件,變數|} -----')",
      "console.log(${0:輸入變數})",
      "console.log('---- ${2|結尾,中間,暫時|} -----')"
    ],
    "description": "有選項的 console.log"
  },
}

輸出結果：

當然有方便的工具囉

以上介紹著重在如何設定，至於要輸出的內容，已經有高手寫出線上編輯器，讓開發者們可以快速編輯出自己想要的內容。

連結

（圖一）

（圖二）

結論

今天列出不少範例供大家嘗試玩玩看，明天將介紹如何綁定在鍵盤上。