VS code擴充開發詳解
本文展示,如何開發一個VS code擴充(也稱為插件)。
第一步:
在NodeJS環境中安裝必備依賴:
npm install -g yo generator-code vsce
第二步:
在指令行中使用剛剛安裝的全局Node指令yo建立VS code擴充工程:
根據提示,選項或輸入一些資訊:
第三步:
打開VS code工程:
等待之前的操作全部完成,會在項目目錄中看到生成了許多檔案。在VS code中打開該目錄,即打開了該擴充工程:
第四步:
測試VS code擴充。
按下F5啟動調試,會新打開一個VS code視窗。
在此新視窗中,按下ctrl+shift+p,并輸入hello word(本擴充預設名):
在上圖中,看到在右下角彈出一行提示。
這正是此擴充的展示功能:
第五步:
開發一個真正的擴充。
功能:調用JShaman平台接口,實作JS代碼混淆加密。
核心功能:
修改配置檔案,使指令可用:
測試:
運作配置好的指令:
使用效果:
第六步:
釋出。
釋出後即可從vs code軟體的擴充中供全球開發者使用。
首先,進入Azure開發中心:aka.ms/SignupAzureDevOps。
來這裡是需要建立令牌,後面釋出時需要用到。
建立時配置如下(必須如圖,否則無法釋出擴充):
建立成功,得到令牌:
再到marketplace.visualstudio.com/manage建立publisher帳号:
注:在此步驟注冊帳号時,由于visualstudio市場網站故障,帳号未能注冊。:
注:這個錯誤會導緻最後一步釋出擴充時出錯,但有臨時解決辦法,且看後文。
最後是打包&釋出過程:
先在nodejs中安裝vsce:
注:高版本的vsce需要高版本的nodejs,由于本地使用的nodejs是v12版本,是以用了較低版本的vsce。
本地打包:
打包時,需要在package.json中補充publisher鍵值。打包後,生成vsix檔案:
釋出:
注:由于前面的步驟中未能注冊visualstudio市場賬号,這裡釋出不成功。
後續,會再次嘗試去visualstudio新增賬號,網站的故障想必不會持續太久。
既然未能釋出成功。那麼該如何使用此擴充呢?
以前面已經打包生成了vsix檔案。在vs code中手動加載此檔案即可:
安裝成功:
使用:
打開任意js檔案,按下ctrl+shift+p,啟用擴充功能:
使用起來還是非常友善的。