當(dāng)我們?cè)诒镜亻_(kāi)發(fā)并調(diào)試好 vscode 插件后，下一步就得支持能從 vscode 插件市場(chǎng)中安裝并使用插件了。下面我們就從產(chǎn)品研發(fā)流程中的“轉(zhuǎn)測(cè)”和“上線(xiàn)”兩個(gè)階段來(lái)簡(jiǎn)單聊聊插件的交付流程。在這之前，我們先來(lái)做一些準(zhǔn)備工作吧。

準(zhǔn)備工作

vsce 安裝

正如我們會(huì)使用 npm 作為 node 的包管理工具一樣，vscode 同樣也需要 vsce 作為插件的管理工具，它可以用來(lái)構(gòu)建插件的安裝包、發(fā)布或刪除插件等。你可以使用下方命令進(jìn)行安裝：

npm install -g @vscode/vsce

創(chuàng)建 Azure DevOps 組織

vscode 使用 Azure DevOps 為所有的插件提供身份驗(yàn)證、托管和管理等服務(wù)，因此你需要先創(chuàng)建 Azure DevOps 組織才能繼續(xù)后面的操作。開(kāi)發(fā)公司項(xiàng)目的話(huà)，最好是注冊(cè)一個(gè)團(tuán)隊(duì)賬號(hào)，創(chuàng)建的組織名也最好是和團(tuán)隊(duì)名、部門(mén)名或產(chǎn)品名等掛鉤，但盡量別帶“個(gè)人”標(biāo)識(shí)上去。

創(chuàng)建個(gè)人 token

有了組織，便可以在這個(gè)組織下創(chuàng)建一些個(gè)人 token，這些 token 將被用于構(gòu)建或發(fā)布插件等操作時(shí)的身份驗(yàn)證。創(chuàng)建 token 的步驟如下：

1. 進(jìn)入你創(chuàng)建的組織的首頁(yè)（例如 https://dev.azure.com/vscode），點(diǎn)擊右上角用戶(hù)設(shè)置后，在下拉菜單中選擇 Personal access tokens，如圖示：

2. 在 Personal Access Tokens 頁(yè)面，點(diǎn)擊右上角的 New Token 按鈕，如圖示：

3. 在創(chuàng)建 token 的彈窗內(nèi)，完善下這些信息：

   a. 名稱(chēng)：最好能語(yǔ)義化一點(diǎn)，能看出來(lái)這個(gè) token 是給誰(shuí)在哪個(gè)插件用的。
   b. 組織：可以選擇這個(gè) token 適用于哪個(gè)組織，或選擇 All accessible organizations 以適用于該賬號(hào)下的所有組織。這里我選擇了剛創(chuàng)建的組織。
   c. 有效期：默認(rèn)三十天，你可以根據(jù)情況自定義。但過(guò)期了也沒(méi)事，重新創(chuàng)建即可。
   d. 授權(quán)范圍：在選擇了 Custom defined 后，點(diǎn)擊下方的 Show all scopes，然后找到 Marketplace，選擇 Manage 選項(xiàng)。

填寫(xiě)好以上信息后，點(diǎn)擊左下角的 Create 按鈕即可，如圖示：

4. 創(chuàng)建 token 成功后會(huì)顯示如下彈窗，該 token 只會(huì)顯示一次，你可以復(fù)制并保存下來(lái)：

以上便是創(chuàng)建 token 的所有步驟，你可以創(chuàng)建多個(gè) token 用于不同機(jī)器或團(tuán)隊(duì)協(xié)作時(shí)分給多人各自使用。

創(chuàng)建 publisher

一開(kāi)始我理解的 publisher 就是插件的發(fā)布人，所以我還以為同一個(gè)插件可以創(chuàng)建多個(gè) publisher?，F(xiàn)在看起來(lái) publisher 更像是插件的“發(fā)布方”，也因此一個(gè) publisher 是可以對(duì)應(yīng)有多個(gè)插件的，但同一個(gè)插件卻只能有一個(gè) publisher。創(chuàng)建 publisher 的步驟比較簡(jiǎn)單，具體如下：

1. 進(jìn)入 publisher 管理頁(yè)面（如需登錄，使用你在前面創(chuàng)建的 Azure DevOps 賬戶(hù)即可）。

2. 點(diǎn)擊頁(yè)面左側(cè)的 Create publisher 。

3. 進(jìn)入創(chuàng)建頁(yè)面后，重點(diǎn)完善下 Name 和 ID 兩個(gè)信息即可，其它信息根據(jù)需要填寫(xiě)或保持默認(rèn)也行。

   a. Name：公司項(xiàng)目的話(huà)，建議名稱(chēng)最好是產(chǎn)品品牌名、部門(mén)名或公司名，但盡量別帶有任何“個(gè)人”標(biāo)識(shí)。名稱(chēng)是可以編輯的，后面覺(jué)得不合適了也可以改。
   b. ID：ID 最好能和你填寫(xiě)的名稱(chēng)關(guān)聯(lián)起來(lái)，比如你填寫(xiě)的名稱(chēng)是你的公司名“Netease”，那 ID 就可以填寫(xiě)為“netease”。ID 是不能修改的，所以填寫(xiě)時(shí)一定要考慮清楚。此外，無(wú)論是 ID 還是名稱(chēng)，在整個(gè)插件市場(chǎng)都是具有唯一性的，所以當(dāng)你們公司或部門(mén)有多個(gè)插件時(shí)，推薦也是共用同一個(gè) publisher。

