vscode webview 插件开发(交付篇)

当我们在本地开发并调试好 vscode 插件后,下一步就得支持能从 vscode 插件市场中安装并使用插件了。下面我们就从产品研发流程中的"转测"和"上线"两个阶段来简单聊聊插件的交付流程。在这之前,我们先来做一些准备工作吧。

准备工作

vsce 安装

正如我们会使用 npm 作为 node 的包管理工具一样,vscode 同样也需要 vsce 作为插件的管理工具,它可以用来构建插件的安装包、发布或删除插件等。你可以使用下方命令进行安装:

bash 复制代码
npm install -g @vscode/vsce

创建 Azure DevOps 组织

vscode 使用 Azure DevOps 为所有的插件提供身份验证、托管和管理等服务,因此你需要先创建 Azure DevOps 组织才能继续后面的操作。开发公司项目的话,最好是注册一个团队账号,创建的组织名也最好是和团队名、部门名或产品名等挂钩,但尽量别带"个人"标识上去。

创建个人 token

有了组织,便可以在这个组织下创建一些个人 token,这些 token 将被用于构建或发布插件等操作时的身份验证。创建 token 的步骤如下:

  1. 进入你创建的组织的首页(例如 https://dev.azure.com/vscode),点击右上角用户设置后,在下拉菜单中选择 Personal access tokens,如图示:
  1. Personal Access Tokens 页面,点击右上角的 New Token 按钮,如图示:
  1. 在创建 token 的弹窗内,完善下这些信息:

    a. 名称:最好能语义化一点,能看出来这个 token 是给谁在哪个插件用的。 b. 组织:可以选择这个 token 适用于哪个组织,或选择 All accessible organizations 以适用于该账号下的所有组织。这里我选择了刚创建的组织。 c. 有效期:默认三十天,你可以根据情况自定义。但过期了也没事,重新创建即可。 d. 授权范围:在选择了 Custom defined 后,点击下方的 Show all scopes ,然后找到 Marketplace ,选择 Manage 选项。

填写好以上信息后,点击左下角的 Create 按钮即可,如图示:

  1. 创建 token 成功后会显示如下弹窗,该 token 只会显示一次,你可以复制并保存下来:

以上便是创建 token 的所有步骤,你可以创建多个 token 用于不同机器或团队协作时分给多人各自使用。

创建 publisher

一开始我理解的 publisher 就是插件的发布人,所以我还以为同一个插件可以创建多个 publisher。现在看起来 publisher 更像是插件的"发布方",也因此一个 publisher 是可以对应有多个插件的,但同一个插件却只能有一个 publisher。创建 publisher 的步骤比较简单,具体如下:

  1. 进入 publisher 管理页面(如需登录,使用你在前面创建的 Azure DevOps 账户即可)。

  2. 点击页面左侧的 Create publisher

  3. 进入创建页面后,重点完善下 NameID 两个信息即可,其它信息根据需要填写或保持默认也行。

    a. Name:公司项目的话,建议名称最好是产品品牌名、部门名或公司名,但尽量别带有任何"个人"标识。名称是可以编辑的,后面觉得不合适了也可以改。 b. ID:ID 最好能和你填写的名称关联起来,比如你填写的名称是你的公司名"Netease",那 ID 就可以填写为"netease"。ID 是不能修改的,所以填写时一定要考虑清楚。此外,无论是 ID 还是名称,在整个插件市场都是具有唯一性的,所以当你们公司或部门有多个插件时,推荐也是共用同一个 publisher。

定义好的 publisher Name 和 ID,会用于图中所示位置:

  1. 填写完信息后,点击左下方的 Create 按钮即可。

  2. publisher 创建成功后,你需要在终端执行下命令:vsce login <publisher id>。执行时,请将其中的 <publisher id> 替换为你在第三步中填写的 ID。执行后,会提示你输入个人 token,这里输入下你之前创建并保存的 token 即可。验证通过后,你才能执行 vsce 的一些其他命令。

完善 package.json

  1. 添加 publisher 字段,它对应的是上面创建的 publisher ID。
  2. 添加 repository 字段,它对应的是插件的代码仓库地址,这个字段可选,不填的话,构建安装包时会有确认提示。
  3. 添加 icon 字段,它对应的是插件的 logo 地址,这里填写 logo 的相对路径即可,例如:"media/icon/logo.png",logo 推荐使用 128x128px 的 png 图片。(logo 显示见 创建 publisher 图示)

转测

有了前面的准备工作,转测将变得非常简单。你只需在插件工程的根目录下执行 vsce package 命令,便会在根目录下生成一个 .vsix 文件,这便是插件的安装包。将它提供给测试同学后,按照以下步骤即可安装使用:

  1. 打开插件面板。
  2. 点击右上方的 "Views and More Actions..." 图标。
  3. 选择 "Install from VSIX..." 后,即可安装本地的 .vsix 文件,重启窗口后便可使用安装好的插件。

如图示:

上线

当测试通过的插件需要上线时,个人建议还是先进行预发布,这时测试同学可以先在插件市场中搜索安装插件的 pre-release 版本,当 pre-release 版本回归测试完成后,再发布正式版即可。无论是预发布还是发布,你都可以在 publisher 管理页面 查看当前插件的发布进度。

预发布

  1. 更新 package.json 中的版本号。
  2. 插件根目录下执行 vsce publish --pre-release

发布

  1. 更新 package.json 中的版本号。
  2. 更新 CHANGELOG.md
  3. 插件根目录下执行 vsce publish

常见问题

使用 pnpm 作为插件的依赖管理工具时,发布插件为什么会失败?

这是因为当前的 vsce 实现中,仅支持了 npm 和 yarn v1 作为插件依赖的管理工具,当你使用它俩时,直接按照上文中的命令执行就好。而使用 pnpm 时,你需要先使用 webpack 或 esbuild 等构建插件代码,之后在执行 vsce 命令时,添加 --no-dependencies 选项即可,类似:pnpm vsce publish --no-dependencies

总结

发布插件的细节还有很多,本篇仅针对"交付"插件会涉及到的相关点做了简单介绍,其它有关插件管理的详细内容、常见问题等可查阅 vscode-publishing-extension

至此,《vscode webview 插件开发》"三部曲"就完结了,你可以在 vscode 插件面板中搜索 you-you.to-do-list-demo 安装体验我们的 demo 插件。

最后,感谢您的耐心阅读,也衷心希望它能对您的开发过程有所帮助,并最终实现一个精美的 vscode webview 插件!

Demo 源码

to-do-list-demo

相关阅读

vscode webview 插件开发(毛坯篇)

vscode webview 插件开发(精装篇)

vscode 插件与 electron 应用跳转网页进行登录的实践

参考资料

vscode-publishing-extension

vscode-vsce-support-pnpm

相关推荐
耶啵奶膘2 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机7 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui