本文作者：cheeqi，騰訊 PCG 開(kāi)發(fā)工程師。

這是一篇干貨滿(mǎn)滿(mǎn)的介紹 vscode 插件開(kāi)發(fā)的文章，先收藏在觀看效果更佳。

vscode 提供了哪些開(kāi)放能力？

從 vscode 的官網(wǎng)中我們可以看到，vscode 主要提供了六類(lèi)開(kāi)放能力：通用能力、主題、聲明類(lèi)語(yǔ)言特性（我把它稱(chēng)為基礎(chǔ)支持）、程序類(lèi)語(yǔ)言特性（高級(jí)支持）、工作區(qū)UI擴(kuò)展、調(diào)試。

我們開(kāi)發(fā) vscode 插件，實(shí)際上就是在通過(guò)這些能力對(duì) vscode 進(jìn)行擴(kuò)展。

這六類(lèi)能力具體包括的功能和使用場(chǎng)景可以看下圖。

vscode 提供的六類(lèi)基本能力

如何編寫(xiě)一個(gè) vscode 插件呢？

vscode 插件的形態(tài)和一個(gè) npm 包非常相似，需要在項(xiàng)目的根目錄添加 package.json，并且在其中增加一些 vscode 獨(dú)家的設(shè)置。其中最主要的設(shè)置是 Activation Events(插件的激活時(shí)機(jī)) 和 contribution points (插件的能力)。接下來(lái)我們主要看看這兩個(gè)配置具體是什么意思。

聲明插件的激活時(shí)機(jī) Activation Events

我將 vscode 的生命周期簡(jiǎn)單描述為下圖。下面會(huì)做進(jìn)一步解釋。

vscode 插件生命周期（轉(zhuǎn)載請(qǐng)注明作者 cheeqi）

activate() 函數(shù) & deactivate() 函數(shù)

可以看到生命周期中最終要的兩個(gè)節(jié)點(diǎn)就是activate函數(shù)和deactivate函數(shù)。這兩個(gè)函數(shù)需要在插件 npm 模塊的入口文件 export 出去給 vscode 主動(dòng)調(diào)用。

其中，activate 會(huì)在 vscode 認(rèn)為合適的時(shí)機(jī)調(diào)用，并且在插件的運(yùn)行周期內(nèi)只調(diào)用一次。因此在 activate 函數(shù)中開(kāi)始啟動(dòng)插件的邏輯，是一個(gè)非常合適的時(shí)機(jī)。

deactivate 函數(shù)會(huì)在插件卸載之前調(diào)用，如果你的卸載邏輯中存在異步操作，那么只需要在deactivate 函數(shù)中 retuen 一個(gè) promise 對(duì)象，vscode 會(huì)在 promise resolve 時(shí)才正式將插件卸載掉。

onXxxx Activation Events

可以看到在activate函數(shù)之前，還有onLanguage等事件的描述，實(shí)際上這些就是聲明在插件 package.json 文件中的 Activation Events。聲明這些 Activation Events 后，vscode 就會(huì)在適當(dāng)?shù)臅r(shí)機(jī)回調(diào)插件中的 activate函數(shù)。vscode之所以這么設(shè)計(jì)，是為了節(jié)省資源開(kāi)銷(xiāo)，只在必要的時(shí)候才激活你的插件。當(dāng)然，如果你的插件非常重要，不希望在某個(gè)事件之后才被激活，你可以聲明Activation Events為*這樣 vscode 就會(huì)在啟動(dòng)的時(shí)候就開(kāi)始回調(diào) activate函數(shù)

插件的具體邏輯

插件中的具體邏輯 vscode 沒(méi)有做任何限制，你可以通過(guò)調(diào)用vscdoe提供的各種 api 對(duì)其進(jìn)行擴(kuò)充。不過(guò)需要注意的是，出于性能和移植性考慮，vscode不允許開(kāi)發(fā)者直接操作dom。

https://code.visualstudio.com/api/references/vscode-api 這是微軟根據(jù) vscode 的 d.ts 文件生成的文檔

