从 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 分钟瘦身

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

相关推荐
IT_陈寒7 小时前
Python开发者必看：这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
字节跳动开源7 小时前
AIO Sandbox：为 AI Agent 打造的一体化、可定制的沙箱环境
开源·agent
豆苗学前端7 小时前
写给女朋友的第一封信，测试方法概论
前端·后端·设计模式
半桶水专家7 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞7 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破：cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手7 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
黑金IT7 小时前
Selenium Wire 网络拦截实现方案
自动化
袁煦丞8 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS：cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
ColderYY8 小时前
DrissionPage自动化
python·自动化
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）