从0到1：VS Code 插件开发实战指南（七）

发布与维护——从本地开发到 Marketplace 上架

作者：于天惠适用读者：已完成插件开发，准备发布并长期维护的开发者

引言：让世界用上你的工具

你已经走过了漫长的开发之路：

• • 设计了实用的功能
• • 编写了健壮的代码
• • 测试了各种边界情况

但插件的价值，只有在被他人使用时才真正实现。

本篇将带你完成最后也是最关键的一步：将插件发布到 VS Code 官方 Marketplace，并建立可持续的维护机制。你将学到：

• • 如何打包和测试发布版本
• • 如何编写吸引人的插件描述（README）
• • 如何管理版本与更新日志
• • 如何收集用户反馈与处理 Issue
• • 如何自动化发布流程（CI/CD）

无论你是个人开发者还是团队协作，这些实践都将助你打造专业级插件。

一、发布前的准备工作

1.1 检查清单（Must-Have）

在发布前，请确保以下事项已完成：

🔍 提示：运行 npx vsce ls 可预览打包内容，确认无多余文件。

1.2 创建发布者账号（Publisher）

VS Code 插件由“发布者（Publisher）”发布。你需要先注册一个：

步骤 1：安装 vsce（VS Code Extension Manager）

npm install -g @vscode/vsce

步骤 2：创建 Azure DevOps 组织（免费）

• • 访问 https://dev.azure.com
• • 注册并创建新组织（如 my-vscode-extensions）

步骤 3：创建 Personal Access Token (PAT)

1. 1. 进入 Azure DevOps → User Settings → Personal Access Tokens
2. 2. 新建 Token，权限选择 “Custom defined”
3. 3. 勾选 “Marketplace → Manage”
4. 4. 复制生成的 Token（仅显示一次！）

步骤 4：登录 vsce

vsce login <your-publisher-name># 输入 PAT

📌 注意：<your-publisher-name> 将成为插件 ID 的前缀，例如 yutianhui.dotenv-intellisense。

二、编写专业的插件描述（README.md）

README 是用户决定是否安装的第一依据。一个优秀的 README 应包含：

2.1 必备要素

# Dotenv Intellisense![Demo GIF](images/demo.gif)为 `.env` 文件提供智能提示、语法高亮和错误诊断。## ✨ 特性- 🔍 **语法高亮**：区分键、值、注释- 💡 **智能补全**：输入 `PO` 自动提示 `PORT=`- ⚠️ **实时诊断**：检测非法键名、重复定义- 🎨 **主题适配**：自动匹配 VS Code 主题## 🚀 安装在 VS Code 中搜索 `Dotenv Intellisense` 并点击安装。## ⚙️ 配置支持自定义常用键/值（可选）：```json{  "dotenv-intellisense.customKeys": ["MY_API_KEY", "CUSTOM_VAR"]}

📝 更新日志

详见 CHANGELOG.md

🙏 致谢

感谢 dotenv 社区的启发！

📄 许可证

MIT

### 2.2 提升体验的技巧- **嵌入 GIF 动图**：展示核心功能（推荐使用 [ScreenToGif](https://www.screentogif.com/)）- **提供配置示例**：降低用户上手门槛- **明确兼容性**：如 “Requires VS Code 1.80+”- **添加徽章（Badges）**：  ```md  ![Version](https://img.shields.io/vscode-marketplace/v/yutianhui.dotenv-intellisense)  ![Installs](https://img.shields.io/vscode-marketplace/i/yutianhui.dotenv-intellisense)  ![License](https://img.shields.io/github/license/yutianhui/dotenv-intellisense)

三、打包与发布

3.1 本地打包（用于测试）

# 生成 .vsix 文件vsce package# 安装到本地 VS Code 测试code --install-extension dotenv-intellisense-0.1.0.vsix

✅ 强烈建议：在干净的 VS Code 实例（或 Insiders 版）中测试，避免受其他插件干扰。

3.2 正式发布

# 自动读取 package.json 版本号vsce publish# 或指定版本vsce publish 1.2.3

发布后，插件通常在 5 分钟内 出现在 Marketplace：

