聊聊VSCode中怎么用snippets,用以提升開發效率!

vscode支持自定義 snippets,可以極大提高開發效率。下面本篇文章就來給大家通過一個案例來學會 vscode snippets,希望對大家有所幫助!

聊聊VSCode中怎么用snippets,用以提升開發效率!

snippets 是片段的意思,vscode 支持自定義 snippets,寫代碼的時候可以基于它快速完成一段代碼的編寫?!就扑]學習:《vscode》】

聊聊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"

聊聊VSCode中怎么用snippets,用以提升開發效率!

可以多光標同時編輯:

"$1??xxxx?$1"

聊聊VSCode中怎么用snippets,用以提升開發效率!

可以加上 placeholader,也可以做默認值:

"${1:aaa}??xxxx", "yyyy?${2:bbb}"

聊聊VSCode中怎么用snippets,用以提升開發效率!

可以提供多個值來選擇:

"${1|卡頌,神光,yck|}最帥"

聊聊VSCode中怎么用snippets,用以提升開發效率!

還提供了一些變量可以?。?/p>

"當前文件:?$TM_FILENAME", "當前日期:?$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"

聊聊VSCode中怎么用snippets,用以提升開發效率!

而且還能對變量做正則替換:

"${TM_FILENAME/(.*).[a-z]+/${1:/upcase}/i}"

聊聊VSCode中怎么用snippets,用以提升開發效率!

基本語法過了一遍,大家知道支持啥就行,后面我們來做個真實的案例,把這些用一遍就會了。

通過 command + shift + p,輸入 snippets 然后選擇一種范圍:

聊聊VSCode中怎么用snippets,用以提升開發效率!

聊聊VSCode中怎么用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?跳轉" ????} }

這個沒啥好說的,就是根據前綴補全內容:

聊聊VSCode中怎么用snippets,用以提升開發效率!

然后在 name、id、鏈接文字處加三個光標,也就是 $1、$2、$3:

{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>$3</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }

可以按 tab 鍵快速編輯其中變化的部分:

聊聊VSCode中怎么用snippets,用以提升開發效率!

然后加上 placeholder:

{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${3:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }

聊聊VSCode中怎么用snippets,用以提升開發效率!

其實 target 部分也是可選的,這里我們用多選來做:

選項有兩個,就是 target=”_blank” 或者空格。

${3|?,target="_blank"|}

所以 snippets 就變成了這樣:

{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${4:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }

聊聊VSCode中怎么用snippets,用以提升開發效率!

跳轉地址大多數是和當前文件名有關,比如 XxxYyyZzzList 跳轉 XxxYyyZzzDetail 的比較多。

所以我們默認值取當前文件名,用 TM_FILENAME 變量(所有可用變量可以在 vscode 官網查):

${1:$TM_FILENAME}

現在的 snippets:

{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${4:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }

效果是這樣:

聊聊VSCode中怎么用snippets,用以提升開發效率!

確實把文件名填上去了,但是還要手動改,能不能填上去的就是改了之后的呢?

可以,變量支持做 transform,也就是正則替換:

XxxList.vue 要取出 Xxx 來,然后拼上 Detail,這樣的正則不難寫:

用 js 寫是這樣的:

'XxxList.vue'.replace(/(.*)List.vue/,'$1Detail')

聊聊VSCode中怎么用snippets,用以提升開發效率!

在 snippets 里也差不多,只不過用 / 分開:

${TM_FILENAME/(.*)List.vue/$1Detail/i

所以 snippets 就變成了這樣:

{ ????"routerLink":?{ ????????"prefix":?"link", ????????"body":?[ ????????????"<router-link>${4:link}</router-link>" ????????], ????????"description":?"router-link?跳轉" ????} }
? 版權聲明
THE END
喜歡就支持一下吧
點贊15 分享