定義好的 publisher Name 和 ID，會(huì)用于圖中所示位置：

4. 填寫(xiě)完信息后，點(diǎn)擊左下方的 Create 按鈕即可。

5. publisher 創(chuàng)建成功后，你需要在終端執(zhí)行下命令：vsce login <publisher id>。執(zhí)行時(shí)，請(qǐng)將其中的 <publisher id> 替換為你在第三步中填寫(xiě)的 ID。執(zhí)行后，會(huì)提示你輸入個(gè)人 token，這里輸入下你之前創(chuàng)建并保存的 token 即可。驗(yàn)證通過(guò)后，你才能執(zhí)行 vsce 的一些其他命令。

完善 package.json

1. 添加 publisher 字段，它對(duì)應(yīng)的是上面創(chuàng)建的 publisher ID。
2. 添加 repository 字段，它對(duì)應(yīng)的是插件的代碼倉(cāng)庫(kù)地址，這個(gè)字段可選，不填的話(huà)，構(gòu)建安裝包時(shí)會(huì)有確認(rèn)提示。
3. 添加 icon 字段，它對(duì)應(yīng)的是插件的 logo 地址，這里填寫(xiě) logo 的相對(duì)路徑即可，例如："media/icon/logo.png"，logo 推薦使用 128x128px 的 png 圖片。（logo 顯示見(jiàn) 創(chuàng)建 publisher 圖示）

轉(zhuǎn)測(cè)

有了前面的準(zhǔn)備工作，轉(zhuǎn)測(cè)將變得非常簡(jiǎn)單。你只需在插件工程的根目錄下執(zhí)行 vsce package 命令，便會(huì)在根目錄下生成一個(gè) .vsix 文件，這便是插件的安裝包。將它提供給測(cè)試同學(xué)后，按照以下步驟即可安裝使用：

1. 打開(kāi)插件面板。
2. 點(diǎn)擊右上方的 "Views and More Actions..." 圖標(biāo)。
3. 選擇 "Install from VSIX..." 后，即可安裝本地的 .vsix 文件，重啟窗口后便可使用安裝好的插件。

如圖示：

上線(xiàn)

當(dāng)測(cè)試通過(guò)的插件需要上線(xiàn)時(shí)，個(gè)人建議還是先進(jìn)行預(yù)發(fā)布，這時(shí)測(cè)試同學(xué)可以先在插件市場(chǎng)中搜索安裝插件的 pre-release 版本，當(dāng) pre-release 版本回歸測(cè)試完成后，再發(fā)布正式版即可。無(wú)論是預(yù)發(fā)布還是發(fā)布，你都可以在 publisher 管理頁(yè)面查看當(dāng)前插件的發(fā)布進(jìn)度。

預(yù)發(fā)布

1. 更新 package.json 中的版本號(hào)。
2. 插件根目錄下執(zhí)行 vsce publish --pre-release。

發(fā)布

1. 更新 package.json 中的版本號(hào)。
2. 更新 CHANGELOG.md 。
3. 插件根目錄下執(zhí)行 vsce publish。

常見(jiàn)問(wèn)題

使用 pnpm 作為插件的依賴(lài)管理工具時(shí)，發(fā)布插件為什么會(huì)失??？

這是因?yàn)楫?dāng)前的 vsce 實(shí)現(xiàn)中，僅支持了 npm 和 yarn v1 作為插件依賴(lài)的管理工具，當(dāng)你使用它倆時(shí)，直接按照上文中的命令執(zhí)行就好。而使用 pnpm 時(shí)，你需要先使用 webpack 或 esbuild 等構(gòu)建插件代碼，之后在執(zhí)行 vsce 命令時(shí)，添加 --no-dependencies 選項(xiàng)即可，類(lèi)似：pnpm vsce publish --no-dependencies 。

總結(jié)

發(fā)布插件的細(xì)節(jié)還有很多，本篇僅針對(duì)“交付”插件會(huì)涉及到的相關(guān)點(diǎn)做了簡(jiǎn)單介紹，其它有關(guān)插件管理的詳細(xì)內(nèi)容、常見(jiàn)問(wèn)題等可查閱 vscode-publishing-extension。

至此，《vscode webview 插件開(kāi)發(fā)》“三部曲”就完結(jié)了，你可以在 vscode 插件面板中搜索 you-you.to-do-list-demo 安裝體驗(yàn)我們的 demo 插件。

最后，感謝您的耐心閱讀，也衷心希望它能對(duì)您的開(kāi)發(fā)過(guò)程有所幫助，并最終實(shí)現(xiàn)一個(gè)精美的 vscode webview 插件！

Demo 源碼

to-do-list-demo

相關(guān)閱讀

vscode webview 插件開(kāi)發(fā)（毛坯篇）

vscode webview 插件開(kāi)發(fā)（精裝篇）

vscode 插件與 electron 應(yīng)用跳轉(zhuǎn)網(wǎng)頁(yè)進(jìn)行登錄的實(shí)踐

參考資料

vscode-publishing-extension

vscode-vsce-support-pnpm