JSON Beautifier: Руководство по красивому форматированию данных

# JSON Beautifier: Руководство по красивому форматированию данных

JSON Beautifier (также известный как JSON Prettifier или JSON Formatter) — это инструмент для автоматического форматирования JSON данных в читаемый вид. В этом руководстве мы рассмотрим все аспекты использования beautifier'ов для улучшения работы с JSON.

Что такое JSON Beautifier?

JSON Beautifier преобразует компактный, сжатый JSON в форматированный, структурированный вид с правильными отступами и переносами строк.

До beautify (минифицированный)

{"пользователь":{"имя":"Иван Петров","возраст":30,"контакты":{"email":"ivan@example.com","телефон":"+7-900-123-45-67"},"навыки":["JavaScript","Python","Go"],"адрес":{"город":"Москва","улица":"Тверская","дом":"10"}}}

После beautify (форматированный)

{
  "пользователь": {
    "имя": "Иван Петров",
    "возраст": 30,
    "контакты": {
      "email": "ivan@example.com",
      "телефон": "+7-900-123-45-67"
    },
    "навыки": [
      "JavaScript",
      "Python",
      "Go"
    ],
    "адрес": {
      "город": "Москва",
      "улица": "Тверская",
      "дом": "10"
    }
  }
}

Зачем нужен Beautifier?

1. Улучшение читаемости

Форматированный JSON легче читать и понимать:

{"название":"Продукт","цена":1000,"скидка":0.1,"в_наличии":true,"теги":["новинка","популярное"],"характеристики":{"вес":"500г","размер":"средний"}}

{
  "название": "Продукт",
  "цена": 1000,
  "скидка": 0.1,
  "в_наличии": true,
  "теги": [
    "новинка",
    "популярное"
  ],
  "характеристики": {
    "вес": "500г",
    "размер": "средний"
  }
}

2. Отладка

Проще найти ошибки в структуре:

{
  "пользователи": [
    {
      "id": 1,
      "имя": "Иван"
    },
    {
      "id": 2,
      "имя": "Мария",
      "email": "maria@example.com"  
    }
  ]
}

Легко заметить, что у первого пользователя отсутствует email.

3. Code Review

Форматированный код проще проверять:

{
  "версия": "1.0.0",
+ "функции": ["авторизация", "api"],
  "debug": false
}

4. Документация

Примеры в документации должны быть читаемыми:

{
  "api": {
    "endpoint": "/api/v1/users",
    "метод": "GET",
    "параметры": {
      "page": 1,
      "limit": 10
    }
  }
}

Онлайн JSON Beautifiers

1. JSONLint.com

• Простой интерфейс
• Быстрая обработка
• Валидация + beautify
• Бесплатный

2. JSONFormatter.org

• Множество опций
• Tree view
• Минификация
• Конвертация форматов

• Отступ: 2, 3, 4, или 8 пробелов
• Компактные массивы
• Сортировка ключей
• Escape/Unescape

3. CodeBeautify.org/jsonviewer

• Загрузка файлов
• Скачивание результата
• Множественные инструменты
• API доступ

• JSON to XML
• JSON to CSV
• JSON to YAML
• JSON Diff

Beautify в редакторах кода

Visual Studio Code

Горячие клавиши:

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

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "json.format.enable": true,
  "json.format.keepLines": false
}

Установка:

npm install --save-dev prettier

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

Sublime Text

Установка через Package Control:

• Ctrl + Alt + J: Format
• Ctrl + Alt + M: Minify

Preferences → Package Settings → Pretty JSON → Settings - User:

{
  "indent": 2,
  "sort_keys": false,
  "ensure_ascii": false,
  "keep_arrays_single_line": false
}

IntelliJ IDEA / WebStorm

Горячие клавиши:

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

Settings → Editor → Code Style → JSON:

Tab size: 2
Indent: 2
Continuation indent: 4
Keep blank lines: 0
Spaces:
  ✓ After colon
  ✓ Before comma

Командная строка

jq (Мощный инструмент)

# macOS
brew install jq

# Ubuntu/Debian
sudo apt-get install jq

# Windows
choco install jq

# Из файла в файл
jq . input.json > output.json