• • 网页版：https://marketplace.visualstudio.com
• • VS Code 内：扩展面板搜索你的插件名

四、版本管理与更新策略

4.1 遵循语义化版本（SemVer）

• • MAJOR（1.0.0 → 2.0.0）：破坏性变更
• • MINOR（1.0.0 → 1.1.0）：新增向后兼容功能
• • PATCH（1.0.0 → 1.0.1）：修复 bug

4.2 维护 CHANGELOG.md

# Changelog## [1.1.0] - 2026-01-07### Added- 支持 `.env.test` 和 `.env.production` 文件- 新增配置项 `customKeys`### Fixed- 修复重复键诊断误报问题## [1.0.0] - 2026-01-01### Initial Release- 语法高亮- 智能提示- 错误诊断

🔗 工具推荐：使用 standard-version 自动生成 changelog。

五、用户反馈与社区维护

5.1 配置 Issue 模板

在 .github/ISSUE_TEMPLATE/ 下创建：

• • bug_report.yml：引导用户提供复现步骤、VS Code 版本等
• • feature_request.yml：明确需求场景与期望行为

5.2 设置自动回复（GitHub Actions）

# .github/workflows/greet.ymlname: Greet New Issueson: issues  types: [opened]jobs:  greet:    runs-on: ubuntu-latest    steps:      - run: |          gh issue comment ${{ github.event.issue.number }} \            --body "感谢反馈！我们会在 48 小时内回复。"        env:          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

5.3 监控关键指标

• • 安装量：Marketplace 后台查看
• • 评分：鼓励满意用户打星（可在插件内温和提示）
• • 崩溃率：通过 vscode-extension-telemetry 集成 Application Insights

六、自动化发布（CI/CD）

手动发布易出错。推荐使用 GitHub Actions 自动化：

6.1 创建发布工作流（.github/workflows/publish.yml）

name: Publish Extensionon:  release:    types: [published] # 当 GitHub Release 创建时触发jobs:  publish:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: actions/setup-node@v4        with:          node-version: 20      - run: npm ci      - run: npm run compile # 构建 TypeScript      - run: npx vsce publish --pat ${{ secrets.VSCE_PAT }}        env:          VSCE_PAT: ${{ secrets.VSCE_PAT }}

6.2 配置 Secrets

在 GitHub 仓库 Settings → Secrets 中添加：

• • VSCE_PAT：你在 Azure DevOps 创建的 Personal Access Token

✅ 优势：只需在 GitHub 创建 Release，插件自动发布到 Marketplace。

七、长期维护的最佳实践

7.1 保持依赖更新

• • 定期运行 npm outdated
• • 使用 Dependabot 自动创建 PR（.github/dependabot.yml）

7.2 兼容性策略

• • 最低 VS Code 版本：在 package.json 中声明：

  {  "engines": {    "vscode": "^1.80.0"  }}

• • 测试多个 VS Code 版本（使用 @vscode/test-electron）

7.3 文档即产品

• • 将 README 视为产品首页
• • 在插件内提供 “Open Documentation” 命令
• • 示例：

  vscode.commands.registerCommand('dotenv-intellisense.docs', () => {  vscode.env.openExternal(vscode.Uri.parse('https://github.com/.../README.md'));});

结语：你已是一名 VS Code 插件开发者

恭喜！你已走完从 0 到 1 的完整旅程：

• • 第1篇：搭建开发环境，理解插件架构
• • 第2篇：实现命令与状态栏交互
• • 第3篇：监听文件系统与配置变更
• • 第4篇：操作编辑器文本内容
• • 第5篇：构建 Webview 富交互界面
• • 第6篇：提供语言级智能服务
• • 第7篇：发布并维护专业插件

你不仅学会了一项技能，更获得了一种能力：将重复劳动转化为自动化工具，将个人经验封装为共享价值。

记住：每一个伟大的开发者工具，都始于一个“这太麻烦了，我要写个插件”的念头。

现在，去 Marketplace 发布你的作品吧——世界正等待你的解决方案。

附录：资源汇总

系列完结感谢一路陪伴。愿你的代码，照亮他人的开发之路。