当我们在本地开发并调试好 vscode 插件后，下一步就得支持能从 vscode 插件市场中安装并使用插件了。下面我们就从产品研发流程中的“转测”和“上线”两个阶段来简单聊聊插件的交付流程。在这之前，我们先来做一些准备工作吧。
准备工作
vsce 安装
正如我们会使用 npm 作为 node 的包管理工具一样，vscode 同样也需要 vsce 作为插件的管理工具，它可以用来构建插件的安装包、发布或删除插件等。你可以使用下方命令进行安装：
npm install -g @vscode/vsce
创建 Azure DevOps 组织
vscode 使用 Azure DevOps 为所有的插件提供身份验证、托管和管理等服务，因此你需要先创建 Azure DevOps 组织才能继续后面的操作。开发公司项目的话，最好是注册一个团队账号，创建的组织名也最好是和团队名、部门名或产品名等挂钩，但尽量别带“个人”标识上去。
创建个人 token
有了组织，便可以在这个组织下创建一些个人 token，这些 token 将被用于构建或发布插件等操作时的身份验证。创建 token 的步骤如下：
- 进入你创建的组织的首页（例如
https://dev.azure.com/vscode），点击右上角用户设置后，在下拉菜单中选择 Personal access tokens，如图示：
- 在 Personal Access Tokens 页面，点击右上角的 New Token 按钮，如图示：
-
在创建 token 的弹窗内，完善下这些信息：
a. 名称：最好能语义化一点，能看出来这个 token 是给谁在哪个插件用的。
b. 组织：可以选择这个 token 适用于哪个组织，或选择 All accessible organizations 以适用于该账号下的所有组织。这里我选择了刚创建的组织。
c. 有效期：默认三十天，你可以根据情况自定义。但过期了也没事，重新创建即可。
d. 授权范围：在选择了 Custom defined 后，点击下方的 Show all scopes，然后找到 Marketplace，选择 Manage 选项。
填写好以上信息后，点击左下角的 Create 按钮即可，如图示：
- 创建 token 成功后会显示如下弹窗，该 token 只会显示一次，你可以复制并保存下来：
以上便是创建 token 的所有步骤，你可以创建多个 token 用于不同机器或团队协作时分给多人各自使用。
创建 publisher
一开始我理解的 publisher 就是插件的发布人，所以我还以为同一个插件可以创建多个 publisher。现在看起来 publisher 更像是插件的“发布方”，也因此一个 publisher 是可以对应有多个插件的，但同一个插件却只能有一个 publisher。创建 publisher 的步骤比较简单，具体如下：
进入 publisher 管理页面（如需登录，使用你在前面创建的 Azure DevOps 账户即可）。
点击页面左侧的 Create publisher 。
-
进入创建页面后，重点完善下 Name 和 ID 两个信息即可，其它信息根据需要填写或保持默认也行。
a. Name：公司项目的话，建议名称最好是产品品牌名、部门名或公司名，但尽量别带有任何“个人”标识。名称是可以编辑的，后面觉得不合适了也可以改。
b. ID：ID 最好能和你填写的名称关联起来，比如你填写的名称是你的公司名“Netease”，那 ID 就可以填写为“netease”。ID 是不能修改的，所以填写时一定要考虑清楚。此外，无论是 ID 还是名称，在整个插件市场都是具有唯一性的，所以当你们公司或部门有多个插件时，推荐也是共用同一个 publisher。
定义好的 publisher Name 和 ID，会用于图中所示位置：
填写完信息后，点击左下方的 Create 按钮即可。
publisher 创建成功后，你需要在终端执行下命令：
vsce login <publisher id>。执行时，请将其中的<publisher id>替换为你在第三步中填写的 ID。执行后，会提示你输入个人 token，这里输入下你之前创建并保存的 token 即可。验证通过后，你才能执行 vsce 的一些其他命令。
完善 package.json
- 添加 publisher 字段，它对应的是上面创建的 publisher ID。
- 添加 repository 字段，它对应的是插件的代码仓库地址。
- 添加 icon 字段，它对应的是插件的 logo 地址，这里填写 logo 的相对路径即可，例如：
"media/icon/logo.png"，logo 推荐使用 128x128px 的 png 图片。（logo 显示见 创建 publisher 图示）
转测
有了前面的准备工作，转测将变得非常简单。你只需在插件工程的根目录下执行 vsce package 命令，便会在根目录下生成一个 .vsix 文件，这便是插件的安装包。将它提供给测试同学后，按照以下步骤即可安装使用：
- 打开插件面板。
- 点击右上方的 "Views and More Actions..." 图标。
- 选择 "Install from VSIX..." 后，即可安装本地的
.vsix文件，重启窗口后便可使用安装好的插件。
如图示：
上线
当测试通过的插件需要上线时，个人建议还是先进行预发布，这时测试同学可以先在插件市场中搜索安装插件的 pre-release 版本，当 pre-release 版本回归测试完成后，再发布正式版即可。无论是预发布还是发布，你都可以在 publisher 管理页面查看当前插件的发布进度。
预发布
- 更新 package.json 中的版本号。
- 插件根目录下执行
vsce publish --pre-release。
发布
- 更新 package.json 中的版本号。
- 更新 CHANGELOG.md 。
- 插件根目录下执行
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 插件！
