JSON Beautifier: Vollständige Anleitung für schönes JSON

# JSON Beautifier: Vollständige Anleitung

Alles, was Sie über JSON-Beautifier wissen müssen, um Ihren JSON-Code perfekt zu formatieren.

Was ist ein JSON-Beautifier?

Ein JSON-Beautifier (auch Pretty-Printer genannt) ist ein Werkzeug, das komprimierten oder unlesbaren JSON-Code in ein gut formatiertes, leicht lesbares Format umwandelt.

Vorher (Minifiziert)

{"name":"Max Mustermann","alter":30,"beruf":"Entwickler","adresse":{"straße":"Hauptstraße 1","stadt":"Berlin","plz":"10115"},"hobbys":["Programmieren","Musik","Sport"],"aktiv":true}

Nachher (Beautified)

{
  "name": "Max Mustermann",
  "alter": 30,
  "beruf": "Entwickler",
  "adresse": {
    "straße": "Hauptstraße 1",
    "stadt": "Berlin",
    "plz": "10115"
  },
  "hobbys": [
    "Programmieren",
    "Musik",
    "Sport"
  ],
  "aktiv": true
}

Warum JSON Beautify verwenden?

1. Bessere Lesbarkeit

Formatierter Code ist viel einfacher zu verstehen:

// ❌ Unleserlich
{"users":[{"id":1,"name":"Max"},{"id":2,"name":"Anna"}],"total":2}

// ✅ Lesbar
{
  "users": [
    {
      "id": 1,
      "name": "Max"
    },
    {
      "id": 2,
      "name": "Anna"
    }
  ],
  "total": 2
}

2. Einfacheres Debugging

Fehler sind schneller zu finden:

{
  "name": "Max",
  "alter": 30,
  "stadt": "Berlin",  // ← Fehler: Trailing comma!
}

3. Code-Reviews

Kollegen können den Code besser verstehen.

4. Dokumentation

Beispiele in Dokumentation sind klarer.

5. Lernen

Anfänger können die Struktur besser nachvollziehen.

Online JSON-Beautifier

Big JSON (Empfohlen!)

Unsere Features:

• 🎨 Echtzeit-Beautifying
• 🔍 Syntax-Highlighting
• ✅ Validierung
• 🌲 Baum-Ansicht
• 📋 Ein-Klick-Kopieren
• 💾 Offline-fähig

Verwendung:

JSON einfügen

Automatische Formatierung

Ergebnis kopieren oder herunterladen

JSONLint

URL: jsonlint.com Vorteile:

• Kombiniert Validierung + Beautifying
• Zeigt Fehler mit Zeilennummer
• Sehr schnell

Beispiel:

// Eingabe
{"name":"Max","error":true}

// Ausgabe + Validierung
{
  "name": "Max",
  "error": true
}
✅ Valid JSON

Code Beautify

URL: codebeautify.org/jsonviewer Features:

• Mehrere Ansichtsmodi
• Baum-Ansicht
• Minify & Beautify
• Download-Optionen

Beautify mit Code

JavaScript/Node.js

Grundlegendes Beautifying

// Komprimiertes JSON
const minified = '{"name":"Max","alter":30,"stadt":"Berlin"}';

// Mit JSON.stringify beautifyen
const beautified = JSON.stringify(JSON.parse(minified), null, 2);

console.log(beautified);

Ausgabe:

{
  "name": "Max",
  "alter": 30,
  "stadt": "Berlin"
}

Datei beautifyen

const fs = require('fs');

// Minifizierte Datei lesen
const minified = fs.readFileSync('data.min.json', 'utf8');

// Beautifyen
const data = JSON.parse(minified);
const beautified = JSON.stringify(data, null, 2);

// Zurückschreiben
fs.writeFileSync('data.json', beautified);

console.log('✅ Datei beautified!');

Eigene Einrückung

const data = { name: "Max", alter: 30 };

// 2 Leerzeichen (Standard)
JSON.stringify(data, null, 2);

// 4 Leerzeichen
JSON.stringify(data, null, 4);

// Tabs
JSON.stringify(data, null, '	');

// Custom String
JSON.stringify(data, null, '  ');

Mit Farbausgabe (Terminal)

const chalk = require('chalk');

function beautifyWithColor(obj) {
  const json = JSON.stringify(obj, null, 2);

  return json
    .replace(/"([^"]+)":/g, chalk.blue('"$1"') + ':')
    .replace(/: "([^"]+)"/g, ': ' + chalk.green('"$1"'))
    .replace(/: (d+)/g, ': ' + chalk.yellow('$1'))
    .replace(/: (true|false)/g, ': ' + chalk.magenta('$1'));
}

console.log(beautifyWithColor({ name: "Max", alter: 30, aktiv: true }));

Python

Grundlegendes Beautifying

import json

