2017年4月16日

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"
  },
}

參考