快捷導(dǎo)航

VSCode插件開(kāi)發(fā)全攻略之打包、發(fā)布、升級(jí)的詳細(xì)教程

更新時(shí)間：2020年05月07日 14:15:12 作者：我是小茗同學(xué)

這篇文章主要介紹了VSCode插件開(kāi)發(fā)全攻略之打包、發(fā)布、升級(jí)的教程，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、發(fā)布方式

插件開(kāi)發(fā)完了，如何發(fā)布出去分享給他人呢？主要有3種方法：

方法一：直接把文件夾發(fā)給別人，讓別人找到vscode的插件存放目錄并放進(jìn)去，然后重啟vscode，一般不推薦；
方法二：打包成vsix插件，然后發(fā)送給別人安裝，如果你的插件涉及機(jī)密不方便發(fā)布到應(yīng)用市場(chǎng)，可以嘗試采用這種方式；
方法三：注冊(cè)開(kāi)發(fā)者賬號(hào)，發(fā)布到官網(wǎng)應(yīng)用市場(chǎng)，這個(gè)發(fā)布和npm一樣是不需要審核的。

二、本地打包

無(wú)論是本地打包還是發(fā)布到應(yīng)用市場(chǎng)都需要借助vsce這個(gè)工具。

安裝：

npm i vsce -g

打包成vsix文件：

vsce package

打包的時(shí)候如果沒(méi)有設(shè)置repository會(huì)有提示，所以最好設(shè)置一下。

生成好的vsix文件不能直接拖入安裝，只能從擴(kuò)展的右上角選擇Install from VSIX安裝：

三、發(fā)布應(yīng)用市場(chǎng)

Visual Studio Code的應(yīng)用市場(chǎng)基于微軟自己的Azure DevOps，插件的身份驗(yàn)證、托管和管理都是在這里。

要發(fā)布到應(yīng)用市場(chǎng)首先得有應(yīng)用市場(chǎng)的publisher賬號(hào)；而要有發(fā)布賬號(hào)首先得有Azure DevOps組織；而創(chuàng)建組織之前，首先得創(chuàng)建Azure賬號(hào)；創(chuàng)建Azure賬號(hào)首先得有Microsoft賬號(hào)；

是不是有點(diǎn)暈，梳理一下：

一個(gè)Microsoft賬號(hào)可以創(chuàng)建多個(gè)Azure組織；一個(gè)組織可以創(chuàng)建多個(gè)publisher賬號(hào)；同時(shí)一個(gè)組織可以創(chuàng)建多個(gè)PAT（Personal Access Token，個(gè)人訪問(wèn)令牌）；

注冊(cè)賬號(hào)

首先訪問(wèn) https://login.live.com/ 登錄你的Microsoft賬號(hào)，沒(méi)有的先注冊(cè)一個(gè)：

然后訪問(wèn)： https://aka.ms/SignupAzureDevOps ，如果你從來(lái)沒(méi)有使用過(guò)Azure，那么會(huì)看到如下提示：

點(diǎn)擊繼續(xù)，默認(rèn)會(huì)創(chuàng)建一個(gè)以郵箱前綴為名的組織。

創(chuàng)建令牌

默認(rèn)進(jìn)入組織的主頁(yè)后，點(diǎn)擊右上角的Security：

點(diǎn)擊創(chuàng)建新的個(gè)人訪問(wèn)令牌，這里特別要注意Organization要選擇all accessible organizations，Scopes要選擇Full access，否則后面發(fā)布會(huì)失敗。

創(chuàng)建令牌成功后你需要本地記下來(lái)，因?yàn)榫W(wǎng)站是不會(huì)幫你保存的。

創(chuàng)建發(fā)布賬號(hào)

獲得個(gè)人訪問(wèn)令牌后，使用vsce以下命令創(chuàng)建新的發(fā)布者：

vsce create-publisher your-publisher-name

your-publisher-name必須是字母數(shù)字下劃線，這是全網(wǎng)唯一的賬號(hào)，然后會(huì)依次要求輸入昵稱(chēng)、郵箱、令牌：

創(chuàng)建成功后會(huì)默認(rèn)登錄這個(gè)賬號(hào)，接下來(lái)你可以直接發(fā)布了，當(dāng)然，如果你是在其它地方創(chuàng)建的，可以試用vsce login your-publisher-name來(lái)登錄。

除了用命令之外，你還可以使用網(wǎng)頁(yè)版創(chuàng)建發(fā)布賬號(hào)：https://marketplace.visualstudio.com/manage

發(fā)布

發(fā)布很簡(jiǎn)單：

vsce publish

發(fā)布成功后大概需要過(guò)幾分鐘才能在應(yīng)用市場(chǎng)搜到。過(guò)幾分鐘就可以訪問(wèn)網(wǎng)頁(yè)版的插件主頁(yè)：https://marketplace.visualstudio.com/items?itemName=sxei.vscode-plugin-demo

vscode里面也能搜到了：

發(fā)布注意事項(xiàng)README.md文件默認(rèn)會(huì)顯示在插件主頁(yè)；README.md中的資源必須全部是HTTPS的，如果是HTTP會(huì)發(fā)布失??；CHANGELOG.md會(huì)顯示在變更選項(xiàng)卡；如果代碼是放在git倉(cāng)庫(kù)并且設(shè)置了repository字段，發(fā)布前必須先提交git，否則會(huì)提示Git working directory not clean；

另外，如前面所說(shuō)，如果Organization沒(méi)有選擇all accessible organizations，或者Scopes沒(méi)有選擇Full access，發(fā)布的時(shí)候可能會(huì)報(bào)如下錯(cuò)誤：

Error: Failed Request: Unauthorized(401) - https://marketplace.visualstudio.com/_apis/gallery
Be sure to use a Personal Access Token which has access to **all accessible accounts**.
See https://code.visualstudio.com/docs/tools/vscecli#_common-questions for more information.

3.4.2增量發(fā)布

版本號(hào)：major.minor.patch

如果想讓發(fā)布之后版本號(hào)的patch自增，例如：1.0.2 -> 1.0.3，可以這樣：

vsce publish patch

執(zhí)行這個(gè)命令后會(huì)自動(dòng)修改package.json里面的版本號(hào)。同理，vsce publish minor也是可以的。

3.5取消發(fā)布

vsce unpublish (publisher name).(extension name)

3.6更新

如果修改了插件代碼想要重新發(fā)布，只需要修改版本號(hào)然后重新執(zhí)行vsce publish即可。

4.插件升級(jí)

4.1發(fā)布到了應(yīng)用市場(chǎng)

如果發(fā)布到了應(yīng)用市場(chǎng)，那么一般來(lái)說(shuō)會(huì)自動(dòng)檢測(cè)有沒(méi)有新版本，有的話(huà)會(huì)自動(dòng)無(wú)感知升級(jí)，但具體什么時(shí)候會(huì)去檢測(cè)我還沒(méi)有研究過(guò)，已經(jīng)確定的是在擴(kuò)展面板搜索插件名字會(huì)自動(dòng)檢測(cè)，重啟vscode也會(huì)檢測(cè)。

4.2如果是本地打包

如果是打包成vsix，那么只能自己實(shí)現(xiàn)升級(jí)檢測(cè)功能呢，通過(guò)對(duì)比服務(wù)器上某個(gè)文件的版本號(hào)，具體我就不細(xì)講了。

總結(jié)

到此這篇關(guān)于VSCode插件開(kāi)發(fā)全攻略（十）打包、發(fā)布、升級(jí)的文章就介紹到這了,更多相關(guān)VSCode打包、發(fā)布、升級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: