vscode支持自定義 snippets，可以極大提高開發效率。下面本篇文章就來給大家通過一個案例來學會 vscode snippets，希望對大家有所幫助！
snippets 是片段的意思，vscode 支持自定義 snippets，寫代碼的時候可以基于它快速完成一段代碼的編寫?！就扑]學習：《vscode》】
不只是 VSCode，基本所有的主流編輯器都支持 snipeets。
一個功能被這么多編輯器都支持，那肯定是很有用的，但是這功能大多數人都沒用起來。
我之前寫的?snippets?文章中講了 snippets 支持的各種語法和配置方式，但是并沒有用這些來做一個真實的案例。
所以，這篇文章就來講一個真實的 snippets，基本用到了所有的 snippets 語法。能獨立把它寫出來，就可以說 snippets 已經掌握了。
我們還是先回顧下 VSCode 的 snippets 語法
snippets 基礎
snippets 是這樣的 json 格式：
{ ????"alpha":?{ ????????"prefix":?["a",?"z"], ????????"body":?[ ????????????"abcdefghijklmnopqrstuvwxyz" ????????], ????????"description":?"字母", ????????"scope":?"javascript" ????} }
- prefix 是觸發的前綴，可以指定多個
- body 是插入到編輯器中的內容，支持很多語法
- description 是描述
- scope 是生效的語言，不指定的話就是所有語言都生效
body 部分就是待插入的代碼，支持很多語法，也是一種 DSL（領域特定語言）。
支持通過 $1、$2 指定光標位置：
"$1??xxxx", "yyyy?$2"
可以多光標同時編輯：
"$1??xxxx?$1"
可以加上 placeholader，也可以做默認值：
"${1:aaa}??xxxx", "yyyy?${2:bbb}"
可以提供多個值來選擇：
"${1|卡頌,神光,yck|}最帥"
還提供了一些變量可以?。?/p>
"當前文件：?$TM_FILENAME", "當前日期：?$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"
而且還能對變量做正則替換：
"${TM_FILENAME/(.*).[a-z]+/${1:/upcase}/i}"
基本語法過了一遍，大家知道支持啥就行，后面我們來做個真實的案例，把這些用一遍就會了。
通過 command + shift + p，輸入 snippets 然后選擇一種范圍：
snippets 有 project、global、language 3 種生效范圍。我個人寫 global 級別的比較多，項目和語言級別的也可以。
基礎過完了，接下來我們就來寫一個 snippets 吧。
實戰案例
我最近在做 vue 的項目，寫 router-link 比較多，所以封裝了個 router-link 代碼的 snippets。
我們先寫個最簡單的版本：
{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>link</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
這個沒啥好說的，就是根據前綴補全內容：
然后在 name、id、鏈接文字處加三個光標，也就是 $1、$2、$3：
{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>$3</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
可以按 tab 鍵快速編輯其中變化的部分：
然后加上 placeholder：
{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${3:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
其實 target 部分也是可選的，這里我們用多選來做：
選項有兩個，就是 target=”_blank” 或者空格。
${3|?,target="_blank"|}
所以 snippets 就變成了這樣：
{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${4:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
跳轉地址大多數是和當前文件名有關，比如 XxxYyyZzzList 跳轉 XxxYyyZzzDetail 的比較多。
所以我們默認值取當前文件名，用 TM_FILENAME 變量（所有可用變量可以在 vscode 官網查）：
${1:$TM_FILENAME}
現在的 snippets：
{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${4:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
效果是這樣：
確實把文件名填上去了，但是還要手動改，能不能填上去的就是改了之后的呢？
可以，變量支持做 transform，也就是正則替換：
XxxList.vue 要取出 Xxx 來，然后拼上 Detail，這樣的正則不難寫：
用 js 寫是這樣的：
'XxxList.vue'.replace(/(.*)List.vue/,'$1Detail')
在 snippets 里也差不多，只不過用 / 分開：
${TM_FILENAME/(.*)List.vue/$1Detail/i
所以 snippets 就變成了這樣：
{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${4:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
