回覆列表
  • 1 # 騰訊技術工程

    vscode 外掛的形態和一個 npm 包非常相似,需要在專案的根目錄新增 package.json,並且在其中增加一些 vscode 獨家的設定。其中最主要的設定是 Activation Events(外掛的啟用時機) 和 contribution points (外掛的能力)。接下來我們主要看看這兩個配置具體是什麼意思。

    宣告外掛的啟用時機 Activation Events

    我將 vscode 的生命週期簡單描述為下圖。下面會做進一步解釋。

    activate() 函式 & deactivate() 函式

    可以看到生命週期中最終要的兩個節點就是activate函式和deactivate函式。這兩個函式需要在外掛 npm 模組的入口檔案 export 出去給 vscode 主動呼叫。

    其中,activate 會在 vscode 認為合適的時機呼叫,並且在外掛的執行週期內只調用一次。因此在 activate 函式中開始啟動外掛的邏輯,是一個非常合適的時機。

    deactivate 函式會在外掛解除安裝之前呼叫,如果你的解除安裝邏輯中存在非同步操作,那麼只需要在deactivate 函式中 retuen 一個 promise 物件,vscode 會在 promise resolve 時才正式將外掛解除安裝掉。

    onXxxx Activation Events

    可以看到在activate函式之前,還有onLanguage等事件的描述,實際上這些就是宣告在外掛 package.json 檔案中的 Activation Events。宣告這些 Activation Events 後,vscode 就會在適當的時機回撥外掛中的 activate函式。vscode之所以這麼設計,是為了節省資源開銷,只在必要的時候才啟用你的外掛。當然,如果你的外掛非常重要,不希望在某個事件之後才被啟用,你可以宣告Activation Events為*這樣 vscode 就會在啟動的時候就開始回撥 activate函式。

    外掛的具體邏輯

    外掛中的具體邏輯 vscode 沒有做任何限制,你可以透過呼叫vscdoe提供的各種 api 對其進行擴充。不過需要注意的是,出於效能和移植性考慮,vscode不允許開發者直接操作dom。

    關於vscode 的 api 可以參考

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

    舉個例子

    接下來我們來看幾個外掛的 Activation Events 宣告

    超越鼓勵師 申明瞭 onCommand:ycy.showReminderView 和 * ,其實我們都知道只聲明後一個就足夠了

    vuter 申明瞭 onLanguage:vue 所以他會在使用者開啟 vue 語言檔案時被啟用

    vscode-icons 是一個純主題外掛,宣告的是 *

    GitLens 需要覆蓋所有的檔案,並且在vscode啟動時就需要啟用,他的宣告是 *

    關於 Activation Events 的說明可以參考官方文件 https://code.visualstudio.com/api/references/activation-events

    宣告外掛的貢獻點 contribution points

    需要在 package.json 中宣告的另一個重要欄位就是 contribution points。 contribution points描述了當前外掛支援哪些能力,以及對應能力的配置。

    由於 vscode 禁止直接操作dom,往 UI 中插入功能的正確方式是宣告貢獻點。下圖列出了 vscode 支援的所有貢獻點。

    [ 目前 vscode 支援的貢獻點 ]

    舉個例子

    接下來我們來看幾個外掛的 contribution points 宣告

    超越鼓勵師 支援透過 commands 觸發楊超越的提醒,同時可以配置提醒出現的時機,因此包括 commands / configuration

    vuter 主要為 vue 檔案提供語言支援,可以看到他提供的 contribution points 比較廣,包括 commands / breakpoints / languages / grammars / configuration

    vscode-icons 已支援主題為主,他提供了 iconThemes / commands / configuration

    GitLens 是對vscode git 功能的增強,所以他的插入點集中在 UI 上的能力 configuration / commands / menus /resourceLabelFormatters / viewsContainers / views

    關於 contribution points 的更多說明可以參考 https://code.visualstudio.com/api/references/contribution-points

    程式語言支援

    那麼,要怎麼給 vscode 增加一門新的程式語言支援呢?

    就像之前說的,vscode 主要支援兩類程式語言支援: 宣告類語言特性主要描述了程式碼高亮、程式碼片段等輕量級需要實時給出響應的語言特性支援;而程式類語言特性只要提供更加高階的跳到定義、查詢引用、hover提示等對實時性要求不高,而且需要大量計算的語言能力。因此前者更加適合在 IDE 的主執行緒進行處理,而後者可以考慮拆分到其他執行緒甚至服務中進行計算。

    宣告類語言特性(基本支援)

    下面主要以語法高亮為例子介紹宣告式語言支援。

    [ 從手寫 paser 到 TextMate ]

    在最初,微軟的工程師們為web開發中常見的開發語言都手寫了 paser。這類 paser 執行效率很高,但對開發者的能力要求也比較高,不太適合未來的外掛擴充套件。從 vscode 1.8 版本開始,微軟引入了 TextMate 的高亮語法,並逐步將原有的手寫 paser 切換到這種語法上。

    [ TextMate 官網 ]

    TextMate 本身是 mac 下的一個文字編輯器,vscode 借用了他對語言高亮文字的定義方式。TextMate語法的本質是用一個 json 檔案來描述語言中的 token 和結構,當然為了方便,也可以改用 YAML 並編譯成json。

    順便一提,而 TextMate 語法使用的是 oniguruma 庫來解析正則表示式,oniguruma 中支援一些 js 引擎目前還不支援的正則特性,因此在 vscode 中使用了一個 oniguruma 的 c++ 模組來加速正則表示式解析速度。

    另外,為了方便開發者編寫語法高亮外掛,vscode還提供了一個 yomen 模板用於生成外掛基本目錄結構,以及一個名為 inspectTMScopes 的偵錯程式檢視詞法分析的結果。

    [ vscode 提供的 yomen 模板 ]

    [ inspectTMScopes ]

    除了語法高亮外,vscode還支援這些特性:註釋切換、括號定義、自動閉合、Auto surrounding、程式碼摺疊、word Pattern、縮排規則等,詳見

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

  • 中秋節和大豐收的關聯?
  • 《拳皇》遊戲當中的天狗是誰?為什麼說他是格鬥遊戲必殺技的始祖?