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?跳轉" ????} }