天天看點

VS code插件開發詳解

VS code擴充開發詳解

本文展示,如何開發一個VS code擴充(也稱為插件)。

第一步:

在NodeJS環境中安裝必備依賴:

npm install -g yo generator-code vsce

VS code插件開發詳解

第二步:

在指令行中使用剛剛安裝的全局Node指令yo建立VS code擴充工程:

VS code插件開發詳解

根據提示,選項或輸入一些資訊:

VS code插件開發詳解

第三步:

打開VS code工程:

等待之前的操作全部完成,會在項目目錄中看到生成了許多檔案。在VS code中打開該目錄,即打開了該擴充工程:

VS code插件開發詳解

第四步:

測試VS code擴充。

按下F5啟動調試,會新打開一個VS code視窗。

在此新視窗中,按下ctrl+shift+p,并輸入hello word(本擴充預設名):

VS code插件開發詳解

在上圖中,看到在右下角彈出一行提示。

這正是此擴充的展示功能:

VS code插件開發詳解

第五步:

開發一個真正的擴充。

功能:調用JShaman平台接口,實作JS代碼混淆加密。

核心功能:

VS code插件開發詳解

修改配置檔案,使指令可用:

VS code插件開發詳解

測試:

運作配置好的指令:

VS code插件開發詳解

使用效果:

VS code插件開發詳解

第六步:

釋出。

釋出後即可從vs code軟體的擴充中供全球開發者使用。

首先,進入Azure開發中心:aka.ms/SignupAzureDevOps。

VS code插件開發詳解

來這裡是需要建立令牌,後面釋出時需要用到。

建立時配置如下(必須如圖,否則無法釋出擴充):

VS code插件開發詳解

建立成功,得到令牌:

VS code插件開發詳解

再到marketplace.visualstudio.com/manage建立publisher帳号:

VS code插件開發詳解

注:在此步驟注冊帳号時,由于visualstudio市場網站故障,帳号未能注冊。:

VS code插件開發詳解

注:這個錯誤會導緻最後一步釋出擴充時出錯,但有臨時解決辦法,且看後文。

最後是打包&釋出過程:

先在nodejs中安裝vsce:

VS code插件開發詳解

注:高版本的vsce需要高版本的nodejs,由于本地使用的nodejs是v12版本,是以用了較低版本的vsce。

本地打包:

VS code插件開發詳解

打包時,需要在package.json中補充publisher鍵值。打包後,生成vsix檔案:

VS code插件開發詳解

釋出:

VS code插件開發詳解

注:由于前面的步驟中未能注冊visualstudio市場賬号,這裡釋出不成功。

後續,會再次嘗試去visualstudio新增賬號,網站的故障想必不會持續太久。

既然未能釋出成功。那麼該如何使用此擴充呢?

以前面已經打包生成了vsix檔案。在vs code中手動加載此檔案即可:

VS code插件開發詳解
VS code插件開發詳解

安裝成功:

VS code插件開發詳解

使用:

打開任意js檔案,按下ctrl+shift+p,啟用擴充功能:

VS code插件開發詳解

使用起來還是非常友善的。

繼續閱讀