vscode 代碼片段

有的時(shí)候，我們經(jīng)常輸入的代碼是業(yè)務(wù)強(qiáng)相關(guān)的，語(yǔ)言服務(wù)沒(méi)法做出優(yōu)化；或者是一些我們經(jīng)常使用的定式，比如循環(huán)語(yǔ)句、創(chuàng)建一個(gè)新的類或者一個(gè) UI 控件，我們經(jīng)常寫類似的代碼，只不過(guò)每次都要做細(xì)微的修改。對(duì)于這些代碼，我們可以將它們抽象成模板，保存起來(lái)，等下次要使用的時(shí)候直接調(diào)用即可。

這就是我們今天要講的主題：代碼片段（code snippet）。

代碼片段是對(duì)常用代碼的一個(gè)抽象，它保留了大部分不變的代碼，然后把需要經(jīng)常變動(dòng)的部分，換成變量，這樣等下次調(diào)用它的時(shí)候，只需要把這些變量換成我們需要的就可以了。

上面的這段描述，可能還是太抽象了，下面我們通過(guò)一個(gè)例子來(lái)看看代碼片段究竟長(zhǎng)什么樣，以及是怎么來(lái)使用的。

首先，我們打開命令面板，搜索“配置用戶代碼片段”（Configure User Snippets）并且執(zhí)行。這時(shí)候我們會(huì)看到一個(gè)列表，讓我們選擇語(yǔ)言。這里我們依然選擇 JavaScript 作為我們的示例語(yǔ)言，不用擔(dān)心，代碼都是非常簡(jiǎn)單和易于理解的。

命令面板，搜索“配置用戶代碼片段”并且執(zhí)行

選擇完語(yǔ)言后，我們就能看到一個(gè) JSON 文件被打開了，這個(gè)文件里的內(nèi)容，現(xiàn)在都是被注釋掉的。我們可以選中第七行到第十四行，按下 Cmd+ / 取消注釋。

JavaScript 代碼片段模版

此時(shí)，呈現(xiàn)在我們面前的這個(gè) JSON 文件，就是我們今天要講的主角：代碼片段。

{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}

JavaScript

你已經(jīng)看到了，這個(gè)代碼片段文件，是一個(gè) JSON 文件，它的根對(duì)象下面的所有子節(jié)點(diǎn)都是一個(gè)單獨(dú)的代碼片段，并能夠被我們調(diào)用和插入編輯器。這個(gè)代碼片段對(duì)象的鍵（key）是這個(gè)代碼片段的名字，我們?cè)跁鴮憰r(shí)只要保證這個(gè)名字跟當(dāng)前文件里的其他代碼片段不沖突就可以了。

在上面的例子里，這個(gè)代碼片段的名字叫做 Print to console 。這個(gè)代碼片段對(duì)象的值，也就是花括號(hào)里的代碼，必須要包含 “prefix” 前綴和 “body” 內(nèi)容這兩個(gè)屬性。同時(shí)，這個(gè)值還可以包含 “description” 描述這個(gè)屬性，但這個(gè)屬性不是必須的。

“prefix” 的作用是，當(dāng)我們?cè)诰庉嬈骼锎虺龈?“prefix” 一樣的字符時(shí)，我們就能在建議列表里看到這個(gè)代碼片段的選項(xiàng)，然后我們按下 Tab 鍵，就能夠?qū)⑦@個(gè)代碼片段的 “body” 里面的內(nèi)容插入到編輯器里。如果這個(gè)代碼片段有 “description” 這個(gè)屬性的話，那么我們還能夠在建議列表的快速查看窗口里看到這段 “description”。

比如現(xiàn)在我們可以打開一個(gè) JavaScript 文件（還以之前的一段代碼為例），然后輸入 log，你就能夠在建議列表里看到 Print to console 這個(gè)建議。

輸入 log 即可看到 Print to console 代碼片段

然后再按下回車或者 Tab 鍵，就能夠?qū)⑦@個(gè)代碼片段插入編輯器了。