# Komprimiertes JSON
minified = '{"name":"Max","alter":30,"stadt":"Berlin"}'

# Beautifyen
data = json.loads(minified)
beautified = json.dumps(data, indent=2, ensure_ascii=False)

print(beautified)

Datei beautifyen

import json

# Datei lesen und beautifyen
with open('data.min.json', 'r', encoding='utf-8') as f:
    data = json.load(f)

# Beautified zurückschreiben
with open('data.json', 'w', encoding='utf-8') as f:
    json.dump(data, f, indent=2, ensure_ascii=False)

print('✅ Datei beautified!')

Mit sortierten Schlüsseln

import json

data = {
    "z_wert": 1,
    "a_wert": 2,
    "m_wert": 3
}

# Beautify mit Sortierung
beautified = json.dumps(
    data,
    indent=2,
    sort_keys=True,
    ensure_ascii=False
)

print(beautified)

Ausgabe:

{
  "a_wert": 2,
  "m_wert": 3,
  "z_wert": 1
}

PHP

<?php

// Komprimiertes JSON
$minified = '{"name":"Max","alter":30}';

// Beautifyen
$data = json_decode($minified);
$beautified = json_encode(
    $data,
    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE
);

echo $beautified;

// Datei beautifyen
$minified = file_get_contents('data.min.json');
$data = json_decode($minified);
$beautified = json_encode(
    $data,
    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE
);
file_put_contents('data.json', $beautified);
?>

Java

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonParser;

public class JsonBeautifier {
    public static void main(String[] args) {
        String minified = "{"name":"Max","alter":30}";

        // Gson mit Pretty Printing erstellen
        Gson gson = new GsonBuilder()
            .setPrettyPrinting()
            .create();

        // Parsen und beautifyen
        Object json = JsonParser.parseString(minified);
        String beautified = gson.toJson(json);

        System.out.println(beautified);
    }
}

Kommandozeilen-Tools

jq (Empfohlen)

# Installation
# Linux
sudo apt-get install jq

# macOS
brew install jq

# Windows (Chocolatey)
choco install jq

# Datei beautifyen
jq '.' data.min.json > data.json

# Von stdin
echo '{"name":"Max","alter":30}' | jq '.'

# Mit kompakter Ausgabe (minify)
jq -c '.' data.json

# Mit sortieren Schlüsseln
jq --sort-keys '.' data.json

# Spezifische Felder extrahieren
jq '.name, .alter' data.json

Ausgabe:

{
  "name": "Max",
  "alter": 30
}

Python (json.tool)

# Datei beautifyen
python -m json.tool data.min.json data.json

# Von stdin
echo '{"name":"Max"}' | python -m json.tool

# Mit sortieren Schlüsseln
python -m json.tool --sort-keys input.json output.json

# Kompakt (keine Einrückung)
python -m json.tool --compact input.json

Node.js (Einzeiler)

# Datei beautifyen
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync('data.min.json')), null, 2))" > data.json

# Als npm script
{
  "scripts": {
    "beautify": "node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync(process.argv[1])), null, 2))" -- "
  }
}

Editor-Integration

VS Code

Eingebaute Funktion

Shortcut:

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

Oder:

• Rechtsklick → "Dokument formatieren"
• Command Palette → "Format Document"

Settings

