Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>JSON Schema PeckerNew to Visual Studio Code? Get it now.
JSON Schema Pecker

JSON Schema Pecker

ChrisZ

|
17 installs
| (1) | Free
可视化JSON Schema设计工具
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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。

祝您使用愉快!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft