利用 Vscode snippets 和項(xiàng)目成員一起提高開(kāi)發(fā)效率
code snippets 是代碼片段的意思，是 vscode 提供的根據(jù)某字符串快速補(bǔ)全一段代碼的功能，可以提高寫(xiě)代碼的效率。
vscode 的 snippets 是可以隨項(xiàng)目共享的，多人開(kāi)發(fā)一個(gè)項(xiàng)目的時(shí)候，可以維護(hù)項(xiàng)目級(jí)別的 snippets 并且通過(guò) git 共享，來(lái)提高項(xiàng)目開(kāi)發(fā)效率。
下面我們來(lái)詳細(xì)了解下 snippets。
snippets 的功能
snippets 配置的格式如下：
- {
- "For Loop": {
- "prefix": ["for", "for-const"],
- "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
- "description": "A for loop."
- }
- }
- prefix 是觸發(fā) snippets 的前綴，可以通過(guò)數(shù)組指定多個(gè)
- body 是填入到編輯器的內(nèi)容
- description 是 snippets 的描述
其中 body 部分可以通過(guò) ${} 的方式指定光標(biāo)位置、順序、占位字符串、可用的值等，有 5 種語(yǔ)法，我們分別來(lái)看一下：
光標(biāo)跳轉(zhuǎn)：$1 $2
可以通過(guò) $1、$2 指定光標(biāo)位置，當(dāng)填入 snippets 的內(nèi)容之后，光標(biāo)會(huì)設(shè)置到 $1 的位置來(lái)編輯，當(dāng)編輯完，可以通過(guò) tab 來(lái)跳到 $2。
比如這段配置：
- {
- "測(cè)試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "$1 xxxx",
- "yyyy $2",
- ],
- "description": "光標(biāo)跳轉(zhuǎn)"
- }
- }
效果為：
還有當(dāng)有多個(gè) $1、$2 等，編輯一處其他內(nèi)容也會(huì)同步修改，也就是 vscode 的多光標(biāo)編輯。
比如：
- {
- "測(cè)試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "$1 xxxx $1",
- ],
- "description": "多光標(biāo)"
- }
- }
效果為：
通過(guò)這種功能可以快速編輯 snippets 中的可編輯內(nèi)容。
占位符：${1: placeholder}
只是光標(biāo)跳轉(zhuǎn)雖然可以快速編輯內(nèi)容，但是不知道編輯的部分是什么，所以 snippets 支持了設(shè)置 placeholder 的值，默認(rèn)會(huì)選中該段文本，輸入內(nèi)容即可覆蓋。
比如：
- {
- "測(cè)試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "${1:aaa} xxxx",
- "yyyy ${2:bbb}",
- ],
- "description": "光標(biāo)跳轉(zhuǎn)"
- }
- }
效果為：
可選值：${1|text1,text2,text3|}
占位符的方式就像 input 標(biāo)簽加了個(gè) placeholder 屬性，還是要手動(dòng)輸入，當(dāng)可編輯區(qū)域是有幾個(gè)可選的值的話，就要換成下拉選擇，在 snippets 里就是通過(guò):
${1|text1,text2,text3|} 的方式支持，在 | 和 | 之間填入通過(guò) , 分割的多個(gè)選項(xiàng)。
比如：
- {
- "測(cè)試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "${1|神說(shuō)要有光,卡頌|}"
- ],
- "description": "可選值"
- }
- }
效果為：
變量：$變量名
在模版可編輯位置填入內(nèi)容的時(shí)候，有的時(shí)候需要用到選中的值、剪貼板的值、文件名、日期等，這些信息通過(guò) snippets 中支持的變量來(lái)取。
比如：
- TM_FILENAME: 文件名
- TM_CURRENT_LINE: 當(dāng)前行的內(nèi)容
- CLIPBOARD: 剪貼板內(nèi)容
- WORKSPACE_NAME：workspace 的名字
- WORKSPACE_PATH：workspace 的路徑
- CURRENT_YEAR：當(dāng)前年
- CURRENT_MONTH：當(dāng)前月
- CURRENT_DATE：當(dāng)前日
- RANDOM: 隨機(jī)數(shù)
- RANDOM_HEX: 6 位隨機(jī) 16 進(jìn)制數(shù)
- UUID: 唯一 id
可以取這些變量的值來(lái)填入到光標(biāo)位置，方式就是使用 $TM_FILENAME、$CURRENT_YEAR 的方式。
比如：
- {
- "測(cè)試": {
- "scope": "javascript,typescript",
- "prefix": "test",
- "body": [
- "當(dāng)前文件： $TM_FILENAME",
- "當(dāng)前日期： $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"
- ],
- "description": "變量"
- }
- }
效果為：
變量轉(zhuǎn)換：${變量名/匹配的正則/替換到的字符串/匹配模式}
支持了變量的填入還不行，因?yàn)橛械淖兞康膬?nèi)容不合適，需要做一些字符串替換，所以 snippets 只吃了 transform 的功能。
比如 abc-123.js 的文件，
我們通過(guò) $TM_FILENAME 取到文件名，然后把后綴去掉轉(zhuǎn)成大寫(xiě)填入
- ${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}
對(duì)文件名 TM_FILENAME 做正則匹配 (.*).[a-z]+，把分組一變成大寫(xiě)之后返回，匹配模式為忽略大小寫(xiě)(ignore)。
- {
- "填入文件名": {
- "scope": "javascript,typescript",
- "prefix": "filename",
- "body": [
- "${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
- ],
- "description": "文件名"
- }
- }
我們實(shí)驗(yàn)下效果：
可以看到，正確的取到了文件名，并且去掉后綴轉(zhuǎn)成大寫(xiě)填入了。
知道了 snippets 的功能，那么怎么設(shè)置 snippets 呢?snippets 在什么范圍內(nèi)生效呢?
snippets 的范圍
command + shift + p 打開(kāi)命令面板，輸入 snippet，選擇 configure user snippets：
可以選擇創(chuàng)建全局的、項(xiàng)目范圍的、語(yǔ)言范圍的 snippets：
分別會(huì)打開(kāi)不同位置的文件來(lái)添加 snippets。
語(yǔ)言級(jí)別的 snippets 是對(duì)于特定語(yǔ)言才生效，這個(gè)還可以封裝成插件。在插件的 package.json 中配置下即可：
- {
- "contributes": {
- "snippets": [
- {
- "language": "javascript",
- "path": "./snippets.json"
- }
- ]
- }
- }
項(xiàng)目范圍的 snippets 是在項(xiàng)目根目錄的 .vscode/xxx.code-snippets 下面添加的，vscode 啟動(dòng)的時(shí)候會(huì)讀取這些文件，然后使之在項(xiàng)目范圍內(nèi)生效。
當(dāng)有一些項(xiàng)目級(jí)別的代碼片段可以共享的時(shí)候，完全把這個(gè)文件提交到遠(yuǎn)程 git 倉(cāng)庫(kù)，然后項(xiàng)目成員都可以共享這些 snippets 設(shè)置。對(duì)于一些模版代碼比較多的項(xiàng)目，還是比較有意義的。
總結(jié)
snippets 是 vscode 提供的用于提高開(kāi)發(fā)效率的一些快速輸入代碼片段的功能，支持光標(biāo)位置的跳轉(zhuǎn)、多光標(biāo)同時(shí)編輯、占位符、可選值、變量、變量轉(zhuǎn)換等功能，靈活運(yùn)用這些功能，可以作出易用的提高開(kāi)發(fā)效率的 snippets。
snippets 有 global、language、project 3 種生效范圍：global 是全局的設(shè)置;language 是語(yǔ)言級(jí)別的設(shè)置，可以進(jìn)一步封裝成插件共享;project 則是項(xiàng)目范圍內(nèi)的，在 .vscode 下的 xx.code-snippets 中，完全可以提交到 git 倉(cāng)庫(kù)，和其他成員共享。
靈活運(yùn)用 snippets 功能，是可以提高開(kāi)發(fā)效率的，而且這個(gè)也是可以項(xiàng)目級(jí)別共享的。希望這篇文章能夠幫大家了解 snippets。
【編輯推薦】
