VS Code 中自訂程式碼片段的功能（snippet）

本文同步發表於 PJCHENder 前端網頁資源站。

今天來和大家分享一下在寫程式時如何提升工作效率—自訂程式碼片段（snippet）功能。

什麼是程式碼片段（VSCode Snippet）

在寫程式時，我們可能都會有一些經常用到的程式碼片段，以 JavaScript 來說，我們可能常常會用到 console.log() 來 debug；或者如果你有用到一些模版語言，像是 Rails 的 ERB，你可能長常要輸入 <%= %> 或者是 PHP 中的 <?= ?>。

這時候，如果我們能夠善用編輯器提供的功能，自訂程式碼片段，我們只需要輸入 "log" 就能出現一常串的 "console.log()"，只要輸入 "pr" 就能出現一常串的 <%= %>。

也就是說，善用程式碼片段的功能，能夠大大提升你開發了效率。 這樣的功能在許多編輯器都有提供（ VSCode 或 Sublime 等等都有），今天就先以 #VSCode 當做示範。 如果有人對於 Sublime 也有興趣的話，可以之後再做分享。

自訂程式碼片段的功能可以讓我們透過自訂的縮寫，就快速產出一連串的程式法片段。這樣的程式碼片段我們一般會把它稱作 snippet。

示範影片

先來看一段示範影片：

設定方式

首先進到 Code --> 喜好設定 --> 使用者程式碼片段

接著選擇你想要將這樣的程式碼片段套用到哪一個程式語言上。

編輯的方式是 JSON 資料格式

在這裡黃色的部分是你可以自己填寫設定的。其中 $0 指的是當我們插入程式碼片段後，打字的游標要停留在哪裡。

這時候其實已經完成建立的，但是如果你取的是一些比較通用的名稱，你會方現你所建立的程式碼區塊可能不是在最上面，這會使得你必須要"選擇"後才能使用（這樣太不方便了）。

因此，讓我們在多一步設定。進入 Code --> 喜好設定 --> 設定。

這裡一樣是透過 JSON 格式編輯，左邊的欄位是 VSCode 的預設值；右邊可以放你自己想要的設定值。
在這裡我們要加一段設定到 JSON 中，
"editor.snippetSuggestions": "top"，這段的意思是告訴它我們要把我們設定的 Snippet 放在最上面顯示。

大功告成了，這時候我們只要打 log 接著按下 TAB 或 ENTER 就會自動幫我們帶出完整的程式碼片段。

好用工具

這裏推薦一個建立 Snippet 的好用工具，叫做 Snippet Generator，使用方式非常簡單：

套用到多個語言的 Global Snippet

在剛剛的範例中，是針對特定的語言（例如，JavaScript）去設定 Snippet，也就是說，只有在附檔為名.js時，才會套用所設定的 Snippet。但如果希望同一份 Snippets 可以套用到多個語言時，可以怎麼做呢？

在新版的 VSCode 中，就可以將一份 Snippet 套用到多個語言上，例如把 JavaScript 的 Snippet 同時套用到附檔為 .js 和 .vue 的檔案，把 HTML 的 Snippet 同時套用到副檔名為 .html, .php, .erb 的檔案，這種可以套用到多種語言的 Snippets 在 VSCode 中稱作 global snippets。

建立的方式和剛剛說明的一樣，只是這次要選「新增全域程式碼片段」，而 global snippet 的檔案副檔名會是 .code-snippets：

一樣是透過 JSON 的方式設定，但會多一個屬性是 "scope"，後面接的是你希望這個 snippets 套用到哪些語言，例如："scope": "javascript,typescript"，簡單的範例如下：

// 範例來自 VSCode 官網
{
  "For_Loop": {
    "prefix": "for",
    "scope": "javascript,typescript",
    "body": [
      "for (const ${2:element} of ${1:array}) {",
      "\t$0",
      "}"
    ],
    "description": "For Loop"
  },
}

參考

• Creating your own snippets @ VSCode