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