从 Wot UI 出发谈 VSCode 插件的自动化发布

不如摸鱼去2025-10-31 13:15

大家好，我是不如摸鱼去，wot-ui 的"主理人"，欢迎来到我的心得分享专栏。

wot-ui 是当下最流行的 uni-app vue3 组件库之一。

在文章 wot-ui 组件库 1.13.0 发布：组件、文档双优化，配套设施更齐全！中我们曾经提到，为了进一步提升开发体验，WotUI 1.13 版本推出了专门的 VSCode 插件，为开发者提供更智能的代码编写支持，今天我们来聊一聊 wot-ui intellisense 以及它是如何实现 VSCode 插件的自动化发布的。

wot-ui intellisense

wot-ui intellisense 是一个为 Wot UI 组件库提供智能代码提示的 VSCode 插件，由 Wot UI 团队成员百友提供，它具备以下特性：

  • 🎯 为 80+ 个 Wot UI 组件提供智能代码补全
  • 🚀 支持组件标签、属性、事件的智能提示
  • 💪 支持短横线式(kebab-case)命名方式
  • 📖 悬停显示组件和属性的详细文档说明
  • 🔍 支持动态属性(:prop)和事件(@event)绑定补全
  • 🛡️ 提供组件属性值验证和错误诊断功能
  • 📄 支持 Vue 和 HTML 文件

这个插件可以让你在使用 wot-ui 时如虎添翼。

为什么要提供 VSCode 插件？

其实当前 wot-ui 对 typescript 的支持其实还不错，在不使用 wot-ui intellisense 插件的情况下，也可以结合 VSCode + Volar 实现代码提示，不过 Volar 经常出现问题，导致代码提示时灵时不灵，所以 wot-ui intellisense 可以解决 Volar 出问题时代码提示失灵的问题。

还有就是 VSCode 插件更加自由，可以做到更多事情，比如跳转到文档地址、展示详细文档介绍等，相对 Volar 来说能够给开发者提供更大的便利。

VSCode 插件自动化发布

开发 wot-ui intellisense 插件时，我们一开始是手动发布的，不仅效率低下，还容易因为人为操作失误导致发布失败。因此，我们使用 GitHub Actions 来实现自动化发布，来解决发布工程化问题。

自动化发布的优势

自动化发布带来了以下显著优势：

  • 一致性保证：每次发布都遵循相同的流程，避免人为差异
  • 效率提升：从代码提交到插件上架全程自动化，节省大量时间
  • 错误减少：自动化测试和验证环节大大降低了发布失败的概率
  • 版本追溯：完整的发布记录便于问题定位和版本回滚
  • 团队协作：多人协作开发时，统一的发布流程减少冲突

创建 VScode 插件发布的 Token

注册并登录到：https://dev.azure.com/，创建对应的组织后按下图操作点击。

点击创建发布 Token，并保存。

GitHub Action

我们计划使用HaaLeo/publish-vscode-extension@v2实现结合GitHub Action发布插件。

GitHub Action 是什么？

GitHub Action是GitHub提供的持续集成和持续部署（CI/CD）平台，它允许开发者自动化软件开发工作流程。简单来说，它可以在特定事件发生时（如代码推送、创建标签等）自动执行预定义的任务。

主要特点：

  • 🔄 事件驱动：可以监听代码推送、Pull Request、Issue创建等GitHub事件
  • 📝 工作流配置：通过YAML文件定义自动化任务
  • 🚀 云端执行：在GitHub提供的虚拟机环境中运行任务
  • 🔧 丰富的生态：拥有大量的预构建Action，可以快速集成各种工具

配置 GitHub Action 实现自动化发布

在 GitHub 项目的 ​Settings -> Secrets 路径下配置命名为 VS_MARKETPLACE_TOKEN 密钥，内容为之前创建的 VSCode 插件发布 Token。

在项目根目录下创建.github文件夹，.github中创建workflows文件夹并创建文件deploy.yml，内容如下：

