##### 為什麼要用 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](https://www.jetbrains.com/help/idea/using-live-templates.html) 功能非常好用，其實 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 是非常簡單的事情（無需安裝任何擴充套件），有兩種方法實現： 1. 在 macOS 中選擇：Code -> Preferencts -> User Snippets 選項 2. 或者在 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 Stu