VsCode插件开发体验

AKing
180 阅读2分钟

背景

在大部分后台业务系统中都是增删改查的Table页面，但是基于综合考虑，不采用低代码等配置化的模式，还是每个页面进行独立的代码开发，这样更能长期可靠的维护性，和稳定性。

但是同样存在几个痛点：

  1. 虽然每个页面具有很多相似的功能，无论是复制一个全部全部功能的模版，还是部分功能的模版，都需要手动增加或者删除代码。
  2. 表格字段很多，并且很多是图片，手动输入和修改，不仅耗时而且容易打错，而且不同 table columns 类型往往需要配置不同的 format 形式。

可行性方案

既然目的是为了通过配置来生成初始化的代码，解决的问题就是创建模版的时候只需要我们想要的功能，以及动态生成的table columns 的配置等

  1. 通过自定义编辑插件，根据原型和需求，通过一套配置来生成所需要的代码
  2. 并且通过截图来初始化 table 的 Colunms 配置
  3. 有一定的智能判断, 给不同的字段默认覆不同的渲染函数
  4. 拥有二次编辑能力，可以手动修改配置
  5. 根据配置，和模版文件，生成页面，生成路由

技术设计

  • 通过 vscde 插件 Api 注册插件，并且配置触发条件
  • 通过 Webview 可以开发复杂的配置界面
  • 通过 node.js 可以处理文件流

20241119151033.jpg

核心代码

  1. 只有通过打开 Webview 的形式才可进行比较复杂的配置编辑，所以 Webview 和 VsCode 的通信比较重要，双向通信通过 postMessage API

  2. VsCode打开 Webview 并且向 Webview 发送消息image.png

  3. Webview 向 插件发送消息

image.png

  1. 根据读区到的配置进行文件处理，复制文件，正则匹配修改文件内容，等等

image.png

打包发布

打包

  1. 清空 dist
  2. 打包Webview 到dist
  3. 再拷贝模版到 dist
  4. 打包插件到 dist

npm run build:webview && npm run check-types && npm run lint && node esbuild.js --production

发布

  1. 注册账号并创建 Azure DevOps 组织
  2. 获取 Personal Access Token
  3. 修改 pacakge.json 中的 name displayName description publisher version icon repository 等配置
  4. 修改 README.md CHANGELOG.md
  5. 安装 vsce
  6. 登录 vsce 并发布插件

参考文档

vscode 插件开发：

webview 相关：

node 相关：

avatar
文章
阅读
粉丝