學習一下vscode外掛的開發

其實官方文件挺詳細的

Your First Extension | Visual Studio Code Extension API

但是我還是記錄一下自己的實踐過程吧

第一步，建立模板

安裝npm 和 vscode 略

安裝 yo

npm install -g yo generator-code

找個目錄開始搞事

輸入yo code 開始建立外掛模板

這是個命令列互動程式，藍色為選定項，回車確定。我們就要這個typescript開發的外掛

然後他會問你外掛名字，輸入，回車

問了一堆問題，隨便給點啥就行

然後到了 npm 和 yarn這裡，選npm就好，反正隨時可以換yarn

好了，開啟我們生成的模板看看

很明顯這個activate函式就是外掛的啟用入口了，外掛預設註冊了一條命令 helloworld.

第二步，外掛的除錯

直接按F5即可

按下F5之後就會出現一個套娃vscode視窗，在我們原來的外掛vscode視窗中可以下斷點。而這個新的視窗就是包含了外掛的測試外掛功能的vscode例項了。

因為註冊了一個新的command，我們在套娃窗口裡測試一下

輸入命令helloworld，幫助上會顯示 Hello World，多了個空格，這是駝峰法的緣故。執行這條命令

右下角出現了資訊

來，下個斷點試試

照貓畫虎的加一條命令，先在package.json裡配置命令

activationEvents是配置外掛初始化條件的，外掛不會直接初始化，直到滿足某個條件，你可以自己斷點觀察。

即可斷點除錯

程式碼見

ttdialog · lights li/vscodeext - 碼雲 - 開源中國 (gitee.com)