利用 Vscode snippets 和項目成員一起提高開發效率
code snippets 是代碼片段的意思，是 vscode 提供的根據某字符串快速補全一段代碼的功能，可以提高寫代碼的效率。
vscode 的 snippets 是可以隨項目共享的，多人開發一個項目的時候，可以維護項目級別的 snippets 并且通過 git 共享，來提高項目開發效率。
下面我們來詳細了解下 snippets。
snippets 的功能
snippets 配置的格式如下：
- {
- "For Loop": {
- "prefix": ["for", "for-const"],
- "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
- "description": "A for loop."
- }
- }
- prefix 是觸發 snippets 的前綴，可以通過數組指定多個
- body 是填入到編輯器的內容
- description 是 snippets 的描述
其中 body 部分可以通過 ${} 的方式指定光標位置、順序、占位字符串、可用的值等，有 5 種語法，我們分別來看一下：
光標跳轉：$1 $2
可以通過 $1、$2 指定光標位置，當填入 snippets 的內容之后，光標會設置到 $1 的位置來編輯，當編輯完，可以通過 tab 來跳到 $2。
比如這段配置：
- {
- "測試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "$1 xxxx",
- "yyyy $2",
- ],
- "description": "光標跳轉"
- }
- }
效果為：
還有當有多個 $1、$2 等，編輯一處其他內容也會同步修改，也就是 vscode 的多光標編輯。
比如：
- {
- "測試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "$1 xxxx $1",
- ],
- "description": "多光標"
- }
- }
效果為：
通過這種功能可以快速編輯 snippets 中的可編輯內容。
占位符：${1: placeholder}
只是光標跳轉雖然可以快速編輯內容，但是不知道編輯的部分是什么，所以 snippets 支持了設置 placeholder 的值，默認會選中該段文本，輸入內容即可覆蓋。
比如：
- {
- "測試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "${1:aaa} xxxx",
- "yyyy ${2:bbb}",
- ],
- "description": "光標跳轉"
- }
- }
效果為：
可選值：${1|text1,text2,text3|}
占位符的方式就像 input 標簽加了個 placeholder 屬性，還是要手動輸入，當可編輯區域是有幾個可選的值的話，就要換成下拉選擇，在 snippets 里就是通過:
${1|text1,text2,text3|} 的方式支持，在 | 和 | 之間填入通過 , 分割的多個選項。
比如：
- {
- "測試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "${1|神說要有光,卡頌|}"
- ],
- "description": "可選值"
- }
- }
效果為：
變量：$變量名
在模版可編輯位置填入內容的時候，有的時候需要用到選中的值、剪貼板的值、文件名、日期等，這些信息通過 snippets 中支持的變量來取。
比如：
- TM_FILENAME: 文件名
- TM_CURRENT_LINE: 當前行的內容
- CLIPBOARD: 剪貼板內容
- WORKSPACE_NAME：workspace 的名字
- WORKSPACE_PATH：workspace 的路徑
- CURRENT_YEAR：當前年
- CURRENT_MONTH：當前月
- CURRENT_DATE：當前日
- RANDOM: 隨機數
- RANDOM_HEX: 6 位隨機 16 進制數
- UUID: 唯一 id
可以取這些變量的值來填入到光標位置，方式就是使用 $TM_FILENAME、$CURRENT_YEAR 的方式。
比如：
- {
- "測試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "當前文件： $TM_FILENAME",
- "當前日期： $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"
- ],
- "description": "變量"
- }
- }
效果為：
變量轉換：${變量名/匹配的正則/替換到的字符串/匹配模式}
支持了變量的填入還不行，因為有的變量的內容不合適，需要做一些字符串替換，所以 snippets 只吃了 transform 的功能。
比如 abc-123.js 的文件，
我們通過 $TM_FILENAME 取到文件名，然后把后綴去掉轉成大寫填入
- ${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}
對文件名 TM_FILENAME 做正則匹配 (.*).[a-z]+，把分組一變成大寫之后返回，匹配模式為忽略大小寫(ignore)。
- {
- "填入文件名": {
- "scope": "javascript,typescript",
- "prefix": "filename",
- "body": [
- "${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
- ],
- "description": "文件名"
- }
- }
我們實驗下效果：
可以看到，正確的取到了文件名，并且去掉后綴轉成大寫填入了。
知道了 snippets 的功能，那么怎么設置 snippets 呢?snippets 在什么范圍內生效呢?
snippets 的范圍
command + shift + p 打開命令面板，輸入 snippet，選擇 configure user snippets：
可以選擇創建全局的、項目范圍的、語言范圍的 snippets：
分別會打開不同位置的文件來添加 snippets。
語言級別的 snippets 是對于特定語言才生效，這個還可以封裝成插件。在插件的 package.json 中配置下即可：
- {
- "contributes": {
- "snippets": [
- {
- "language": "javascript",
- "path": "./snippets.json"
- }
- ]
- }
- }
項目范圍的 snippets 是在項目根目錄的 .vscode/xxx.code-snippets 下面添加的，vscode 啟動的時候會讀取這些文件，然后使之在項目范圍內生效。
當有一些項目級別的代碼片段可以共享的時候，完全把這個文件提交到遠程 git 倉庫，然后項目成員都可以共享這些 snippets 設置。對于一些模版代碼比較多的項目，還是比較有意義的。
總結
snippets 是 vscode 提供的用于提高開發效率的一些快速輸入代碼片段的功能，支持光標位置的跳轉、多光標同時編輯、占位符、可選值、變量、變量轉換等功能，靈活運用這些功能，可以作出易用的提高開發效率的 snippets。
snippets 有 global、language、project 3 種生效范圍：global 是全局的設置;language 是語言級別的設置，可以進一步封裝成插件共享;project 則是項目范圍內的，在 .vscode 下的 xx.code-snippets 中，完全可以提交到 git 倉庫，和其他成員共享。
靈活運用 snippets 功能，是可以提高開發效率的，而且這個也是可以項目級別共享的。希望這篇文章能夠幫大家了解 snippets。
【編輯推薦】
