--- title: 04-打包与发布 date: 2026-03-23 22:49:30 icon: famicons:logo-markdown index: true tags: categories: --- 这里有两个扩展市场，分别对应两个打包以及发布的工具。 ## 一、Visual Studio Code Marketplace [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/) 是由微软官方运营的 **VS Code 扩展市场**，是 VS Code 生态系统的核心组成部分。这部分详细的发布和打包的步骤可以看这里：[发布扩展 | Visual Studio Code 扩展 API - VSCode · AI 代码编辑器](https://vscode.js.cn/api/working-with-extensions/publishing-extension)、[Publishing Extensions | Visual Studio Code Extension API](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) ### 1. 打包工具 vsce 无论是本地打包还是发布到应用市场都需要借助 `vsce` 这个工具，[vsce](https://github.com/microsoft/vscode-vsce) 是“Visual Studio Code Extensions”的缩写，它是一个用于打包、发布和管理 VS Code 扩展的命令行工具。通过以下命令安装： ```bash npm install -g @vscode/vsce # 全局安装vsce vsce --version # 安装完毕后可以查看是否安装成功 ``` ### 2. 打包成 vsix 文件 进入扩展的工程目录，然后执行： ```bash vsce package ``` 然后就发现报错了： image-20250530201545584 这个是因为第一次生成工程后没有修改过 README.md 文件，做一点修改就可以了。然后重新打包，又有警告： image-20250530201855983 这个是报错因为 package.json 中没有设置 repository。然后我们重新执行即可，整体会有以下信息： ```bash D:\sumu_blog\vssm-tool [master ≡]> vsce package Executing prepublish script 'npm run vscode:prepublish'... > vssm-tool@0.0.1 vscode:prepublish > npm run compile > vssm-tool@0.0.1 compile > tsc -p ./ WARNING LICENSE.md, LICENSE.txt or LICENSE not found Do you want to continue? [y/N] y DONE Packaged: D:\sumu_blog\vssm-tool\vssm-tool-0.0.1.vsix (7 files, 4.97KB) ``` 中间的警告可以不管，是因为激活插件的事件设置为启动 vscode 了，任何情况下都直接启动了。然后就可以看到当前目录下生成了 vsix 文件： ![image-20250723224155833](./04-打包与发布/img/image-20250723224155833.png) 这个文件我们就可以像正常的插件一样安装了。后来的新版本 vsce 还会在打包完成后显示 vsix 文件中包含的内容。 ### 3. 发布约束 发布工具会检查以下约束： - `package.json` 中提供的图标不能是 SVG。 - `package.json` 中提供的徽章不能是 SVG，除非它们来自 [受信任的徽章提供商](https://vscode.js.cn/api/references/extension-manifest#approved-badges)。 - `README.md` 和 `CHANGELOG.md` 中的图像 URL 需要解析为 `https` URL。 - `README.md` 和 `CHANGELOG.md` 中的图像不能是 SVG，除非它们来自 [受信任的徽章提供商](https://vscode.js.cn/api/references/extension-manifest#approved-badges)。 > 注意：出于安全考虑，`vsce` 不会发布包含用户提供的 SVG 图像的扩展。 ### 4. 发布到应用市场 我们可以注册开发者账号，发布到官网应用市场，这个发布和 npm 一样是不需要审核的。这部分可以参考：[发布扩展 | Visual Studio Code 扩展 API - VSCode 编辑器](https://vscode.js.cn/api/working-with-extensions/publishing-extension#publishing-extensions) > Tips：Visual Studio Code 使用 [Azure DevOps](https://azure.microsoft.com/services/devops/) 提供其 Marketplace 服务。这意味着扩展的身份验证、托管和管理都通过 Azure DevOps 提供。`vsce` 只能使用 [个人访问令牌](https://learn.microsoft.com/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate) 发布扩展。你需要创建至少一个才能发布扩展。另外： > > - 一个 Microsoft 账号可以创建多个 `Azure` 组织； > - 一个组织可以创建多个 `publisher` 账号； > - 同时一个组织可以创建多个 `PAT`（`Personal Access Token`，个人访问令牌）； #### 4.1 注册账号 （1）注册一个微软账号：[https://login.live.com/](https://login.live.com/)，没有的话注册一个，有的话直接登录。 （2）访问 [https://aka.ms/SignupAzureDevOps](https://aka.ms/SignupAzureDevOps) ，如果从来没有使用过 Azure，那么会看到如下提示： image-20250530225813638 点这里的 Continue，然后就会创建一个以邮箱前缀为名的组织。 > Tips：如果没有 Azure DevOps 组织，可以按照 [创建组织](https://learn.microsoft.com/azure/devops/organizations/accounts/create-organization) 文章中的步骤操作。 #### 4.2 创建令牌 （3）转到 [Azure DevOps 门户](https://go.microsoft.com/fwlink/?LinkId=307137)，并选择我们的组织。打开个人资料图片旁边的用户设置下拉菜单，然后选择 **个人访问令牌**（Personal access tokens）。第一次进来的时候会看到一个创建项目的提示，可以不用管。 Personal settings menu （4）在 **个人访问令牌** 页面上，选择 **新建令牌**（New Token）。 （5）在创建新个人访问令牌模态框中，为令牌选择以下详细信息 - 名称：您为令牌指定的任何名称 - 组织：**所有可访问的组织**（All accessible organizations） - 过期（可选）：设置令牌的期望过期日期 - 范围：自定义定义（Custom defined）。点击 **范围**（Scopes）部分下方的 **显示所有范围**（Show all scopes）链接，在范围列表中，滚动到 **Marketplace** 并选择 **管理**（Manage）范围 image-20250530231156591 > Tips：这里特别要注意 `Organization` 要选择 `all accessible organizations`，`Scopes` 要选择 `Full access`，否则后面发布会失败。可能会报： > > ```bash > ERROR Failed request: (401) > ``` 当创建令牌成功后，需要本地记下来，因为网站是不会帮我们保存的。 #### 4.3 创建发布者 **发布者** 是一个可以向 Visual Studio Code Marketplace 发布扩展的身份。每个扩展都需要在其 [`package.json` 文件](https://vscode.js.cn/api/references/extension-manifest) 中包含一个 `publisher` 标识符。 （1）转到 [Visual Studio 市场发布者管理页面](https://marketplace.visualstudio.com/manage)。 （2）使用在上一节中用于创建 [个人访问令牌](https://vscode.js.cn/api/working-with-extensions/publishing-extension#get-a-personal-access-token) 的同一个 Microsoft 帐户登录。 （3）点击左侧窗格中的 **创建发布者**（Create publisher）。 （4）在新页面中，指定新发布者的必需参数 - 标识符和名称（分别为 **ID** 和 **Name** 字段） - **ID**：我们在市场上的发布者的 **唯一** 标识符，将用于我们的扩展 URL 中。ID 创建后无法更改。 - **Name**：我们发布者的 **唯一** 名称，将在市场中与我们的扩展一起显示。这可以是我们的公司或品牌名称。 以下是 Python 扩展的发布者标识符和名称示例: ![Example of publisher identifier and name](./04-打包与发布/img/publisher-id-and-name.png) （5）（可选）填写其余字段。 （6）点击 **创建**（Create） #### 4.4 本地登录 在本地使用 `vsce` 验证新创建的发布者。在我们的终端中运行以下命令，当提示时，输入上一步中创建的个人访问令牌。 ```bash D:\sumu_blog\vssm-tool [master ≡]> vsce login ms-vs-extensions Publisher 'ms-vs-extensions' is already known Do you want to overwrite its PAT? [y/N] y https://marketplace.visualstudio.com/manage/publishers/ Personal Access Token for publisher 'ms-vs-extensions': ************************************************************************************ The Personal Access Token verification succeeded for the publisher 'ms-vs-extensions'. ``` #### 4.5 发布扩展 可以通过两种方式发布扩展： ##### 4.5.1 自动发布 - （1）自动方式，使用 `vsce publish` 命令 ```bash vsce publish -p D:\sumu_blog\vssm-tool [master ≡ +0 ~1 -0 !]> vsce publish -p **************************************************** Executing prepublish script 'npm run vscode:prepublish'... > vssm-tool@0.0.1 vscode:prepublish > npm run compile > vssm-tool@0.0.1 compile > tsc -p ./ WARNING LICENSE.md, LICENSE.txt or LICENSE not found Do you want to continue? [y/N] y INFO Publishing 'ms-vs-extensions.vssm-tool v0.0.1'... INFO Extension URL (might take a few minutes): https://marketplace.visualstudio.com/items?itemName=ms-vs-extensions.vssm-tool INFO Hub URL: https://marketplace.visualstudio.com/manage/publishers/ms-vs-extensions/extensions/vssm-tool/hub DONE Published ms-vs-extensions.vssm-tool v0.0.1. ``` 如果尚未通过上面的 `vsce login` 命令提供您的个人访问令牌，`vsce` 将会提示您输入。 ##### 4.5.2 手动发布 - （2）手动方式，使用 `vsce package` 将扩展打包成可安装的 VSIX 格式，然后将其上传到 [Visual Studio 市场发布者管理页面](https://marketplace.visualstudio.com/manage)。 Add an extension through management page #### 4.6 发布验证 若是发布成功，会有如下提示： ![image-20250723225226081](./04-打包与发布/img/image-20250723225226081.png) 我们也可以打开 [Visual Studio 市场发布者管理页面](https://marketplace.visualstudio.com/manage)： ![image-20250723225326278](./04-打包与发布/img/image-20250723225326278.png) 然后过几分钟就可以在这里找到我们发布的扩展啦： ```bash https://marketplace.visualstudio.com/items?itemName=. ``` 在这里就是：[https://marketplace.visualstudio.com/items?itemName = ms-vs-extensions.vssm-tool](https://marketplace.visualstudio.com/items?itemName=ms-vs-extensions.vssm-tool) ![image-20250723225803220](./04-打包与发布/img/image-20250723225803220.png) #### 4.7 增量发布 版本号格式一般是 `major.minor.patch`，如果想让发布之后版本号的 patch 自增，例如：`0.0.1` → `0.0.2`，可以这样： ```bash vsce publish patch ``` 执行这个命令后会自动修改 `package.json` 里面的版本号。同理，`vsce publish minor` 也是可以的。 #### 4.8 取消发布 ```bash vsce unpublish (publisher name).(extension name) ``` ## 二、Open VSX Registry [OpenVsx Registry](https://open-vsx.org/) 是 eclipse 基金会维护的 vscode 插件的开源版本，上面发布的插件可用于 vscode 和所有基于 vscodium 内核开发的「类 vscode 编辑器」的插件系统，比如 [Vscodium](https://github.com/VSCodium/vscodium)，[Trae](https://www.trae.com.cn/)，[Cursor](https://www.cursor.com/) ，[code-server](https://github.com/coder/code-server) 等等。后面常用的 [code-server](https://github.com/coder/code-server) 就默认使用的这个扩展中心，想要在 [code-server](https://github.com/coder/code-server) 的扩展中心搜索到我们自己的扩展，需要发布到这里才行。 ### 1. 打包工具 ovsx open vsx 通过 `ovsx` 工具进行打包和发布，通过下面的命令安装： ```shell npm install -g ovsx ovsx --version ``` ### 2. 打包成 vsix 文件 `ovsx` **没有** 单独的打包命令。想要打包成 vsix 文件，还是要用上面的 vsce 来实现。 ### 3. 发布到应用市场 #### 3.1 注册账号 先进入 [Open VSX Registry](https://open-vsx.org/) 创建账号，可以通过 GitHub 账号登陆。登陆后，进入 [账户界面](https://open-vsx.org/user-settings/profile)，你需要将当前账号绑定到你的 「eclipse 基金会账号」，为此，你还需要注册一个基金会账号，完成绑定和关联。完成后， [账户界面](https://open-vsx.org/user-settings/profile) 应该如下： ![image-20260323224941562](./04-打包与发布/img/image-20260323224941562.png) > Tips：这里一定要签署 Open VSX Publisher Agreement 后续才能创建命名空间和个人令牌。 #### 3.2 创建命名空间 在 [user-settings/namespaces](https://open-vsx.org/user-settings/namespaces) 创建命名空间，空间名一定要和我们的插件 package.json 内的 publisher 名一致。 创建完成的 namespace 可能还需要进行 verify。进入 open-vsx 的 github 仓库提 issue 进行 namespace 的 verify，这里是有说明：[Namespace Access · eclipse-openvsx/openvsx Wiki](https://github.com/eclipse-openvsx/openvsx/wiki/Namespace-Access)，这里是我的示例：[Claiming namespace ms-vs-extensions · Issue #9094 · EclipseFdn/open-vsx.org](https://github.com/EclipseFdn/open-vsx.org/issues/9094) #### 3.3 创建令牌 在这里 [user-settings/tokens](https://open-vsx.org/user-settings/tokens) 创建我们的个人令牌，只会显示一次，要注意保存。 #### 3.4 本地登录 和 vscode 插件差不多，登陆我们的命名空间，并从 [Settings – Open VSX Registry](https://open-vsx.org/user-settings/tokens) 获取我们的 token ```shell ovsx login ``` 登陆完成后，token 会被记录在 `~/.ovsx` 中。 #### 3.5 发布扩展 ```shell # 打包 + 发布 ovsx publish # 或者免登录发布 ovsx publish -p ``` 例如： ```shell ➜ /workspace git:(master) ovsx publish -p ovsxat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Executing prepublish script 'npm run vscode:prepublish'... > vssm-tool@1.0.5 vscode:prepublish > npm run compile && npm run postbuild > vssm-tool@1.0.5 compile > tsc -p ./ > vssm-tool@1.0.5 postbuild > shx mkdir -p out && shx cp -f src/DefaultTemplate.* out/ INFO Files included in the VSIX: tmp-1746-7L2fl70seJ6o-.vsix ├─ [Content_Types].xml ├─ extension.vsixmanifest └─ extension/ ├─ .cnb.yml [1.15 KB] ├─ LICENSE.md [0.01 KB] ├─ changelog.md ├─ package.json [12 KB] ├─ readme.md ├─ out/ │ ├─ DefaultTemplate.clang-format [1.05 KB] │ ├─ DefaultTemplate.code-workspace [0.73 KB] │ ├─ DefaultTemplate.editorconfig [1.01 KB] │ ├─ extension.js [5.56 KB] │ ├─ cmd/ (5 files) [30.78 KB] │ ├─ helpers/ (1 file) [4.2 KB] │ ├─ language-features/ (2 files) [13.65 KB] │ └─ tree-views/ (6 files) [62.7 KB] └─ resources/ ├─ icon/ (30 files) [46.02 KB] └─ images/ (1 file) [31.94 KB] => Run vsce ls --tree to see all included files. DONE Packaged: /tmp/tmp-1746-7L2fl70seJ6o-.vsix (56 files, 109.09 KB) 🚀 Published ms-vs-extensions.vssm-tool v1.0.5 ``` 然后就可以在我们的命名空间看到这个扩展了： ![image-20260323230108644](./04-打包与发布/img/image-20260323230108644.png)