在 VS Code 中打开 Metadata Debugger,直接扫描本地低代码物料项目,校验 A2UI / Metadata JSON,并预览运行时渲染结果。
核心能力
- 内置调试器页面,无需额外启动前端服务。
- 自动使用当前 workspace 作为本地物料目录,也支持手动切换目录。
- 扫描本地
frontend/*/meta.json 物料,并生成 local-meta.json 供调试器消费。
- 使用目标物料项目自己的编译依赖打包本地物料,插件本身不内置编译链。
- 支持 A2UI 输入、Metadata 输入、校验结果、Metadata 输出和渲染预览。
- Metadata 编辑器支持 JSON 折叠、语法校验和本地物料
type 补全。
- 支持配置 BFF 地址、请求头、服务分组和已有物料资源服务。
快速开始
- 打开一个本地物料项目。
- 点击 Activity Bar 中的 Metadata Debugger 图标。
- 点击 打开调试器。
- 如需切换物料目录,点击侧边栏或页面顶部的 切换目录。
如果目标项目还没有安装依赖,请先在目标项目中执行:
npm install
也可以使用项目自己的包管理器,例如 pnpm install 或 yarn install。
物料项目要求
插件会从目标目录解析编译依赖,因此目标项目需要能正常本地构建 Vue 2 物料。
默认支持的入口文件:
index.js
index.ts
index.tsx
index.vue
物料结构示例:
frontend/
lowcode_alert/
meta.json
index.js
扫描规则:
meta.json 中需要提供有效的 basic.type。
- 编译输出以
basic.type 作为 UMD library 名称。
vue 和 axios 会作为 external。
- 如果目标项目缺少
webpack、babel-loader、vue-loader 等依赖,插件会提示需要在目标项目安装。
使用已有物料服务
如果目标项目已经启动了物料资源服务,可以配置:
{
"a2uiMetadataDebugger.materialResourceBaseUrl": "http://127.0.0.1:4011"
}
配置后插件只扫描 meta.json,不再本地编译物料,调试器会从该地址加载物料资源。
常用配置
{
"a2uiMetadataDebugger.bffUrl": "https://webapi.tsign.cn/epaas-bff",
"a2uiMetadataDebugger.groupId": "",
"a2uiMetadataDebugger.debuggerUrl": "",
"a2uiMetadataDebugger.materialResourceBaseUrl": ""
}
配置说明:
bffUrl:Metadata preload 和远程物料兜底使用的 BFF 地址。
groupId:可选的 X-Tsign-Service-Group。
debuggerUrl:调试源码时使用的外部 debugger 页面地址;留空时使用插件内置页面。
materialResourceBaseUrl:已有本地物料资源服务地址。
命令
Metadata Debugger: Open
Metadata Debugger: Select Local Material Directory
Metadata Debugger: Rescan Local Materials
本地开发
npm install
npm run compile
在 Extension Development Host 中执行:
Metadata Debugger: Open