JSON Schema Pecker

一款专为VS Code设计的高效JSON Schema可视化编辑工具，让JSON Schema的创建、编辑和管理变得简单直观。

功能特性

JSON Schema Pecker拥有以下核心功能：

• 🔍 直观的可视化界面: 树状结构清晰展示Schema层级关系
• 🛠 便捷的内联编辑器: 在VS Code中直接修改Schema属性
• ✅ 类型验证规则: 为不同数据类型提供相应的验证选项
• 🔄 实时预览: 编辑时即时查看Schema变化
• 📝 完整编辑功能: 支持添加、编辑、删除Schema属性
• 🧩 丰富的数据类型支持: 支持字符串、数字、布尔、对象、数组等全部JSON数据类型
• 📊 嵌套结构支持: 完美处理复杂的嵌套对象和数组

安装指南

方法一：通过VS Code扩展市场

1. 打开VS Code
2. 进入扩展视图（快捷键：Ctrl+Shift+X 或 Cmd+Shift+X）
3. 搜索 "JSON Schema Pecker"
4. 点击 "安装" 按钮

方法二：从VSIX文件安装

1. 下载最新的 .vsix 文件
2. 打开VS Code
3. 进入扩展视图
4. 点击 "..." 更多操作按钮
5. 选择 "从VSIX安装..." 并选择下载的文件

使用方法

打开JSON Schema可视化编辑器

有多种方式可以打开JSON Schema可视化编辑器：

1. 在JSON文件中右键点击，选择「可视化编辑当前 JSON Schema」
2. 在资源管理器中右键点击JSON文件，选择「打开 JSON Schema 可视化编辑器」
3. 通过命令面板(Ctrl+Shift+P或Cmd+Shift+P)，输入「JSON Schema: 打开可视化编辑器」
4. 在JSON Schema资源管理器中点击Schema文件

编辑属性

1. 在左侧树状视图中选择一个属性进行编辑
2. 在右侧的编辑面板中修改属性的各项设置
3. 点击「保存属性」按钮保存更改

添加新属性

1. 点击相应位置的「添加属性」或「添加子属性」按钮
2. 在编辑面板中输入新属性的名称和设置
3. 点击「保存属性」按钮创建新属性

保存Schema

点击工具栏上的「保存」按钮将Schema保存到文件中。

安装要求

• VSCode 1.80.0 或更高版本

扩展配置

此扩展不需要特殊配置即可使用。

已知问题

• 暂无已知问题

版本历史

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验证、资源路径处理等

开发工作流程

1. 使用 npm install 安装依赖
2. 使用 npm run watch 启动监视模式
3. 按F5在调试模式下启动扩展

联系方式

如果你发现任何问题或有任何建议，请通过GitHub项目页面提交issue。

祝您使用愉快！