JSON 美化器：格式化和美化指南

# JSON 美化器：格式化和美化指南

JSON 美化器（也称为格式化器或美化打印机）将紧凑的 JSON 转换为可读的、缩进的格式。这对于调试、代码审查和文档非常有价值。

什么是 JSON 美化器？

JSON 美化器是将压缩的、难以阅读的 JSON 转换为格式化的、易于阅读的版本的工具。

之前（最小化）

{"users":[{"name":"张三","age":30},{"name":"李四","age":25}],"total":2}

字节数： 66

之后（美化）

{
  "users": [
    {
      "name": "张三",
      "age": 30
    },
    {
      "name": "李四",
      "age": 25
    }
  ],
  "total": 2
}

字节数： 125（用于可读性）

为什么美化 JSON？

1. 可读性

美化的 JSON 容易理解结构和内容。

2. 调试

快速找到错误和缺失的字段。

3. 代码审查

更清晰的 diff 以显示更改。

4. 文档

为示例提供清晰的格式。

5. 学习

理解复杂的数据结构。

在线美化器

Big JSON Viewer

URL： bigjson.online 步骤：

访问 bigjson.online

粘贴或上传 JSON

自动美化

复制或下载

特点：

• 处理超过 100MB 的文件
• 树状视图导航
• 搜索和过滤
• 通过 URL 共享

JSONLint

URL： jsonlint.com 步骤：

访问 jsonlint.com

粘贴 JSON

点击"验证 JSON"

获得美化的输出

特点：

• 验证和格式化
• 错误检测
• 实时更新
• 简单界面

JSON Formatter

URL： jsonformatter.org 特点：

• 即时格式化
• 自动验证
• 自定义选项
• 批量处理

JSON Editor Online

URL： jsoneditoronline.org 特点：

• 可视化编辑
• 树和文本视图
• 格式化选项
• 验证

命令行工具

jq（推荐）

安装：

# macOS
brew install jq

# Ubuntu/Debian
sudo apt-get install jq

# Windows (Scoop)
scoop install jq

基本美化：

# 格式化文件
jq '.' input.json

# 保存到新文件
jq '.' input.json > output.json

# 彩色输出
jq -C '.' input.json

# 自定义缩进
jq --indent 2 '.' input.json
jq --indent 4 '.' input.json

# 排序键
jq -S '.' input.json

# 压缩（最小化）
jq -c '.' input.json

# 一行显示
jq -M '.' input.json

处理 API 响应：

# 直接从 API 美化
curl https://api.example.com/users | jq '.'

# 提取和美化
curl https://api.example.com/users | jq '.users | sort_by(.name)'

Python

内置模块：

# 美化文件
python3 -m json.tool input.json

# 保存输出
python3 -m json.tool input.json > output.json

# 排序键
python3 -m json.tool --sort-keys input.json

# 自定义缩进
python3 -c "import json; print(json.dumps(json.load(open('input.json')), indent=4))"

脚本方法：

import json

# 读取 JSON
with open('input.json', 'r', encoding='utf-8') as f:
    data = json.load(f)

# 美化并保存
with open('output.json', 'w', encoding='utf-8') as f:
    json.dump(data, f, indent=2, ensure_ascii=False)

print("已美化！")

Node.js

命令行：

# 一行美化
node -e "console.log(JSON.stringify(require('./input.json'), null, 2))"

# 用 npm 脚本
npm install -g prettyjson
prettyjson input.json

脚本方法：

const fs = require('fs');

// 读取 JSON
const data = JSON.parse(fs.readFileSync('input.json', 'utf8'));

// 美化
const pretty = JSON.stringify(data, null, 2);

// 保存
fs.writeFileSync('output.json', pretty);

console.log('已美化！');

代码编辑器

VS Code

方法 1：快捷键

• Windows/Linux：Shift + Alt + F
• macOS：Shift + Option + F

方法 2：命令面板

按 Ctrl+Shift+P

输入"Format Document"

按 Enter

方法 3：Prettier 扩展

# 安装扩展
code --install-extension esbenp.prettier-vscode

# 配置 settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Sublime Text

方法 1：Pretty JSON 插件

Ctrl+Shift+P → Package Control: Install Package
搜索 "Pretty JSON"

使用：

Ctrl+Alt+J (Windows/Linux)
Cmd+Ctrl+J (Mac)

方法 2：快速键盘快捷键