# Из строки
echo '{"ключ":"значение"}' | jq .

# С отступом 4 пробела
jq --indent 4 . input.json

# Компактный формат (minify)
jq -c . input.json

# Сортировка ключей
jq -S . input.json

# Фильтрация и beautify
jq '.пользователи[] | select(.возраст > 25)' data.json

# Цветной вывод
jq -C . input.json

# Без цвета
jq -M . input.json

Python json.tool

# Из файла
python -m json.tool input.json output.json

# Из stdin
cat input.json | python -m json.tool

# С отступами (Python 3.9+)
python -m json.tool --indent 2 input.json

import json
import sys

def beautify_json(input_file, output_file, indent=2):
    """Beautify JSON файл"""
    with open(input_file, 'r', encoding='utf-8') as f:
        data = json.load(f)

    with open(output_file, 'w', encoding='utf-8') as f:
        json.dump(
            data,
            f,
            ensure_ascii=False,  # Для кириллицы
            indent=indent,
            sort_keys=False
        )

if __name__ == '__main__':
    beautify_json(sys.argv[1], sys.argv[2])

python beautify.py input.json output.json

Node.js

const fs = require('fs');

function beautifyJSON(inputFile, outputFile, indent = 2) {
  const data = JSON.parse(fs.readFileSync(inputFile, 'utf8'));
  fs.writeFileSync(
    outputFile,
    JSON.stringify(data, null, indent),
    'utf8'
  );
}

// Использование
beautifyJSON(process.argv[2], process.argv[3]);

const prettier = require('prettier');
const fs = require('fs');

async function beautifyWithPrettier(inputFile, outputFile) {
  const content = fs.readFileSync(inputFile, 'utf8');
  const formatted = await prettier.format(content, {
    parser: 'json',
    tabWidth: 2,
    useTabs: false
  });
  fs.writeFileSync(outputFile, formatted, 'utf8');
}

Программное beautify

JavaScript

function beautifyJSON(jsonString, indent = 2) {
  try {
    const parsed = JSON.parse(jsonString);
    return JSON.stringify(parsed, null, indent);
  } catch (error) {
    console.error('Ошибка парсинга JSON:', error);
    return null;
  }
}

// Использование
const минифицированный = '{"имя":"Иван","возраст":30}';
const красивый = beautifyJSON(минифицированный);
console.log(красивый);

function beautifyСБезопасностью(объект) {
  return JSON.stringify(объект, (ключ, значение) => {
    // Скрыть чувствительные данные
    if (['пароль', 'токен', 'api_key'].includes(ключ)) {
      return 'СКРЫТО';
    }
    return значение;
  }, 2);
}

const данные = {
  пользователь: "ivan",
  пароль: "secret123",
  email: "ivan@example.com"
};

console.log(beautifyСБезопасностью(данные));

Python

import json
from typing import Any, Dict

def beautify_json_string(
    json_string: str,
    indent: int = 2,
    sort_keys: bool = False,
    ensure_ascii: bool = False
) -> str:
    """
    Beautify JSON строку

    Args:
        json_string: JSON строка для форматирования
        indent: Количество пробелов для отступа
        sort_keys: Сортировать ключи
        ensure_ascii: Экранировать non-ASCII символы

    Returns:
        Отформатированная JSON строка
    """
    try:
        data = json.loads(json_string)
        return json.dumps(
            data,
            indent=indent,
            sort_keys=sort_keys,
            ensure_ascii=ensure_ascii
        )
    except json.JSONDecodeError as e:
        print(f"Ошибка: {e}")
        return None

# Использование
минифицированный = '{"имя":"Иван","возраст":30,"город":"Москва"}'
красивый = beautify_json_string(минифицированный, indent=4)
print(красивый)

Java

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

public class JSONBeautifier {

    public static String beautify(String jsonString) throws Exception {
        ObjectMapper mapper = new ObjectMapper();
        mapper.enable(SerializationFeature.INDENT_OUTPUT);

        // Парсинг
        Object json = mapper.readValue(jsonString, Object.class);

        // Форматирование
        return mapper.writeValueAsString(json);
    }