yml 复制代码 
name: Deploy Extension

on:
  push:
    tags:
      - "*"
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - name: Publish to Visual Studio Marketplace
        uses: HaaLeo/publish-vscode-extension@v2
        with:
          pat: ${{ secrets.VS_MARKETPLACE_TOKEN }}
          registryUrl: https://marketplace.visualstudio.com

然后我们就可以通过推送 tag 或者手动触发的方式来发布插件了！

支持 Trae、Cursor 等

当下已经是 AI 编程的时代了，众多基于 VSCode 的 AI 编程工具层出不穷，而 Visual Studio Marketplace 的使用条款禁止非微软官方分支（如 Trae、Cursor 等）直接调用其插件服务，所以我们可以发布到开放的 VS Code 插件注册中心，例如: OpenVSX。

我们在 https://open-vsx.org/ 注册并登录后获取到其发布 token 后并保存（访问https://open-vsx.org/user-settings/tokens获取）。

然后更新 deploy.yml，补充发布到 openvsx 的逻辑和发布成功信息等

yml 复制代码 
name: Deploy Extension

on:
  push:
    tags:
      - "*"
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Publish to Open VSX Registry
        uses: HaaLeo/publish-vscode-extension@v2
        id: publishToOpenVSX
        with:
          pat: ${{ secrets.OPEN_VSX_TOKEN }}
          skipDuplicate: true
          dependencies: true
        continue-on-error: true

      - name: Publish to Visual Studio Marketplace
        uses: HaaLeo/publish-vscode-extension@v2
        id: publishToVSMarketplace
        with:
          pat: ${{ secrets.VS_MARKETPLACE_TOKEN }}
          registryUrl: https://marketplace.visualstudio.com
          extensionFile: ${{ steps.publishToOpenVSX.outputs.vsixPath }}
          skipDuplicate: true
        continue-on-error: true

      - name: Check deployment results
        run: |
          echo "OpenVSX deployment: ${{ steps.publishToOpenVSX.outcome }}"
          echo "VS Marketplace deployment: ${{ steps.publishToVSMarketplace.outcome }}"
          
          if [[ "${{ steps.publishToOpenVSX.outputs.vsixPath }}" != "" ]]; then
            echo "VSIX file created: ${{ steps.publishToOpenVSX.outputs.vsixPath }}"
          fi
          
          if [[ "${{ steps.publishToOpenVSX.outcome }}" == "failure" && "${{ steps.publishToVSMarketplace.outcome }}" == "failure" ]]; then
            echo "❌ Both deployments failed!"
            exit 1
          elif [[ "${{ steps.publishToOpenVSX.outcome }}" == "failure" ]]; then
            echo "⚠️ OpenVSX deployment failed, but VS Marketplace succeeded"
          elif [[ "${{ steps.publishToVSMarketplace.outcome }}" == "failure" ]]; then
            echo "⚠️ VS Marketplace deployment failed, but OpenVSX succeeded"
          else
            echo "✅ Both deployments succeeded!"
          fi

      - name: Create deployment summary
        if: always()
        run: |
          echo "## 🚀 Extension Deployment Summary" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "| Registry | Status | Details |" >> $GITHUB_STEP_SUMMARY
          echo "|----------|--------|---------|" >> $GITHUB_STEP_SUMMARY
          echo "| 🌐 Open VSX Registry | ${{ steps.publishToOpenVSX.outcome == 'success' && '✅ Success' || '❌ Failed' }} | ${{ steps.publishToOpenVSX.outcome == 'success' && 'Published successfully' || 'Check logs for details' }} |" >> $GITHUB_STEP_SUMMARY
          echo "| 🏪 Visual Studio Marketplace | ${{ steps.publishToVSMarketplace.outcome == 'success' && '✅ Success' || '❌ Failed' }} | ${{ steps.publishToVSMarketplace.outcome == 'success' && 'Published successfully' || 'Check logs for details' }} |" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          if [[ "${{ steps.publishToOpenVSX.outputs.vsixPath }}" != "" ]]; then
            echo "📦 **VSIX File**: \`${{ steps.publishToOpenVSX.outputs.vsixPath }}\`" >> $GITHUB_STEP_SUMMARY
          fi
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "### 📋 Configuration Used" >> $GITHUB_STEP_SUMMARY
          echo "- **Skip Duplicate**: ✅ Enabled" >> $GITHUB_STEP_SUMMARY
          echo "- **Dependencies Check**: ✅ Enabled" >> $GITHUB_STEP_SUMMARY
          echo "- **Shared VSIX**: ✅ Same file used for both registries" >> $GITHUB_STEP_SUMMARY