舉個(gè)例子

接下來(lái)我們來(lái)看幾個(gè)插件的 Activation Events 聲明

• 超越鼓勵(lì)師 申明了兩個(gè)參數(shù)：

  onCommand:ycy.showReminderView 和 * ，其實(shí)我們都知道只聲明后一個(gè)就足夠了

• vuter 申明了 onLanguage:vue 所以他會(huì)在用戶(hù)打開(kāi) vue 語(yǔ)言文件時(shí)被激活

• vscode-icons 是一個(gè)純主題插件，聲明的是 *

• GitLens 需要覆蓋所有的文件，并且在vscode啟動(dòng)時(shí)就需要激活，他的聲明是 *

關(guān)于 Activation Events 的說(shuō)明可以參考官方文檔：

https://code.visualstudio.com/api/references/activation-events

聲明插件的貢獻(xiàn)點(diǎn) contribution points

需要在 package.json 中聲明的另一個(gè)重要字段就是 contribution points。contribution points描述了當(dāng)前插件支持哪些能力，以及對(duì)應(yīng)能力的配置。

由于 vscode 禁止直接操作dom，往 UI 中插入功能的正確方式是聲明貢獻(xiàn)點(diǎn)。下圖列出了 vscode 支持的所有貢獻(xiàn)點(diǎn)。

目前 vscode 支持的貢獻(xiàn)點(diǎn)

舉個(gè)例子

接下來(lái)我們來(lái)看幾個(gè)插件的 contribution points 聲明

• 超越鼓勵(lì)師 支持通過(guò) commands 觸發(fā)楊超越的提醒，同時(shí)可以配置提醒出現(xiàn)的時(shí)機(jī)，因此包括 commands / configuration

• vuter 主要為 vue 文件提供語(yǔ)言支持，可以看到他提供的 contribution points 比較廣，包括 commands / breakpoints / languages / grammars / configuration

• vscode-icons 已支持主題為主，他提供了 iconThemes / commands / configuration

• GitLens 是對(duì)vscode git 功能的增強(qiáng)，所以他的插入點(diǎn)集中在 UI 上的能力 configuration / commands / menus /resourceLabelFormatters / viewsContainers / views

關(guān)于 contribution points 的更多說(shuō)明可以參考：

https://code.visualstudio.com/api/references/contribution-points

編程語(yǔ)言支持

那么，要怎么給 vscode 增加一門(mén)新的編程語(yǔ)言支持呢？聲明類(lèi)語(yǔ)言特性主要描述了代碼高亮、代碼片段等輕量級(jí)需要實(shí)時(shí)給出響應(yīng)的語(yǔ)言特性支持；而程序類(lèi)語(yǔ)言特性只要提供更加高級(jí)的跳到定義、查找引用、hover提示等對(duì)實(shí)時(shí)性要求不高，而且需要大量計(jì)算的語(yǔ)言能力。因此前者更加適合在 IDE 的主線程進(jìn)行處理，而后者可以考慮拆分到其他線程甚至服務(wù)中進(jìn)行計(jì)算。

聲明類(lèi)語(yǔ)言特性（基本支持）

下面主要以語(yǔ)法高亮為例子介紹聲明式語(yǔ)言支持。

從手寫(xiě) paser 到 TextMate

在最初，微軟的工程師們?yōu)閣eb開(kāi)發(fā)中常見(jiàn)的開(kāi)發(fā)語(yǔ)言都手寫(xiě)了 paser。這類(lèi) paser 執(zhí)行效率很高，但對(duì)開(kāi)發(fā)者的能力要求也比較高，不太適合未來(lái)的插件擴(kuò)展。從 vscode 1.8 版本開(kāi)始，微軟引入了 TextMate 的高亮語(yǔ)法，并逐步將原有的手寫(xiě) paser 切換到這種語(yǔ)法上。

TextMate 官網(wǎng)

