我不知道的 VSCode 扩展:持续集成与持续部署 (CI/CD)

871 字 14 min read
前端开发 VSCode 扩展开发 CI CD 持续集成 持续部署 GitHub Actions Azure DevOps Pipelines 自动化 测试 发布

引言

⚙️ 在前面的文章中，你已经学会了如何开发、调试和发布 VSCode 扩展。为了提高开发效率、保证代码质量，并实现快速迭代，持续集成与持续部署 (CI/CD) 是现代软件开发中不可或缺的实践。为你的 VSCode 扩展配置 CI/CD 流程，可以自动化构建、测试、打包和发布你的扩展，让你专注于代码开发，而无需手动执行繁琐的发布流程。本文将详细介绍如何为 VSCode 扩展配置 CI/CD，实现自动化测试和发布，让你的扩展开发更上一层楼！现在，就让我们一起探索 VSCode 扩展的 CI/CD 之旅！

什么是 CI/CD？

🔄 持续集成 (Continuous Integration, CI) 和 持续部署 (Continuous Deployment, CD) 是 DevOps 实践的核心组成部分，旨在通过自动化软件交付流程，提高软件开发效率和质量。

  • 持续集成 (CI): 指频繁地 (通常是每天多次) 将代码变更合并到共享仓库中。每次代码合并都会触发自动化构建和测试流程，尽早发现和解决集成问题。CI 的目标是快速反馈、尽早发现错误、降低集成风险。
  • 持续部署 (CD): 指自动化地将代码变更部署到生产环境 (或预发布环境)。CD 构建在 CI 的基础上，进一步自动化了从代码提交到最终部署的整个流程。CD 的目标是快速交付价值、缩短发布周期、减少人工干预。

CI/CD 的核心价值在于自动化。通过自动化构建、测试和部署流程，可以减少人工错误、提高效率、缩短反馈周期、加速软件交付。

为什么 VSCode 扩展需要 CI/CD？

🚀 为 VSCode 扩展配置 CI/CD 具有以下优势:

  • 自动化测试: 每次代码提交或 Pull Request 都会自动运行单元测试和集成测试，确保代码质量，尽早发现和预防 Bug。
  • 自动化构建和打包: 自动编译 TypeScript 代码、打包扩展文件 (.vsix)，无需手动执行构建和打包命令。
  • 自动化发布: 自动将新版本的扩展发布到 VSCode 扩展市场，无需手动执行发布命令。
  • 提高开发效率: 将开发者从繁琐的手动构建、测试和发布流程中解放出来，专注于代码开发。
  • 保证发布质量: 通过自动化测试和构建流程，减少人为错误，保证发布版本的质量和稳定性。
  • 快速迭代和交付: 加速扩展的迭代和发布周期，更快地将新功能和 Bug 修复交付给用户。

CI/CD 工具选择

🛠️ 有很多 CI/CD 工具可供选择，常见的包括:

  • GitHub Actions: GitHub 官方提供的 CI/CD 服务，与 GitHub 代码仓库深度集成，使用 YAML 文件配置工作流。本文将以 GitHub Actions 为例进行讲解。
  • Azure DevOps Pipelines: Azure DevOps 提供的 CI/CD 服务，与 Azure DevOps 代码仓库集成，可以使用 YAML 或经典界面配置管道。如果你使用 Azure DevOps 管理代码仓库和发布者，Azure DevOps Pipelines 是一个不错的选择。
  • Jenkins: 开源的自动化服务器，功能强大，插件丰富，但配置和维护相对复杂。
  • Travis CI: 流行的 CI 服务，对开源项目免费，配置简单，但功能相对 GitHub Actions 和 Azure DevOps Pipelines 较弱。
  • CircleCI: 商业 CI 服务，功能强大，性能优秀，但价格相对较高。

选择 CI/CD 工具时，需要考虑项目需求、团队技术栈、预算成本等因素。对于 VSCode 扩展开发，GitHub Actions 或 Azure DevOps Pipelines 都是不错的选择，配置简单，功能足够强大，并且与代码仓库集成紧密。

使用 GitHub Actions 配置 CI/CD

1. 创建 GitHub Actions 工作流文件

⚙️ 在你的 VSCode 扩展项目根目录下，创建 .github/workflows 目录，并在该目录下创建一个 YAML 文件，例如 ci-cd.yml。这个 YAML 文件将定义你的 CI/CD 工作流。

2. 定义工作流

