本文介紹的是 vscode snippet 插件，一種代碼片段配置插件，可以節省你寫樣板代碼的時間。
你可能之前學習過 vscode Snippet 插件，知道它的作用也學習了配置的語法，但是你想不到落地使用的場景。本文也將解決你的這個疑惑～
本文將介紹 VSCode Snippet 的使用介紹、配置語法、引入方式和使用場景。【推薦學習：vscode、vscode】
VSCode Snippet 插件使用簡介
（圖片來自于 VSCode 官網）
如 gif 圖所示，當你想編寫一段 ajax 代碼時，只需要在編輯器里輸入 ajax，再點擊下 Tab 鍵，就會為你自動生成 ajax 代碼的模板。
Snippet 支持我們配置自己想要的任意代碼片段，因此我們可以把項目中常見的代碼片段抽出來，提高編程效率。同時可以共享給所在的團隊，提高整個團隊的編程效率。
Snippet 配置語法
我們拿 antd 組件庫舉例，比如我們想配置 antd 的 Snippet 代碼片段：
Antd Selet 組件代碼如下：
<select></select>
對應的 Snippet 配置代碼如下：
{ ????"antd/Select":?{ ????????"prefix":?["Select"], ????????"body":?[ ????????????"<select></select>" ????????], ????????"description":?"Antd?Select?UI?組件" ????} }
字段含義：
-
prefix 是觸發 snippets 的前綴，可以通過數組指定多個
-
body 是填入到編輯器的內容
-
description 是 snippets 的描述
body 部分可以通過 ${} 的方式指定光標位置、順序、占位字符串、可用的值等
${} 語法簡介：
-
光標跳轉：
-
如果你的項目使用了某個開源的框架/組件庫，這個開源項目沒有配套的 Snippets 插件，那么已經學會封裝 Snippets 插件的你，快快動起勤勞的小手，是時候為你的團隊或者社區做些貢獻啦～
-
如果你的項目中，基于 antd 等 UI 組件庫，又封裝了一些自己業務的公共組件，那么可以給這些業務相關的公共的組件封裝一個 Snippets 插件，提高你團隊的效率
-
除了 JSX 類的組件，一些常用的工具函數也可以抽象 Snippets 插件代碼片段
更多關于VSCode的相關知識，請訪問：vscode！