// settings.json
{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

Prettier Extension

// .prettierrc
{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": false,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false
}

Sublime Text

Plugin: Pretty JSON Shortcut: Ctrl + Alt + J (Windows/Linux) oder Cmd + Ctrl + J (Mac) Settings:

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

Atom

Plugin: prettier-atom Konfiguration:

{
  "prettier-atom": {
    "formatOnSaveOptions": {
      "enabled": true
    },
    "prettierOptions": {
      "tabWidth": 2,
      "useTabs": false
    }
  }
}

Erweiterte Features

Syntax-Highlighting

// Beispiel mit highlight.js
const hljs = require('highlight.js');

function beautifyWithHighlight(json) {
  const beautified = JSON.stringify(JSON.parse(json), null, 2);
  return hljs.highlight('json', beautified).value;
}

Code-Folding

Ermöglicht das Einklappen von JSON-Abschnitten:

{
  "benutzer": {▼}  // ← Klickbar zum Ein-/Ausklappen
  "einstellungen": {▼}
}

Fehlermarkierung

{
  "name": "Max",
  "alter": 30,    // ← Warnung: Trailing comma
}                  // ← Fehler: Ungültig

Best Practices

1. Konsistente Einrückung

// ✅ Gut - 2 Leerzeichen überall
{
  "level1": {
    "level2": {
      "level3": "wert"
    }
  }
}

// ❌ Schlecht - Inkonsistent
{
    "level1": {
      "level2": {
          "level3": "wert"
      }
    }
}

2. Schlüssel nicht sortieren (meist)

// ✅ Gut - Logische Reihenfolge
{
  "id": 1,
  "name": "Max",
  "email": "max@example.de",
  "createdAt": "2026-01-26"
}

// ❌ Weniger gut - Alphabetisch
{
  "createdAt": "2026-01-26",
  "email": "max@example.de",
  "id": 1,
  "name": "Max"
}

3. Arrays übersichtlich formatieren

// Kurze Arrays - eine Zeile OK
{
  "farben": ["rot", "grün", "blau"]
}

// Lange Arrays oder Objekte - mehrzeilig
{
  "benutzer": [
    {
      "id": 1,
      "name": "Max"
    },
    {
      "id": 2,
      "name": "Anna"
    }
  ]
}

4. Zeilenlänge beachten

// ✅ Gut - Nicht zu breit
{
  "beschreibung": "Ein kurzer Text"
}

// ⚠️ Besser umbrechen bei langen Texten
{
  "beschreibung": "Dies ist ein sehr langer Text, der besser auf mehrere Zeilen aufgeteilt werden sollte, auch wenn JSON das technisch in einer Zeile erlaubt"
}

Automatisierung

Pre-commit Hook (Git)

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

# Alle JSON-Dateien beautifyen
for file in $(git diff --cached --name-only | grep '.json$'); do
  if [ -f "$file" ]; then
    jq '.' "$file" > "$file.tmp" && mv "$file.tmp" "$file"
    git add "$file"
  fi
done

Mit Husky

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm run beautify:json && git add -A ."
    }
  },
  "scripts": {
    "beautify:json": "prettier --write '*/.json'"
  }
}

GitHub Actions

# .github/workflows/beautify.yml
name: Beautify JSON

on: [push]

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

      - name: Setup Node.js
        uses: actions/setup-node@v2

      - name: Install jq
        run: sudo apt-get install -y jq

      - name: Beautify JSON files
        run: |
          find . -name '.json' -exec sh -c 'jq "." "$1" > "$1.tmp" && mv "$1.tmp" "$1"' _ {} ;


      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add -A
          git commit -m "Auto-beautify JSON files" || exit 0
          git push

Batch-Verarbeitung

Alle JSON-Dateien in einem Ordner

# Mit jq
find . -name ".json" -exec sh -c 'jq "." "$1" > "$1.tmp" && mv "$1.tmp" "$1"' _ {} ;

# Mit Python
python << EOF
import json
import glob
import os

for filepath in glob.glob('*/.json', recursive=True):
    with open(filepath, 'r', encoding='utf-8') as f:
        data = json.load(f)
    with open(filepath, 'w', encoding='utf-8') as f:
        json.dump(data, f, indent=2, ensure_ascii=False)
    print(f'✅ {filepath}')
EOF

# Mit Node.js
node << 'EOF'
const fs = require('fs');
const glob = require('glob');

glob('*/.json', (err, files) => {
  files.forEach(file => {
    const data = JSON.parse(fs.readFileSync(file, 'utf8'));
    fs.writeFileSync(file, JSON.stringify(data, null, 2));
    console.log(\✅ \${file}\);
  });
});
EOF

Performance-Tipps

1. Große Dateien

// Für sehr große JSON-Dateien
const JSONStream = require('JSONStream');
const fs = require('fs');

fs.createReadStream('large.json')
  .pipe(JSONStream.parse('*'))
  .pipe(JSONStream.stringify('{
  ', ',
  ', '
}'))
  .pipe(fs.createWriteStream('large.beautified.json'));

2. Streaming

import ijson
import json

# Für große Arrays
with open('large.json', 'rb') as input_file:
    parser = ijson.items(input_file, 'items.item')

    with open('output.json', 'w') as output_file:
        output_file.write('[
')
        first = True
        for item in parser:
            if not first:
                output_file.write(',
')
            output_file.write('  ' + json.dumps(item, indent=2))
            first = False
        output_file.write('
]')

Zusammenfassung

Schnellreferenz

| Methode | Befehl |

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

| JavaScript | JSON.stringify(obj, null, 2) |

| Python | json.dumps(obj, indent=2) |

| jq | jq '.' input.json |

| VS Code | Shift + Alt + F |

| Online | Big JSON, JSONLint |

Top-Tools

Big JSON - Online, schnell, feature-reich

VS Code - Für Entwickler

jq - Für Kommandozeile

Python json.tool - Überall verfügbar

Wichtige Punkte

✅ Beautify macht JSON lesbar

✅ Verwenden Sie 2-4 Leerzeichen Einrückung

✅ Automatisieren Sie mit Git-Hooks

✅ Validieren Sie beim Beautifying

✅ Nutzen Sie Editor-Integration

Weiterführende Ressourcen

• JSON formatieren
• JSON Online-Tools
• Was ist JSON?
• Häufige JSON-Fehler