验证

我们可以在 VSCode 和 Trae 的插件市场中搜索 wot-ui 可以看到以下效果。

集成

目前 wot-starter 已默认集成 wot-ui intellisense 插件，可以参考：https://github.com/wot-ui/wot-starter/blob/f754f8b2e3062840f024dc870ec20d9c63f92576/.vscode/extensions.json#L11

json 复制代码 
// wot-starter/.vscode/extensions.json
{
  "recommendations": [
    "antfu.vite",
    "antfu.iconify",
    "antfu.unocss",
    "vue.volar",
    "dbaeumer.vscode-eslint",
    "editorConfig.editorConfig",
    "uni-helper.uni-helper-vscode",
    "alova.alova-vscode-extension",
    "wot-ui.wot-ui-intellisense"
  ]
}

总结

我们从 wot-ui 实际场景出发，介绍了我们团队开发 VSCode 插件 wot-ui intellisense 并实现自动化发布的完整流程。通过 GitHub Actions 实现 VSCode 插件的自动化发布，涵盖了从创建发布 Token、配置 GitHub Action 工作流，到支持 Visual Studio Marketplace 和 OpenVSX 双平台发布的完整方案,提升了开发效率，展现了现代前端工程化的最佳实践。

帮帮忙

我们 Wot UI 正在参加 Gitee 2025 最受欢迎的开源软件投票活动，你的投票对我们来说非常重要！快来给 Wot UI 投票吧！

投票地址：https://gitee.com/activity/2025opensource?ident=IEVXGS

参考资源

往期精彩

当年偷偷玩小霸王，现在偷偷用 Trae Solo 复刻坦克大战

告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞

uni-app 还在手写请求？alova 帮你全搞定！

uni-app 无法实现全局 Toast？这个方法做到了！

Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身

欢迎评论区沟通、讨论👇👇

相关推荐
小禾青青23 分钟前
我用uniapp开发app用到的uniapp插件
前端·vue.js·uni-app
柳一航34 分钟前
HTML笔记
前端·笔记·html
O***p60438 分钟前
GitLab CI/CD自动化部署实践
ci/cd·自动化·gitlab
Sirius Wu1 小时前
开源训练框架：MS-SWIFT详解
开发语言·人工智能·语言模型·开源·aigc·swift
艾小码1 小时前
为什么你的Vue组件总出bug？可能是少了这份测试指南
前端·vue.js·debug
IT_陈寒1 小时前
Redis 性能提升30%的7个关键优化策略，90%开发者都忽略了第3点！
前端·人工智能·后端
辞忧*1 小时前
基于element-Plus的el-tooltip封装公共虚拟引用组件
前端·vue.js
by__csdn1 小时前
Electron入门：跨平台桌面开发指南
前端·javascript·vue.js·typescript·electron·html
Nan_Shu_6144 小时前
学习：ES6（2）
前端·学习·es6
热门推荐
01GitHub 镜像站点02今天 Cloudflare 全球事故，连 GPT 和你的网站都一起“掉线”了03UV安装并设置国内源04BongoCat - 跨平台键盘猫动画工具05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南08全球最强模型Grok4，国内已可免费使用！（附教程）09Valdi：Snapchat 开源的新一代跨平台 UI 框架10Labelme从安装到标注：零基础完整指南