OpsKitPro logo
OpsKitPro_
返回博客
工具2026-04-227 min

JSON 整理器怎么做:json 的设计、实现、用途和用法

从校验、修复、格式化,到 jq、schema、对比与字段提取,一页完成。

这篇文章按设计、实现和用法完整展开,可以直接往下读。
打开工具
JSON 整理器怎么做:json 的设计、实现、用途和用法
关于正文

这篇文章按完整正文来整理,从背景、实现到用法都可以连起来读。

正文

为什么把 JSON 工具做成工作台

01

JSON 工具最常见的使用场景,是把 API 返回、配置文件、日志片段或者抓到的对象先整理清楚。很多时候你不是想“写 JSON”,而是想“看懂 JSON”。

所以我把它做成一个多模式工作台:输入、修复、格式化、对比、转换和提取都放在同一页里。

参考文件src/app/tools/json/json-client.tsxsrc/app/tools/json/page.tsx

为什么要拆成几个功能块

02

JSON 的处理其实是多个不同任务的组合:有时你要修坏 JSON,有时要格式化,有时要跑 jq,有时要生成 schema。把这些任务硬塞到一个按钮里,用户只会更乱。

所以我把它拆成编辑器、修复、转换、比较、校验、提取几个区块,用户可以按自己的节奏逐步推进。

参考文件src/app/tools/json/components/FormatConverter.tsxsrc/app/tools/json/components/JsonDiffPanel.tsxsrc/app/tools/json/components/SchemaValidator.tsx

实现和用法

03

实现上我把 JSON 修复、格式转换、jq 查询、schema 校验和字段提取都拆成了独立 hook / component。这样每个功能可以单独测试,也方便以后继续加新模式。

用法上最简单的流程是:粘贴 JSON,先看校验状态,再决定是格式化、修复、转 YAML/TOML,还是直接跑 jq。需要对比时再切到 diff,需要抽字段时再进提取器。

参考文件src/app/tools/json/hooks/useFormatConvert.tssrc/app/tools/json/hooks/useJqQuery.tssrc/app/tools/json/hooks/useJsonRepair.tssrc/app/tools/json/hooks/useJsonStorage.ts