编辑 → 首选项 → 按键绑定

IntelliJ / WebStorm

快捷键：

• Windows/Linux：Ctrl + Alt + L
• macOS：Cmd + Option + L

或：

• 右键 → Reformat Code
• Code → Reformat Code

Prettier（现代工具）

安装：

npm install --save-dev prettier

配置（.prettierrc）：

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5"
}

使用：

# 美化所有 JSON
npx prettier --write "*/.json"

# 检查（不修改）
npx prettier --check "*/.json"

# 格式化特定文件
npx prettier --write data.json

美化选项

缩进样式

2 空格（推荐）：

{
  "name": "张三",
  "age": 30
}

4 空格：

{
    "name": "张三",
    "age": 30
}

制表符：

{
	"name": "张三",
	"age": 30
}

排序键

默认顺序：

{
  "z": 1,
  "a": 2,
  "m": 3
}

排序后：

{
  "a": 2,
  "m": 3,
  "z": 1
}

jq -S '.' file.json  # 排序

美化 vs 最小化

美化（开发）

{
  "name": "应用",
  "version": "1.0.0"
}

优点：

• 易读
• 易于调试
• 易于审查

缺点：

• 文件更大

最小化（生产）

{"name":"应用","version":"1.0.0"}

优点：

• 文件更小
• 传输更快
• 节省带宽

缺点：

• 难以阅读

最小化命令：

# jq
jq -c '.' input.json > output.json

# Python
python3 -c "import json; print(json.dumps(json.load(open('input.json'))))"

# Node.js
node -e "console.log(JSON.stringify(require('./input.json')))"

处理特殊情况

带注释的 JSON（JSON5）

某些工具支持带注释的 JSON：

{
  // 这是注释
  "name": "应用",
  "version": "1.0.0"  // 版本号
}

美化 JSON5：

npm install -g json5
json5 -o output.json input.json5

超大文件

对于超过 100MB 的文件：

# 使用 jq 流式处理
jq -c '.' huge.json > minified.json

# 或 Big JSON Viewer（无内存问题）
# 访问 bigjson.online

嵌套 JSON

import json
from pprint import pprint

# 漂亮打印嵌套 JSON
data = json.load(open('input.json'))
pprint(data)

批量美化

多个文件

使用 shell 脚本：

#!/bin/bash
for file in .json; do

  jq '.' "$file" > "${file%.json}_formatted.json"
done

使用 Python：

import json
import os
from pathlib import Path

json_dir = './'
for json_file in Path(json_dir).glob('.json'):
    with open(json_file) as f:
        data = json.load(f)

    formatted = json.dumps(data, indent=2, ensure_ascii=False)

    with open(f"{json_file.stem}_formatted.json", 'w', encoding='utf-8') as f:
        f.write(formatted)

自动化

Git 钩子

在提交前自动格式化 JSON：

pre-commit 钩子：

#!/bin/bash
for file in $(git diff --cached --name-only .json); do

  jq '.' "$file" > "$file.tmp"
  mv "$file.tmp" "$file"
  git add "$file"
done

npm 脚本

{
  "scripts": {
    "format": "prettier --write '/.json'",
    "format:check": "prettier --check '*/.json'"
  }
}

使用：

npm run format

最佳实践

1. 一致的格式化

使用相同的工具和设置整个项目。

2. 开发时美化

jq '.' file.json > file.json

3. 生产时最小化

jq -c '.' file.json > file.json

4. 验证后美化

python3 -m json.tool input.json > output.json && echo "有效！"

5. 使用版本控制

跟踪格式化更改以查看真实差异。

工具比较

| 工具 | 速度 | 功能 | 易用性 | 最适合 |

|------|------|------|--------|--------|

| jq | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | 命令行、强大 |

| Python | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 脚本、简单 |

| VS Code | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | IDE 集成 |

| Prettier | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 项目标准 |

| 在线工具 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 快速任务 |

结论

JSON 美化是数据处理的基本技能。无论您是调试 API 响应、审查代码还是记录 API，正确的美化工具都能节省时间和挫折感。

快速建议

• 快速一次性： Big JSON Viewer 或 JSONLint
• 开发： VS Code + Prettier
• 命令行： jq
• 脚本： Python 或 Node.js
• 项目： Prettier + npm 脚本

现在您已准备好美化、格式化和优化任何 JSON！选择适合您工作流程的工具并提高您的生产力。