偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

一個案例學會 VSCode Snippets,極大提高開發(fā)效率

開發(fā) 開發(fā)工具
snippets 是片段的意思,VSCode 支持自定義 snippets,寫代碼的時候可以基于它快速完成一段代碼的編寫。

snippets 是片段的意思,VSCode 支持自定義 snippets,寫代碼的時候可以基于它快速完成一段代碼的編寫。

不只是 VSCode,基本所有的主流編輯器都支持 snipeets。

一個功能被這么多編輯器都支持,那肯定是很有用的,但是這功能大多數(shù)人都沒用起來。

我之前寫過一篇 snippets 的文章,講了 snippets 支持的各種語法和配置方式,但是并沒有用這些來做一個真實的案例。

所以,這篇文章就來講一個真實的 snippets,基本用到了所有的 snippets 語法。能獨立把它寫出來,就可以說 snippets 已經(jīng)掌握了。

我們還是先回顧下 VSCode 的 snippets 語法

snippets 基礎

snippets 是這樣的 json 格式:

  1.     "alpha": { 
  2.         "prefix": ["a""z"], 
  3.         "body": [ 
  4.             "abcdefghijklmnopqrstuvwxyz" 
  5.         ], 
  6.         "description""字母"
  7.         "scope""javascript" 
  8.     } 
  • prefix 是觸發(fā)的前綴,可以指定多個
  • body 是插入到編輯器中的內(nèi)容,支持很多語法
  • description 是描述
  • scope 是生效的語言,不指定的話就是所有語言都生效

body 部分就是待插入的代碼,支持很多語法,也是一種 DSL(領域特定語言)。

支持通過1、2 指定光標位置:

  1. "$1  xxxx"
  2. "yyyy $2" 

可以多光標同時編輯:

  1. "$1  xxxx $1" 

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

  1. "${1:aaa}  xxxx"
  2. "yyyy ${2:bbb}" 

可以提供多個值來選擇:

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

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

  1. "當前文件: $TM_FILENAME"
  2. "當前日期: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE" 

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

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

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

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

snippets 有 project、global、language 3 種生效范圍。我個人寫 global 級別的比較多,項目和語言級別的也可以。

基礎過完了,接下來我們就來寫一個 snippets 吧。

實戰(zhàn)案例

我最近在做 vue 的項目,寫 router-link 比較多,所以封裝了個 router-link 代碼的 snippets。

我們先寫個最簡單的版本:

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<router-link to={ name:'xxx', params: {id: 1} } target='_blank'>link</router-link>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

這個沒啥好說的,就是根據(jù)前綴補全內(nèi)容:

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

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<router-link to={ name: $1, params: {id: $2} } target='_blank'>$3</router-link>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

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

然后加上 placeholder:

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } target='_blank'>${3:link}</router-link>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

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

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

  1. ${3| ,target=\"_blank\"|} 

所以 snippets 就變成了這樣:

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

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

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

  1. ${1:$TM_FILENAME} 

現(xiàn)在的 snippets:

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<router-link to={ name: '${1:$TM_FILENAME}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

效果是這樣:

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

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

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

用 js 寫是這樣的:

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

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

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

所以 snippets 就變成了這樣:

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<router-link to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

填入的代碼都是替換好了的:

鏈接的內(nèi)容我們希望用選中的內(nèi)容,這個也有變量,就是 TM_SELECTED_TEXT。

最后,我們希望 router-link 這個標簽也可以變,而且改的時候開閉標簽可以一起改。

這個要用多光標編輯,指定多個 $x 為同一個數(shù)字就行。

  1. <${5:router-link}></${5:router-link}> 

效果就是這樣的:

這就是最終的 snippets,所有 snippets 語法都用了一遍。

完整 snippets 如下,大家可以在 VSCode 里用用看,用起來體驗還是很爽的:

  1.     "routerLink": { 
  2.         "prefix""link"
  3.         "body": [ 
  4.             "<${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}>" 
  5.         ], 
  6.         "description""router-link 跳轉" 
  7.     } 

總結

基本所有主流編輯器都支持 snippets,也就是配置代碼片段來提高開發(fā)效率,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,對于提高開發(fā)效率是很有幫助的。如果沒寫過,不妨從今天開始試一下吧。

 

責任編輯:武曉燕 來源: 神光的編程秘籍
相關推薦

2023-09-07 10:21:03

VS Code 技巧提高開發(fā)效率

2021-09-09 14:34:18

Vscode snippets 項目

2023-11-22 08:26:03

HutoolJava工具集

2023-07-14 10:54:00

Linux命令

2011-03-31 11:15:52

網(wǎng)頁設計Web

2024-03-17 20:01:51

2010-02-26 11:05:04

Linux Mono

2022-09-07 10:30:34

JSON工具

2023-07-13 12:21:18

2020-10-05 21:21:35

命令開發(fā)cherry-pick

2023-05-26 00:06:05

2019-10-15 09:05:07

域插槽組件前端

2023-04-26 01:25:05

案例故障模型

2022-02-09 08:49:37

架構

2021-06-03 09:11:57

UIFigma插件

2015-12-15 09:50:12

Linux開發(fā)效率工具

2022-09-05 14:17:48

Javascript技巧

2022-10-29 08:55:19

頁面react

2011-03-04 10:07:34

Win7SQL Server連接

2020-04-30 09:17:28

數(shù)據(jù)分析電商分析思維
點贊
收藏

51CTO技術棧公眾號