JSON Schema Pecker
一款专为VS Code设计的高效JSON Schema可视化编辑工具,让JSON Schema的创建、编辑和管理变得简单直观。
功能特性
JSON Schema Pecker拥有以下核心功能:
- 🔍 直观的可视化界面: 树状结构清晰展示Schema层级关系
- 🛠 便捷的内联编辑器: 在VS Code中直接修改Schema属性
- ✅ 类型验证规则: 为不同数据类型提供相应的验证选项
- 🔄 实时预览: 编辑时即时查看Schema变化
- 📝 完整编辑功能: 支持添加、编辑、删除Schema属性
- 🧩 丰富的数据类型支持: 支持字符串、数字、布尔、对象、数组等全部JSON数据类型
- 📊 嵌套结构支持: 完美处理复杂的嵌套对象和数组
安装指南
方法一:通过VS Code扩展市场
- 打开VS Code
- 进入扩展视图(快捷键:
Ctrl+Shift+X 或 Cmd+Shift+X )
- 搜索 "JSON Schema Pecker"
- 点击 "安装" 按钮
方法二:从VSIX文件安装
- 下载最新的
.vsix 文件
- 打开VS Code
- 进入扩展视图
- 点击 "..." 更多操作按钮
- 选择 "从VSIX安装..." 并选择下载的文件
使用方法
打开JSON Schema可视化编辑器
有多种方式可以打开JSON Schema可视化编辑器:
- 在JSON文件中右键点击,选择「可视化编辑当前 JSON Schema」
- 在资源管理器中右键点击JSON文件,选择「打开 JSON Schema 可视化编辑器」
- 通过命令面板(Ctrl+Shift+P或Cmd+Shift+P),输入「JSON Schema: 打开可视化编辑器」
- 在JSON Schema资源管理器中点击Schema文件
编辑属性
- 在左侧树状视图中选择一个属性进行编辑
- 在右侧的编辑面板中修改属性的各项设置
- 点击「保存属性」按钮保存更改
添加新属性
- 点击相应位置的「添加属性」或「添加子属性」按钮
- 在编辑面板中输入新属性的名称和设置
- 点击「保存属性」按钮创建新属性
保存Schema
点击工具栏上的「保存」按钮将Schema保存到文件中。
安装要求
扩展配置
此扩展不需要特殊配置即可使用。
已知问题
版本历史
0.1.0
- 代码重构,提高稳定性和可维护性
- 优化模块化架构
- 增强Schema验证功能
- 改进用户界面交互体验
0.0.1
- 初始版本发布
- 基本的JSON Schema可视化和编辑功能
- 支持属性的添加、编辑和删除
- 支持验证规则的设置
开发信息
项目架构
src/
├─ extension.js # 扩展主入口文件
├─ providers/ # VS Code扩展提供者
│ └─ schemaExplorerProvider.js # JSON Schema资源管理器
├─ services/ # 服务层
│ └─ schemaService.js # Schema相关操作的业务服务
├─ utils/ # 工具函数
│ ├─ resourceUtils.js # 资源路径处理工具
│ ├─ schemaUtils.js # Schema操作工具
│ └─ schemaValidator.js # Schema验证工具(已整合属性名验证)
└─ webview/ # WebView相关
├─ controllers/ # 控制器
│ └─ messageController.js # 消息通信控制器
├─ panels/ # WebView面板
│ └─ schemaVisualizerPanel.js# Schema可视化面板
└─ views/ # 视图相关
├─ templates/ # HTML模板
│ └─ webview.html # WebView主模板
├─ css/ # 样式文件
│ └─ schemaVisualizer.css# 主样式文件
└─ js/ # 前端脚本
├─ main.js # 主控制器和事件协调
├─ schemaEditor.js # Schema属性编辑器
└─ schemaRenderer.js # Schema树视图渲染器
架构设计
本项目采用模块化设计,每个组件都有明确的职责:
- 服务层 负责协调业务逻辑,集中处理Schema的加载、验证和保存
- 控制器 管理组件之间的通信,针对WebView和扩展之间的消息进行分发处理
- 面板 负责WebView的生命周期管理,对其创建、显示和销毁进行处理
- 工具类 提供工具函数,如Schema验证、资源路径处理等
开发工作流程
- 使用
npm install 安装依赖
- 使用
npm run watch 启动监视模式
- 按F5在调试模式下启动扩展
联系方式
如果你发现任何问题或有任何建议,请通过GitHub项目页面提交issue。
祝您使用愉快!
| |