一個案例學會 VSCode Snippets，極大提高開發效率
snippets 是片段的意思，VSCode 支持自定義 snippets，寫代碼的時候可以基于它快速完成一段代碼的編寫。
不只是 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|}最帥"
還提供了一些變量可以取：
- "當前文件： $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 to={ name:'xxx', params: {id: 1} } target='_blank'>link</router-link>"
- ],
- "description": "router-link 跳轉"
- }
- }
這個沒啥好說的，就是根據前綴補全內容：
然后在 name、id、鏈接文字處加三個光標，也就是1、2、$3：
- {
- "routerLink": {
- "prefix": "link",
- "body": [
- "<router-link to={ name: $1, params: {id: $2} } target='_blank'>$3</router-link>"
- ],
- "description": "router-link 跳轉"
- }
- }
可以按 tab 鍵快速編輯其中變化的部分：
然后加上 placeholder：
- {
- "routerLink": {
- "prefix": "link",
- "body": [
- "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } target='_blank'>${3:link}</router-link>"
- ],
- "description": "router-link 跳轉"
- }
- }
其實 target 部分也是可選的，這里我們用多選來做：
選項有兩個，就是 target="_blank" 或者空格。
- ${3| ,target=\"_blank\"|}
所以 snippets 就變成了這樣：
- {
- "routerLink": {
- "prefix": "link",
- "body": [
- "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
- ],
- "description": "router-link 跳轉"
- }
- }
跳轉地址大多數是和當前文件名有關，比如 XxxYyyZzzList 跳轉 XxxYyyZzzDetail 的比較多。
所以我們默認值取當前文件名，用 TM_FILENAME 變量(所有可用變量可以在 vscode 官網查)：
- ${1:$TM_FILENAME}
現在的 snippets：
- {
- "routerLink": {
- "prefix": "link",
- "body": [
- "<router-link to={ name: '${1:$TM_FILENAME}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${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 to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
- ],
- "description": "router-link 跳轉"
- }
- }
填入的代碼都是替換好了的：
鏈接的內容我們希望用選中的內容，這個也有變量，就是 TM_SELECTED_TEXT。
最后，我們希望 router-link 這個標簽也可以變，而且改的時候開閉標簽可以一起改。
這個要用多光標編輯，指定多個 $x 為同一個數字就行。
- <${5:router-link}></${5:router-link}>
效果就是這樣的：
這就是最終的 snippets，所有 snippets 語法都用了一遍。
完整 snippets 如下，大家可以在 VSCode 里用用看，用起來體驗還是很爽的：
- {
- "routerLink": {
- "prefix": "link",
- "body": [
- "<${5:router-link} to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:$TM_SELECTED_TEXT}</${5:router-link}>"
- ],
- "description": "router-link 跳轉"
- }
- }
總結
基本所有主流編輯器都支持 snippets，也就是配置代碼片段來提高開發效率，VSCode 也不例外，這是一個很有用的功能。
VSCode snippets 支持 global、project、language 3 種生效范圍。我個人用全局的比較多。
它也算是一種 DSL 了，支持很多語法，比如指定光標位置、多光標編輯、placeholder、多選值、變量、對變量做轉換等語法。
- 指定光標位置：$x
- 多光標編輯：$x $x
- 指定 placeholder 文本：${x:placeholder}
- 指定多選值：${x|aaa,bbb,ccc|}
- 取變量：$VariableName
- 對變量做轉換：${VariableName/正則/替換的文本/i}
我們寫了一個 router-link 的 snippets，綜合運用了這些語法，過一遍就會了。
能自己定義適合自己的 snippets，對于提高開發效率是很有幫助的。如果沒寫過，不妨從今天開始試一下吧。
