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

为了进一步提升开发体验，WotUI 1.13 版本推出了专门的 VSCode 插件，为开发者提供更智能的代码编写支持，今天我们来聊一聊 wot-ui intellisense 以及它是如何实现 VSCode 插件的自动化发布的。

![](https://developer.qcloudimg.com/http-save/yehe-2901152/989eb8215c0ab1a17a86be9e486fb40e.png)


## 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/，创建对应的组织后按下图操作点击。

![](https://developer.qcloudimg.com/http-save/yehe-2901152/d5ed0d9e2ebf90636b164439ed5f1612.png)

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

![](https://developer.qcloudimg.com/http-save/yehe-2901152/883f2bed5af1ff2c3a7beb62ab73b132.png)

## GitHub Action
我们计划使用[HaaLeo/publish-vscode-extension@v2](https://github.com/HaaLeo/publish-vscode-extension)实现结合`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 或者手动触发的方式来发布插件了！

![](https://developer.qcloudimg.com/http-save/yehe-2901152/f1b276c97146d1d461886995d4f05c88.png)

## 支持 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` 可以看到以下效果。

![](https://developer.qcloudimg.com/http-save/yehe-2901152/966e950da3baeba3b1c2c5c70f31f6e8.png)

![](https://developer.qcloudimg.com/http-save/yehe-2901152/b8886e405ca06c3c196f9032dab6ee6d.png)

## 总结

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

## 参考资源

- 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


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

为了进一步提升开发体验，WotUI 1.13 版本推出了专门的 VSCode 插件，为开发者提供更智能的代码编写支持，今天我们来聊一聊 wot-ui intellisense 以及它是如何实现 VSCode 插件的自动化发布的。

谈 VSCode 插件的自动化发布

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

前端

后端

开发工具

WotUI推出VSCode智能插件wot-uiintellisense，支持80+组件智能补全、属性验证和文档跳转。通过GitHub Actions实现自动化发布，支持Visual Studio Marketplace和OpenVSX双平台部署，提升开发效率。

软件开发

虚拟机

GitHub

coding

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

谈 VSCode 插件的自动化发布-腾讯云开发者社区-腾讯云

谈 VSCode 插件的自动化发布

谈 VSCode 插件的自动化发布

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