2017年4月16日 星期日

VS Code 中自訂程式碼片段的功能(snippet)


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

今天來和大家分享一下在寫程式時如何提升工作效率—自訂程式碼片段(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 也歡迎你和大家分享~


Share:

0 意見:

張貼留言