VS Code插件的发布与自动化

本文档总结了如何配置 VS Code 插件的自动化发布流程，自动构建并将插件发布到 VS Code Marketplace 和 Open VSX Registry 两个平台。

1. 获取发布 Token

自动化由于需要权限验证，首先需要获取两个平台的 Access Token。

1.1 VS Code Marketplace (Visual Studio Marketplace)

1. 访问 Azure DevOps 并登录（通常使用微软账号）。
2. 点击右上角的用户设置图标 -> Personal success tokens。
3. 点击 + New Token ：
   • Name : 填写描述，如 VS Code Extension。
   • Organization : 选择 All accessible organizations.
   • Expiration : 建议选择 All scopes 下较长的时间，或者自定义。
   • Scopes : 找到 Marketplace ，勾选 Acquire 和 Manage （或者直接选 Full access 简单粗暴，但要注意安全）。
4. 复制生成的 Token，它只显示一次。

1.2 Open VSX Registry

1. 访问 Open VSX 并登录（使用 GitHub 账号）。
2. 点击右上角头像 -> Settings。
3. 在 Access Tokens 区域，生成一个新的 Token。
4. 复制生成的 Token。

---

2. 配置 GitHub Secrets

为了安全起见，不要将 Token 直接写在代码里。

1. 进入你的 GitHub 仓库页面。

2. 点击 Settings -> Secrets and variables -> Actions。

3. 点击 New repository secret ，添加以下两个密钥：

   Name	Value	描述
   VSCE_TOKEN	(Azure DevOps 生成的 Token)	用于发布到 VS Code Marketplace
   OVSX_TOKEN	(Open VSX 生成的 Token)	用于发布到 Open VSX

---

3. 安装工具 (本地测试用)

虽然 CI 会自动安装，但在本地常用这两个工具进行验证或手动发布。

• vsce: 微软官方的发布工具。

npm install -g @vscode/vsce

• ovsx: Open VSX 的发布工具。

npm install -g ovsx

常用命令：

• 打包：vsce package (生成 .vsix 文件)
• 发布 (VS Code): vsce publish -p <TOKEN>
• 发布 (Open VSX): ovsx publish -p <TOKEN>

---

4. 编写 GitHub Actions Workflow

在仓库根目录创建 .github/workflows/publish.yml

这个配置实现了：

1. 触发条件 ：当推送 v*.*.* 格式的 tag 时触发（如 git push origin v1.0.5）。
2. 环境准备：使用 Node.js 20+ (解决部分 npm 兼容性问题)。
3. 发布流程 ：
   • 自动安装依赖 (vsce, ovsx)。
   • 打包插件。
   • 尝试发布到 VS Code Marketplace。
   • 尝试发布到 Open VSX。
   • 自动创建 GitHub Release 并上传 .vsix 文件。

name: Publish Extension

on:
  push:
    tags:
      - 'v*.*.*'  # 仅在推送版本 tag 时触发
  workflow_dispatch:  # 允许手动触发

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: write # 允许创建 Release

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      # 使用较新的 Node 版本以避免 "Exit handler never called" 等错误
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      # 安装发布工具
      - name: Install tools
        run: |
          npm install -g @vscode/vsce
          npm install -g ovsx

      # 依赖安装 (如果项目有打包构建步骤)
      - name: Install dependencies
        run: npm ci

      # 打包检查
      - name: Package extension
        run: npx vsce package

      # 发布到 VS Code Marketplace
      # continue-on-error: true 防止因为版本号重复等非致命错误导致中断后后续流程
      - name: Publish to VS Code Marketplace
        run: npx vsce publish -p ${{ secrets.VSCE_TOKEN }}
        continue-on-error: true

      # 发布到 Open VSX Registry
      - name: Publish to Open VSX Registry
        run: ovsx publish -p ${{ secrets.OVSX_TOKEN }}
        continue-on-error: true

      # 获取当前版本号
      - name: Get version
        id: package-version
        # 注意：这里的引号处理很重要，避免 shell 解析错误
        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

      # 创建 GitHub Release
      - name: Create GitHub Release
        uses: softprops/action-gh-release@v1
        with:
          files: '*.vsix'
          generate_release_notes: true
          tag_name: ${{ github.ref_name }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

5. 发布流程总结

1. 修改代码 并测试通过。

2. 更新版本号 : 修改 package.json 中的 version 字段 (例如 1.0.5 -> 1.0.6)。

3. 提交代码:

   git add .
   git commit -m "chore: release v1.0.6"
   git push

4. 打 Tag 并推送 (这是触发自动发布的关键):

   git tag v1.0.6
   git push origin v1.0.6

5. 观察 Actions: 去 GitHub 仓库的 Actions 页面查看运行状态。

整个流程大概一分钟左右（取决于你的插件复杂度），你的插件就会发布到 VS Code Marketplace 和 Open VSX Registry 两个平台以及在你的Github中创建相关release

当然啦，如果你是内部仓库，这套流程可能就不太适合你，但是大体流程都是一样的，希望能帮到你