VSCode JSON Editor
一个功能强大的 VSCode JSON 编辑器插件，提供多模式编辑体验，包括文本模式、树形模式、表格模式和预览模式。
功能特性
多模式编辑
- 文本模式: 纯文本编辑，支持语法高亮和格式化
- 树形模式: 可视化树状结构，支持折叠/展开、拖拽排序
- 表格模式: 类 Excel 的表格视图，适合编辑数组数据
- 预览模式: 只读模式，优化大文件性能
核心功能
- ✅ 实时 JSON 验证和错误提示
- ✅ 格式化（美化）和压缩
- ✅ 一键全部展开/折叠（树形模式）
- ✅ 搜索和过滤
- ✅ 文件对比
- ✅ 可配置选项
安装
开发安装
- 克隆或下载本项目
- 进入项目目录:
cd vscode-json-editor
- 安装依赖:
npm install
- 编译:
npm run compile
- 按 F5 启动调试，在新的 VSCode 窗口中测试插件
打包安装
npm install
npm run compile
npm run package
然后在 VSCode 中安装生成的 .vsix 文件。
使用方法
打开 JSON Editor
- 在 JSON 文件上右键 → "Open in JSON Editor"
- 或使用快捷键
Ctrl+Shift+J (Mac: Cmd+Shift+J)
模式切换
在编辑器顶部的工具栏中点击对应的模式按钮：
- Text: 文本编辑模式
- Tree: 树形编辑模式
- Table: 表格编辑模式
- Preview: 预览模式
树形模式操作
- 展开/折叠节点: 点击节点左侧的 ▶/▼ 图标
- 全部展开: 点击工具栏的 "⇓ Expand All" 按钮或按
Ctrl+Shift++
- 全部折叠: 点击工具栏的 "⇐ Collapse All" 按钮或按
Ctrl+Shift+-
- 选中节点: 点击节点内容
格式化操作
- 格式化: 点击 "Format" 按钮或按
Ctrl+Shift+I
- 压缩: 点击 "Compact" 按钮
配置选项
在 VSCode 设置中搜索 "JSON Editor" 进行配置：
| 配置项 |
类型 |
默认值 |
说明 |
jsonEditor.defaultMode |
string |
"text" |
默认编辑器模式 |
jsonEditor.format.indentSize |
number |
2 |
格式化缩进空格数 |
jsonEditor.tree.expandLevel |
number |
2 |
树形模式默认展开层级 |
jsonEditor.validation.enabled |
boolean |
true |
是否启用验证 |
jsonEditor.autoSave |
boolean |
false |
是否自动保存 |
快捷键
| 快捷键 |
命令 |
Ctrl+Shift+J |
在 JSON Editor 中打开 |
Ctrl+Shift+I |
格式化 JSON |
Ctrl+Shift++ |
全部展开（树形模式） |
Ctrl+Shift+- |
全部折叠（树形模式） |
项目结构
vscode-json-editor/
├── media/ # Webview 前端资源
│ ├── webview.css # 样式文件
│ └── webview.js # 前端逻辑
├── src/
│ ├── extension.ts # 插件入口
│ ├── commands/ # 命令实现
│ ├── providers/ # 编辑器提供器
│ └── utils/ # 工具函数
├── package.json # 插件清单
└── tsconfig.json # TypeScript 配置
开发计划
- [x] 基础框架搭建
- [x] 多模式编辑器（文本/树形/表格/预览）
- [x] 格式化与验证
- [x] 树形展开/折叠
- [ ] JMESPath 查询支持
- [ ] JSON Schema 验证
- [ ] JSON 对比功能增强
- [ ] 大文件优化
技术栈
- TypeScript
- VSCode Extension API
- Webview API
License
MIT
| |