📝 打开 ci-cd.yml 文件，开始定义你的工作流。一个基本的 VSCode 扩展 CI/CD 工作流通常包括以下几个步骤:

  1. 检出代码 (Checkout): 将代码仓库的代码检出到工作流环境中。
  2. 安装 Node.js (Setup Node.js): 安装 Node.js 运行环境，用于构建和测试扩展。
  3. 安装依赖 (Install Dependencies): 安装扩展项目依赖的 npm 包。
  4. 编译代码 (Compile): 编译 TypeScript 代码为 JavaScript 代码。
  5. 运行测试 (Test): 运行单元测试和集成测试。
  6. 打包扩展 (Package): 使用 vsce package 命令打包扩展为 .vsix 文件。
  7. 发布扩展 (Publish): 将打包好的 .vsix 文件发布到 VSCode 扩展市场。 (可选，可以手动发布，或仅在特定分支或 Tag 上自动发布)

一个基本的 ci-cd.yml 工作流文件内容示例如下:

# .github/workflows/ci-cd.yml
name: CI/CD // 工作流名称

on: // 触发条件
  push: // 当有代码 push 时触发
    branches: [main, master] // 在 main 或 master 分支 push 代码时触发
  pull_request: // 当有 Pull Request 时触发
    branches: [main, master] // 针对 main 或 master 分支的 Pull Request 触发

jobs: // 定义任务
  build: // 构建任务
    runs-on: ubuntu-latest // 运行环境:最新版 Ubuntu

    steps: // 步骤
      - name: Checkout code // 步骤名称:检出代码
        uses: actions/checkout@v3 // 使用 actions/checkout@v3 这个 Action，用于检出代码

      - name: Setup Node.js // 步骤名称:安装 Node.js
        uses: actions/setup-node@v3 // 使用 actions/setup-node@v3 这个 Action，用于安装 Node.js
        with:
          node-version: 18 // 安装 Node.js 18.x 版本

      - name: Install dependencies // 步骤名称:安装依赖
        run: npm install // 运行 npm install 命令，安装项目依赖

      - name: Compile // 步骤名称:编译代码
        run: npm run compile // 运行 npm run compile 命令，编译 TypeScript 代码 (需要在 package.json 中配置 compile 脚本)

      - name: Test // 步骤名称:运行测试
        run: npm run test // 运行 npm run test 命令，运行测试 (需要在 package.json 中配置 test 脚本)

      - name: Package // 步骤名称:打包扩展
        run: npm run package // 运行 npm run package 命令，打包扩展 (需要在 package.json 中配置 package 脚本，使用 vsce package 命令)

      - name: Upload VSIX package // 步骤名称:上传 VSIX 包 (可选，用于手动发布或后续部署)
        uses: actions/upload-artifact@v3 // 使用 actions/upload-artifact@v3 这个 Action，用于上传文件作为 Artifact
        with:
          name: vsix-package // Artifact 名称
          path: "*.vsix" // 上传所有 .vsix 文件

  publish: // 发布任务 (可选，根据需要配置)
    needs: build // 依赖 build 任务，必须在 build 任务成功后才执行
    runs-on: ubuntu-latest // 运行环境:最新版 Ubuntu
    if: github.ref == 'refs/heads/main' // 只在 main 分支 push 代码时才执行发布 (可以根据需要修改触发条件)

    steps:
      - name: Download VSIX package // 步骤名称:下载 VSIX 包
        uses: actions/download-artifact@v3 // 使用 actions/download-artifact@v3 这个 Action，用于下载 Artifact
        with:
          name: vsix-package // 下载名为 vsix-package 的 Artifact
          path: . // 下载到当前目录

      - name: Install vsce // 步骤名称:安装 vsce
        run: npm install -g vsce // 全局安装 vsce 工具

      - name: Publish extension // 步骤名称:发布扩展
        run: vsce publish --pat ${{ secrets.VSCE_PAT }} // 运行 vsce publish 命令发布扩展，使用 secrets.VSCE_PAT 访问 PAT (Personal Access Token) 密钥
        env:
          VSCE_PAT: ${{ secrets.VSCE_PAT }} // 将 secrets.VSCE_PAT 密钥设置为环境变量 VSCE_PAT

关键配置说明:

  • on: 定义工作流的触发条件。push 和 pull_request 分别表示在代码 push 和 Pull Request 时触发工作流。branches 指定触发工作流的分支。
  • jobs: 定义工作流的任务。build 和 publish 分别表示构建任务和发布任务。needs: build 表示 publish 任务依赖 build 任务，必须在 build 任务成功后才执行。
  • runs-on: 指定任务的运行环境，例如 ubuntu-latest, windows-latest, macos-latest。
  • steps: 定义任务的步骤，每个步骤可以是一个 Action 或一个 Shell 命令。
  • uses: actions/checkout@v3: 使用 actions/checkout@v3 Action 检出代码。
  • uses: actions/setup-node@v3: 使用 actions/setup-node@v3 Action 安装 Node.js。with.node-version 指定 Node.js 版本。
  • run: npm install: 运行 npm install 命令安装依赖。
  • run: npm run compile: 运行 npm run compile 命令编译代码。需要在 package.json 文件中配置 compile 脚本，例如 "compile": "tsc -p ./"。
  • run: npm run test: 运行 npm run test 命令运行测试。需要在 package.json 文件中配置 test 脚本，例如 "test": "node ./out/test/runTest.js"。
  • run: npm run package: 运行 npm run package 命令打包扩展。需要在 package.json 文件中配置 package 脚本，例如 "package": "vsce package"。
  • uses: actions/upload-artifact@v3: 使用 actions/upload-artifact@v3 Action 上传 Artifact (例如打包好的 .vsix 文件)。
  • uses: actions/download-artifact@v3: 使用 actions/download-artifact@v3 Action 下载 Artifact。
  • if: github.ref == 'refs/heads/main': 条件判断，只有当触发工作流的 Git ref 是 refs/heads/main (即 main 分支) 时才执行该任务。
  • secrets.VSCE_PAT: 引用 GitHub Secrets 中存储的名为 VSCE_PAT 的密钥。用于存储 VSCE Personal Access Token，保护敏感信息。

3. 配置 npm scripts

📝 在你的 package.json 文件中，配置以下 npm scripts (如果还没有):

{
  "scripts": {
    "compile": "tsc -p ./", // 编译 TypeScript 代码
    "watch": "tsc -watch -p ./", // 监听模式编译 TypeScript 代码
    "package": "vsce package", // 打包扩展
    "publish": "vsce publish", // 发布扩展 (本地发布，CI/CD 中使用 vsce publish --pat)
    "test": "node ./out/test/runTest.js" // 运行测试
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "@types/glob": "^8.0.0",
    "@types/mocha": "^10.0.0",
    "@types/node": "16.x",
    "@vscode/test-electron": "^2.1.5",
    "glob": "^8.0.3",
    "mocha": "^10.1.1",
    "typescript": "^4.9.3",
    "vsce": "^2.15.0" // 确保安装 vsce 依赖
  }
}

4. 配置 VSCE_PAT 密钥

🔑 要实现自动化发布，需要配置 VSCE Personal Access Token (PAT) 密钥。

  1. 创建 VSCE PAT: 参考 [发布到 VSCode 扩展市场](link to publish article) 文章中创建 PAT 的步骤，创建一个具有 "Marketplace (Publish)" 权限的 PAT。
  2. 添加到 GitHub Secrets: 在你的 GitHub 仓库的 "Settings" -> "Secrets and variables" -> "Actions" 页面，点击 "New repository secret" 按钮，创建一个名为 VSCE_PAT 的 Secret，并将你创建的 PAT 粘贴到 "Value" 输入框中。

5. 提交代码并触发工作流

🚀 将 .github/workflows/ci-cd.yml 文件和 package.json 文件的修改提交到 GitHub 仓库，并 push 到 main 或 master 分支。GitHub Actions 会自动检测到代码变更，并触发 CI/CD 工作流。你可以在 GitHub 仓库的 "Actions" 页面查看工作流的运行状态和日志。

如果一切配置正确，你的 VSCode 扩展将会被自动构建、测试和发布！

总结

🎉 恭喜你，完成了 VSCode 扩展持续集成与持续部署 (CI/CD) 的学习！本文详细介绍了 CI/CD 的概念和价值，以及如何使用 GitHub Actions 为 VSCode 扩展配置 CI/CD 流程，实现自动化构建、测试和发布。掌握 CI/CD，可以极大地提高你的扩展开发效率和代码质量，让你更专注于创造优秀的 VSCode 扩展。在实际开发中，你可以根据项目需求和团队情况，不断优化和完善你的 CI/CD 流程，例如添加更多测试类型、配置更复杂的发布策略、集成代码质量检查工具等。持续探索和实践，让 CI/CD 成为你扩展开发的强大助力！