如何开发和发布 VS Code 扩展
Source: Dev.to
嗨，大家好！我是来自日本的软件工程师，今天想分享一下我开发 VS Code 扩展并将其发布到 VS Code Marketplace 的经验。
在本文中，你将看到：
- 从搭建 VS Code 扩展项目到发布的整体流程。
- 扩展本身的实现细节（简要概述）。
- 我构建的扩展的简短演示——可爱角色在侧边栏漫游，适合快速休息。
1. 前置条件
确保以下工具已安装在你的机器上：
| 工具 | 需要它的原因 |
|---|---|
| Node.js | 用于构建扩展的运行时 |
| git | 版本控制（生成器可以初始化仓库） |
| VS Code | 你将要扩展的编辑器 |
| Microsoft account | 发布到 Azure DevOps / Marketplace 所需的 Microsoft 账户 |
2. 搭建新扩展
VS Code 提供了官方的 Yeoman 生成器（generator-code）。你可以通过两种方式使用它。
选项 1 – 使用 npx 运行（无需全局安装）
npx --package yo --package generator-code -- yo code选项 2 – 全局安装
npm install --global yo generator-code
yo code运行该命令会打开交互式提示。下面是向导的示例：
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
✔ What type of extension do you want to create? New Extension (TypeScript)
✔ What's the name of your extension? hello-vscode-world
✔ What's the identifier of your extension? hello-vscode-world
✔ What's the description of your extension?
✔ Initialize a git repository? Yes
✔ Which bundler to use? unbundled
✔ Which package manager to use? npm
✔ Do you want to open the new folder with Visual Studio Code? Open with `code`回答完提示后，会创建一个名为 hello-vscode-world 的文件夹：
hello-vscode-world/
├── CHANGELOG.md
├── eslint.config.mjs
├── node_modules/
├── package-lock.json
├── package.json
├── README.md
├── src
│ ├── extension.ts
│ └── test
├── tsconfig.json
└── vsc-extension-quickstart.md如果您看到如上的结构，脚手架已完成，您可以开始编码。
3. 使用 vsce 发布
vsce（Visual Studio Code Extension）是官方的扩展打包和发布 CLI。
安装 vsce
npm install -g @vscode/vsce3.1 创建个人访问令牌 (PAT)
- 登录 Azure DevOps（如果没有组织请先创建）。
- 前往 用户设置 → 个人访问令牌 → + 新建令牌。
- 填写字段：
| 字段 | 值 |
|---|---|
| 名称 | 任意你喜欢的名称 |
| 组织 | 默认即可 |
| 过期时间 | 选择合适的日期 |
| 作用域 | 自定义定义 → 显示所有作用域 → 启用 Marketplace → Manage |
- 点击 创建 并 复制 生成的令牌（以后将无法再次查看）。
3.2 创建发布者
- 前往 VS Code Marketplace 发布者管理 页面。
- 使用与 PAT 相同的 Microsoft 帐户登录。
- 点击 创建发布者 并填写：
| 字段 | 描述 |
|---|---|
| ID | 在扩展 URL 中使用的唯一标识符（创建后不可更改） |
| 名称 | 在 Marketplace 中显示的名称 |
- 点击 创建 并验证发布者账户。
3.3 在终端登录
vsce login "your-publisher-id"提示时，粘贴之前创建的 PAT。成功登录后会显示：
The Personal Access Token verification succeeded for the publisher "your-publisher-id".你的发布设置现在已经准备就绪。
4. 要准备的发布文件
| 项目 | 描述 |
|---|---|
| package.json | 必须包含 name、version、publisher 和 engines。强烈建议添加 license、repository 和 bugs。（参见 Extension Manifest Reference。） |
| README.md | 在 Marketplace 页面上直接显示。 |
图标（例如 icon.png） | 在 Marketplace 中显示为扩展图标。 |
| .vscodeignore | 从打包的扩展中排除不必要的文件。 |
| CHANGELOG.md | 在 Marketplace 上自动渲染。 |
这些文件可确保您的扩展正确显示且易于维护。
5. 打包扩展
在项目文件夹中运行以下命令：
vsce package如果一切正常，将生成一个 .vsix 文件，例如：
hello-vscode-world-0.0.1.vsix
├─ [Content_Types].xml
├─ extension.vsixmanifest
└─ extension/
├─ changelog.md
├─ package.json
├─ readme.md
└─ out/
├─ extension.js
└─ test/
└─ extension.test.js您可以检查 .vsix 存档（它其实是一个 zip 文件）以验证其内容。
6. 发布扩展
vsce publish或者，发布特定版本：
vsce publish 1.2.3短暂上传后，您的扩展将在 VS Code Marketplace 上线。
7. 进一步阅读
- VS Code 扩展 API – 用于构建扩展的官方文档。
- 扩展清单参考 – 详细说明
package.json中的必填和可选字段。
演示
下面是一段简短的 GIF（或视频），展示可爱角色在侧边栏中漫游。（在此插入您的演示媒体。）
祝您构建自己的扩展，编码愉快！
验证包内容
运行以下命令列出将被打包的文件：
vsce ls --tree示例输出：
hello-vscode-world-0.0.1.vsix
├─ CHANGELOG.md
├─ README.md
├─ package.json
└─ out/
├─ extension.js
└─ test/
└─ extension.test.js此步骤帮助您确认没有包含不必要的文件。
发布您的扩展
有两种方式可以发布您的扩展。
1. 通过 Marketplace UI 上传
- 前往 VS Code Marketplace 的发布者管理页面。
- 点击 New Extension → Visual Studio Code。
- 上传生成的
.vsix文件。
2. 直接从 CLI 发布
vsce publish如果发布成功，您会看到类似以下的输出：
DONE Published XXXXX vX.Y.Z.您可以在 Marketplace 管理页面上验证发布状态。在 Version 列中，状态会从 verifying 变为实际的版本号，表示发布已完成。
vsce package 与 vsce publish
两个命令共享一些共同步骤：
- 运行在
package.json中定义的scripts.vscode:prepublish。 - 根据
.vscodeignore确定要包含的文件。 - 将扩展打包成
.vsix文件。
vsce package
- 在本地生成
.vsix文件。 - 适用于：
- 从浏览器进行发布。
- 在 Marketplace 之外共享扩展文件。
- 检查打包内容。
vsce publish
- 生成
.vsix文件并立即将扩展发布到 VS Code Marketplace。
结束语
在本文中，我演示了如何创建和发布 VS Code 扩展。过程比我预期的要顺畅得多——令人惊喜！
如果你感兴趣，欢迎查看并尝试我的扩展，Kawaii Terrarium。
相关主题
- VSCode – 你的第一个扩展
- VSCode – 扩展清单
- VSCode – 发布扩展
- VSCode – 扩展 API