    public static void main(String[] args) throws Exception {
        String минифицированный = "{"имя":"Иван","возраст":30}";
        String красивый = beautify(минифицированный);
        System.out.println(красивый);
    }
}

Опции форматирования

Размер отступа

{
  "ключ": {
    "вложенный": "значение"
  }
}

{
    "ключ": {
        "вложенный": "значение"
    }
}

{
	"ключ": {
		"вложенный": "значение"
	}
}

Компактные массивы

{
  "числа": [
    1,
    2,
    3,
    4,
    5
  ]
}

{
  "числа": [1, 2, 3, 4, 5]
}

Сортировка ключей

{
  "имя": "Иван",
  "возраст": 30,
  "город": "Москва",
  "активен": true
}

{
  "активен": true,
  "возраст": 30,
  "город": "Москва",
  "имя": "Иван"
}

Автоматизация beautify

Git hooks

#!/bin/sh
# .git/hooks/pre-commit

# Beautify всех JSON файлов
for file in $(git diff --cached --name-only --diff-filter=ACM | grep '\.json$'); do
  npx prettier --write "$file"
  git add "$file"
done

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    ".json": [

      "prettier --write",
      "git add"
    ]
  }
}

const fs = require('fs');
const path = require('path');

function watchAndBeautify(directory) {
  fs.watch(directory, { recursive: true }, (eventType, filename) => {
    if (filename && filename.endsWith('.json')) {
      const filePath = path.join(directory, filename);

      try {
        const content = fs.readFileSync(filePath, 'utf8');
        const beautified = JSON.stringify(JSON.parse(content), null, 2);
        fs.writeFileSync(filePath, beautified, 'utf8');
        console.log(Beautified: ${filename});
      } catch (error) {
        console.error(Ошибка в ${filename}:, error.message);
      }
    }
  });

  console.log(Watching ${directory} for JSON changes...);
}

watchAndBeautify('./data');

name: Beautify JSON

on:
  push:
    paths:
      - '.json'


jobs:
  beautify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install Prettier
        run: npm install -g prettier

      - name: Beautify JSON files
        run: prettier --write '/.json'

      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add -A
          git diff --quiet && git diff --staged --quiet || git commit -m "Beautify JSON files"
          git push

Лучшие практики

1. Согласованность

Используйте одинаковый стиль во всем проекте:

{
  "настройки": {
    "отступ": 2,
    "стиль": "пробелы",
    "сортировка_ключей": false
  }
}

2. Автоматизация

Настройте автоматическое форматирование:

• Editor: Format on save
• Git: Pre-commit hooks
• CI/CD: Automated checks

3. Валидация перед beautify

function безопасныйBeautify(jsonString) {
  try {
    JSON.parse(jsonString); // Валидация
    return JSON.stringify(JSON.parse(jsonString), null, 2);
  } catch (error) {
    throw new Error(Невалидный JSON: ${error.message});
  }
}

4. Производительность

Для больших файлов используйте streaming:

const fs = require('fs');
const JSONStream = require('JSONStream');

const readStream = fs.createReadStream('large.json');
const writeStream = fs.createWriteStream('beautified.json');

readStream
  .pipe(JSONStream.parse('*'))
  .pipe(JSONStream.stringify('[
  ', ',
  ', '
]
'))
  .pipe(writeStream);

Troubleshooting

Проблема: Кириллица превращается в \\uXXXX

JavaScript:

// Плохо
JSON.stringify(obj) // {"имя":"value"}

// Хорошо (не работает, т.к. нет опции)
// Используйте Python или библиотеку

Python:

json.dumps(data, ensure_ascii=False) # {"имя":"value"}

Проблема: Слишком длинные строки

Используйте printWidth в Prettier:

{
  "printWidth": 80
}

Проблема: Висячие запятые

{
  "trailingComma": "none"
}

Заключение

JSON Beautifier — это незаменимый инструмент для любого разработчика, работающего с JSON данными. Правильное форматирование улучшает читаемость, упрощает отладку и делает совместную работу эффективнее.

- Онлайн: JSONLint, JSONFormatter

- CLI: jq, prettier

- IDE: VS Code, WebStorm

Начните использовать beautifier сегодня, и ваш JSON код всегда будет чистым и читаемым!