# vscode-json-editor

**Repository Path**: masterkgw/vscode-json-editor

## Basic Information

- **Project Name**: vscode-json-editor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-09
- **Last Updated**: 2026-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VSCode JSON Editor

一个功能强大的 VSCode JSON 编辑器插件，提供多模式编辑体验，包括文本模式、树形模式、表格模式和预览模式。

## 功能特性

### 多模式编辑
- **文本模式**: 纯文本编辑，支持语法高亮和格式化
- **树形模式**: 可视化树状结构，支持折叠/展开、拖拽排序
- **表格模式**: 类 Excel 的表格视图，适合编辑数组数据
- **预览模式**: 只读模式，优化大文件性能

### 核心功能
- ✅ 实时 JSON 验证和错误提示
- ✅ 格式化（美化）和压缩
- ✅ 一键全部展开/折叠（树形模式）
- ✅ 搜索和过滤
- ✅ 文件对比
- ✅ 可配置选项

## 安装

### 开发安装
1. 克隆或下载本项目
2. 进入项目目录: `cd vscode-json-editor`
3. 安装依赖: `npm install`
4. 编译: `npm run compile`
5. 按 F5 启动调试，在新的 VSCode 窗口中测试插件

### 打包安装
```bash
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