当前位置： 首页 > news >正文

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

news 2025/10/31 8:11:05

大家好，我是不如摸鱼去，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，内容如下：

name: Deploy Extensionon:push:tags:- "*"workflow_dispatch:jobs:deploy:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4- uses: actions/setup-node@v4with:node-version: 20- run: npm ci- name: Publish to Visual Studio Marketplaceuses: HaaLeo/publish-vscode-extension@v2with: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 的逻辑和发布成功信息等

name: Deploy Extensionon:push:tags:- "*"workflow_dispatch:jobs:deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v4- name: Setup Node.jsuses: actions/setup-node@v4with:node-version: 20cache: 'npm'- name: Install dependenciesrun: npm ci- name: Publish to Open VSX Registryuses: HaaLeo/publish-vscode-extension@v2id: publishToOpenVSXwith:pat: ${{ secrets.OPEN_VSX_TOKEN }}skipDuplicate: truedependencies: truecontinue-on-error: true- name: Publish to Visual Studio Marketplaceuses: HaaLeo/publish-vscode-extension@v2id: publishToVSMarketplacewith:pat: ${{ secrets.VS_MARKETPLACE_TOKEN }}registryUrl: https://marketplace.visualstudio.comextensionFile: ${{ steps.publishToOpenVSX.outputs.vsixPath }}skipDuplicate: truecontinue-on-error: true- name: Check deployment resultsrun: |echo "OpenVSX deployment: ${{ steps.publishToOpenVSX.outcome }}"echo "VS Marketplace deployment: ${{ steps.publishToVSMarketplace.outcome }}"if [[ "${{ steps.publishToOpenVSX.outputs.vsixPath }}" != "" ]]; thenecho "VSIX file created: ${{ steps.publishToOpenVSX.outputs.vsixPath }}"fiif [[ "${{ steps.publishToOpenVSX.outcome }}" == "failure" && "${{ steps.publishToVSMarketplace.outcome }}" == "failure" ]]; thenecho "❌ Both deployments failed!"exit 1elif [[ "${{ steps.publishToOpenVSX.outcome }}" == "failure" ]]; thenecho "⚠️ OpenVSX deployment failed, but VS Marketplace succeeded"elif [[ "${{ steps.publishToVSMarketplace.outcome }}" == "failure" ]]; thenecho "⚠️ VS Marketplace deployment failed, but OpenVSX succeeded"elseecho "✅ Both deployments succeeded!"fi- name: Create deployment summaryif: always()run: |echo "## 🚀 Extension Deployment Summary" >> $GITHUB_STEP_SUMMARYecho "" >> $GITHUB_STEP_SUMMARYecho "| Registry | Status | Details |" >> $GITHUB_STEP_SUMMARYecho "|----------|--------|---------|" >> $GITHUB_STEP_SUMMARYecho "| 🌐 Open VSX Registry | ${{ steps.publishToOpenVSX.outcome == 'success' && '✅ Success' || '❌ Failed' }} | ${{ steps.publishToOpenVSX.outcome == 'success' && 'Published successfully' || 'Check logs for details' }} |" >> $GITHUB_STEP_SUMMARYecho "| 🏪 Visual Studio Marketplace | ${{ steps.publishToVSMarketplace.outcome == 'success' && '✅ Success' || '❌ Failed' }} | ${{ steps.publishToVSMarketplace.outcome == 'success' && 'Published successfully' || 'Check logs for details' }} |" >> $GITHUB_STEP_SUMMARYecho "" >> $GITHUB_STEP_SUMMARYif [[ "${{ steps.publishToOpenVSX.outputs.vsixPath }}" != "" ]]; thenecho "📦 **VSIX File**: \`${{ steps.publishToOpenVSX.outputs.vsixPath }}\`" >> $GITHUB_STEP_SUMMARYfiecho "" >> $GITHUB_STEP_SUMMARYecho "### 📋 Configuration Used" >> $GITHUB_STEP_SUMMARYecho "- **Skip Duplicate**: ✅ Enabled" >> $GITHUB_STEP_SUMMARYecho "- **Dependencies Check**: ✅ Enabled" >> $GITHUB_STEP_SUMMARYecho "- **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

// 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

参考资源

  • wot-ui: https://wot-ui.cn/
  • wot-ui-intellisense: https://github.com/wot-ui/wot-ui-intellisense
  • HaaLeo/publish-vscode-extension: https://github.com/HaaLeo/publish-vscode-extension
  • wot-starter: https://starter.wot-ui.cn/

往期精彩

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

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

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

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

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

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

http://www.dtcms.com/a/548891.html

相关文章：

  • Rust专项——用 Weak 打破引用环：树与图结构实战
  • c#调Lua返回个字符串
  • 单元测试(JUnit、Mockito、PowerMock )
  • 不只是语法糖：解构作为 Rust 安全与清晰度的基石
  • 企业微信消息群发助手（企业微信自建应用）winform.netcore实现（详细配置）
  • 基于Vue的教育学习网站04y8688l（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
  • 移动端网站生成器中国电商平台排行榜前100
  • Excel正则表达式.获取字符
  • K8s 资源管理与操作
  • 如何在 Azure 虚拟机上部署 Elasticsearch
  • Go切片的赋值
  • Go语言设计模式：原型模式详解
  • 泉州网站建设-泉州网站建设石家庄网站建设招聘
  • [MySQL]表——权限控制
  • 把AI“灌”进奶瓶：1KB决策树让婴儿温奶器自己学会「恒温+计时」
  • 视频网站怎么做移动广告联盟
  • 高速DIC技术用于无人机旋翼动态变形与轨迹姿态分析
  • Node.js环境变量配置
  • Docker 部署 Node.js + Playwright 项目，实现浏览器截图、打印和下载
  • 所有权与解构：一次把“拆”与“留”写进类型系统的旅程 ——从语法糖到零拷贝 AST
  • 基于ASM1042通信接口芯片的两轮车充电机性能优化研究
  • hadoop之MapReduce的map工作流程
  • 民治做网站公司门户网站开发要求
  • 设计师网站欣赏企业官网模板图下载
  • 图像与视频页面的数据提取：从OCR到关键帧抽取的一场“视觉接管”
  • 常州城乡建设学校网站上海自动seo
  • Android15 Camera系统调试操作
  • 建模工具Enterprise Architect：敏捷开发中的架构治理与迭代适配
  • [HDiffPatch] 补丁算法 | `patch_decompress_with_cache` | `getStreamClip` | RLE游程编码
  • 【C++ vector 深度解析】：动态数组的使用与底层原理实战