vscode 代碼片段

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

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

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

上面的這段描述，可能還是太抽象了，下面我們通過一個例子來看看代碼片段究竟長什么樣，以及是怎么來使用的。

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

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

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

JavaScript 代碼片段模版

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

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

JavaScript

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

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

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

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

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

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