為什麼要用 snippets(程式碼段)?
不管你使用何種程式語言,在我們日常的編碼工作中,都會存在有大量的重複程式碼編寫,例如:
- 日誌列印:
console.log,log.info('...')
- 輸出到控制檯:
System.out.println("...."), fmt.Println("...")
- 迴圈:
switch(...){},for(i := 0, i <= len, i++),for...i
等等
這種模板程式碼在 java,go 中靜態語言會比較多,實際上,平時除了 模板程式碼,還有很多模板檔案,也是存在很多重複編碼的工作,例如:vue檔案,html檔案,xml檔案,裡面的很多標籤,方法,屬性基本都是固定的,我平時遇到比較多的還是 java,go 裡面的模板檔案和程式碼,關於重複程式碼不勝列舉,這裡就不過多概述了。
寫這些模板程式碼和模板檔案,實際上除了練習你的打字速度外,不會給你帶來任何技能上的提升,是屬於 重複而且低價值的事情,比如就算你把 "hello world" 練習一千遍,你也不會成為高手一樣,
那麼作為一個高效的程式設計師,要懂利用如何節省自己的時間,把有限的精力投資在高價值,高回報的事情上,對於這些無法逃避的重複的編碼工作,我們需要用技術和工具來把他們解決就好,所以 VSCode 提供的 user snippets 使用者程式碼段(在 jetbrains 家族中也稱為 Live templates )就是用來做這個事情的
怎麼使用 snippets ?
知道了為什麼要用程式碼段,我們來說說 VSCode 中的 snippets 的具體作用
熟悉 Jetbrains 家族產品的同學應該知道 Live Templates 功能非常好用,其實 VSCode snippets 就是型別 Jetbrains 的 Live Templates 功能,他們解決的是相同的問題。
VSCode 官方對於 snippets 的描述如下:
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
簡單翻譯就是:
程式碼段是一種模板,可以更容易地輸入重複的程式碼模式,例如迴圈或條件語句
使用 snippeets
程式碼段對 javascript 中的 ajax 的重複程式碼進行封裝,只需要輸入關鍵字:ajax,就可以把整個程式碼段帶出來,非常的高效,具體參見下面來自官方的示例:
檢視已有的 snippets
其實 VSCode 對於每種語言都有預設初始化的 snippets,能夠滿足日常的使用,在 VSCode 開啟命令列介面輸入:insert snippets 即可檢視當前可以用的 snippets,如圖:
以上是在 JavaScript 語言環境下看到的 snippets (目前內建對 JavaScript 支援比較友好)
當我切換到 golang 的時候,檢視的 snippets 如下(未安裝語言包的情況下):
這麼少的 snippets 肯定是不夠用的,好在 VSCode 的豐富外掛為我們提供了擴充套件的可能性,通常相關聯的語言工具包都內建的大量常用的 snippets,我們通常只要安裝即可。
在 VSCode 的擴充套件使用:@category:snippets
過濾搜尋安裝對應的工具即可,如圖:
安裝語言包完成後,在 VSCode Command 頁面輸入:insert snippets 即可看到新增的大量的 snippets :
熟練使用語言包內建的 snippets 可以滿足 80% 場景。
但是可能還是無法滿足和覆蓋所有場景,
這樣場景下我們需要建立自己的 snippets 來完全解決程式碼重複的問題。
建立你自己的 snippets
在 VSCode 中建立 snippets 是非常簡單的事情(無需安裝任何擴充套件),有兩種方法實現:
- 在 macOS 中選擇:Code -> Preferencts -> User Snippets 選項
- 或者在 VSCode Command 中輸入:configure user snippets 即可
如果是建立 snipperts 選擇 選擇 New Global Snippets file ,輸入你要創面的 snipperts name 即可進入配置
snipperts 檔案是 JSON 風格,剛建立後的預設格式內容如下:
我簡單描述的一下屬性的作用:
- scope:限定程式碼段的作用域,例如 go 語言的程式碼段不會出現在 js 中,反之亦然
- prefix:是快捷關鍵字,當 VSCode 檢測到程式碼中出現 prefix 關鍵字就會在編輯器中替換為 body 的內容
- body:是重複的程式碼模板內容,通常是程式設計師想要自動化的一些重複,模板程式碼,錄入在這裡
- description:顧名思義就是對這段 snippets 的具體描述
這裡值得再提一下的就是, body 裡面的 $1
關鍵字是模板程式碼替換後滑鼠游標的所在位置,當出現多個 $1
,$2
的時候,可以通過鍵盤 TAB
按鍵快速切換滑鼠游標所在位置,用於提高效率,這塊就不具體深入描述了,有興趣的小夥伴可以自行去探索。
關於 snipperts 配置檔案的細節還有很多,這裡就不深究了,
有興趣深入研究的夥伴可以 VSCode Snippets 官方的相關的文件,裡面解釋的非常詳細。
參考資料:
- [Snippets in Visual Studio Code