TextMate 本身是 mac 下的一個(gè)文本編輯器，vscode 借用了他對(duì)語(yǔ)言高亮文本的定義方式。TextMate語(yǔ)法的本質(zhì)是用一個(gè) json 文件來(lái)描述語(yǔ)言中的 token 和結(jié)構(gòu)，當(dāng)然為了方便，也可以改用 YAML 并編譯成json。

順便一提，而 TextMate 語(yǔ)法使用的是 oniguruma 庫(kù)來(lái)解析正則表達(dá)式，oniguruma 中支持一些 js 引擎目前還不支持的正則特性，因此在 vscode 中使用了一個(gè) oniguruma 的 c++ 模塊來(lái)加速正則表達(dá)式解析速度。

另外，為了方便開(kāi)發(fā)者編寫(xiě)語(yǔ)法高亮插件，vscode還提供了一個(gè) yomen 模板用于生成插件基本目錄結(jié)構(gòu)，以及一個(gè)名為 inspectTMScopes 的調(diào)試器查看詞法分析的結(jié)果。

vscode 提供的 yomen 模板
inspectTMScopes

除了語(yǔ)法高亮外，vscode還支持這些特性：注釋切換、括號(hào)定義、自動(dòng)閉合、Auto surrounding、代碼折疊、word Pattern、縮進(jìn)規(guī)則等，詳見(jiàn) https://code.visualstudio.com/api/language-extensions/language-configuration-guide

程序類(lèi)語(yǔ)言特性（高級(jí)能力）

對(duì)于高級(jí)的語(yǔ)言能力支持，vscode 提供了兩種方式：

兩種擴(kuò)展方案的能力存在一一對(duì)應(yīng)關(guān)系

這兩種方式提供的能力是完全相同的，而微軟主推方案二，因此下面主要對(duì)方案二展開(kāi)介紹。

language server protocol（LSP）

首先 language server 是一種跨編輯器的語(yǔ)言支持實(shí)現(xiàn)規(guī)范。它由微軟提出，目前 vscode 、vim、atom 都已經(jīng)支持了這個(gè)規(guī)范。

使用LSP前后的區(qū)別

在過(guò)去，每個(gè)IDE遇到一門(mén)全新的語(yǔ)言，往往都需要重新實(shí)現(xiàn)一次基本功能，對(duì)于流行的語(yǔ)言來(lái)說(shuō)還好，因?yàn)?IDE 廠商都有動(dòng)力提供支持。然后對(duì)于一門(mén)全新的語(yǔ)言，往往需要語(yǔ)言的發(fā)明人自己實(shí)現(xiàn)各種 IDE 的語(yǔ)言支持。由于各個(gè)IDE的接口不同，需要將語(yǔ)言支持在各個(gè)IDE中重新移植一遍。

有了 LSP 規(guī)范后，語(yǔ)言支持插件開(kāi)發(fā)者只需要編寫(xiě)一次，就可以很快地在 IDE 之間移植代碼。

LSP 實(shí)現(xiàn)細(xì)節(jié)

實(shí)現(xiàn)一個(gè)LSP，只需要在后臺(tái)開(kāi)啟一個(gè)接受LSP請(qǐng)求的 server，并實(shí)現(xiàn) LSP 規(guī)范中的接口（往往是通過(guò) JSON RPC進(jìn)行調(diào)用的）即可。

關(guān)于 LSP 可以從這兩篇文檔中找到更加詳細(xì)的介紹

• LSP的官網(wǎng)：

  https://microsoft.github.io/language-server-protocol/

• vscode中關(guān)于LSP插件的文檔：

  https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

至此，我們對(duì) vscode 插件中的主要知識(shí)點(diǎn)進(jìn)行了學(xué)習(xí)，相信看到這里的小伙伴已經(jīng)收獲滿(mǎn)滿(mǎn)了吧~

還不過(guò)癮？

出門(mén)左轉(zhuǎn)vscode插件開(kāi)發(fā)官方文檔吧~

https://code.visualstudio.com/api

都看到這了，不點(diǎn)個(gè)贊再走么？

總結(jié)

以上是生活随笔為你收集整理的开发一个爆款 VS Code 插件这么简单！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。