Command Palette

Search for a command to run...

So formatieren Sie JSON Online: Komplette Anleitung mit Beispielen

So formatieren Sie JSON Online: Komplette Anleitung mit Beispielen

T
Toolz Team
|Jun 13, 2026|14 min read

In meinen WP-Adminify-Tagen landete ein Support-Ticket, das einfach lautete: "Einstellungen import kaputt." Nichts funktioniert. &quot. Der Benutzer hatte eine exportierte Einstellungsdatei von Hand bearbeitet - ein nachstehendes Komma in Zeile 217 eines 9.000-zeiligen JSON-Blobs - und mein Importeur antwortete mit dem am wenigsten hilfreichen Fehler der Welt: Import fehlgeschlagen.

Ich habe diese Fehlermeldung geschrieben. Das liegt an mir.

Wir beide brauchten 40 Minuten hin und her, um ein Komma zu finden, das ein anständiger Formatierer in einer halben Sekunde markiert hätte. Dieses Ticket hat meine Meinung über JSON-Tooling geändert und Jahre später hat es beeinflusst, wie ich das gebaut habe JSON-Formater Auf toolz.dev: Der Fehlerort ist nicht schön. Es ist das gesamte Produkt.

Dieser Leitfaden behandelt, wie man JSON online formatiert, warum die Formatierung fehlschlägt und die Syntax-Fallen, die jeden Nachmittag fressen - einschließlich meiner.

tl; dr: Fügen Sie es zum Formatieren von JSON online in ein clientseitiges Tool wie das ein toolz.dev JSON-Formater - Es druckt sofort, kennzeichnet Syntaxfehler mit Zeilennummern und lädt niemals Ihre Daten hoch. Wenn die Formatierung fehlschlägt, haben Sie mit ziemlicher Sicherheit ein nachlaufendes Komma, einzelne Anführungszeichen oder einen nicht zitierten Schlüssel. Verwenden Sie 2-Space-Einrückung, sofern Ihr Team nichts anderes sagt.


Was macht eigentlich das „Formatieren von JSON“?

Formatierung - Pretty-Printing, wenn Sie sich ausgefallen haben - fügt Einrückung und Zeilenumbrüche hinzu, damit die Struktur sichtbar wird. Die Daten ändern sich nicht um ein einziges Bit. Es ist eine Präsentationstransformation, nichts weiter.

das:

{"employees":[{"firstName":"John","lastName":"Doe","department":"Engineering","skills":["JavaScript","Python","Docker"]},{"firstName":"Jane","lastName":"Smith","department":"Design","skills":["Figma","CSS","Illustration"]}],"company":"Acme Corp","founded":2015}

wird dies:

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "department": "Engineering",
      "skills": ["JavaScript", "Python", "Docker"]
    },
    {
      "firstName": "Jane",
      "lastName": "Smith",
      "department": "Design",
      "skills": ["Figma", "CSS", "Illustration"]
    }
  ],
  "company": "Acme Corp",
  "founded": 2015
}

identische Daten. Aber nur einer von ihnen lässt Sie auf einen Blick erkennen, dass Jane im Design ist.

Es gibt einen Bonus, über den die meisten Leute nicht nachdenken: Formatierung ist auch eine Validierung in Verkleidung. Ein Formatierer muss Ihr Dokument analysieren, um es neu zu formatieren. Wenn der JSON also kaputt ist, sagt Ihnen ein guter Formatierer wohin - Welches ist der eigentliche Grund, einen zu verwenden, anstatt zu schielen.

Before and after showing minified JSON transformed into formatted JSON with syntax highlighting


Wie formatieren Sie JSON online in der Praxis?

Der gesamte Workflow beträgt ungefähr fünfzehn Sekunden:

  1. Kopieren Sie den JSON Von wo immer es lebt — Registerkarte DevTools Netzwerk (klicken Sie mit der rechten Maustaste auf eine Anfrage → Antwort kopieren), curl Ausgabe, eine Protokolldatei, die Slack-Nachricht eines Kollegen.
  2. Öffne das JSON-Formaterdrohen Keine Anmeldung, kein Login. es lädt und Sie kleben.
  3. Lesen Sie die Ausgabe. Gültiger JSON kommt eingerückt und syntax-hervorgehoben, mit zusammenklappbaren Abschnitten für große Dokumente. Ungültige JSON erhält einen Fehler mit einer Zeilennummer und einer plain-englischen Beschreibung.
  4. kopieren oder herunterladen. Ein Klick in beide Richtungen.

Das ist es. Der interessante Teil ist nicht der glückliche Weg - es ist Schritt 3, wenn etwas schief geht. Also lasst uns schief gehen.

Annotated diagram of the toolz.dev JSON Formatter interface showing input, output, and feature controls


Warum formatiert mein JSON nicht?

Wenn ein Formatierer Ihren JSON ablehnt, verstößt das Dokument gegen die Grammatik in RFC 8259drohen Nach meiner Erfahrung - sowohl aus meinem eigenen Debuggen als auch aus dem Bau des Tool, in das die Leute ihren kaputten JSON einfügen - ist dies fast immer eines von fünf Dingen.

1. Nachkomma

{
  "name": "Alice",
  "age": 30,
}
SyntaxError: Unexpected token } in JSON at position 34

Javascript erlaubt dies. JSON hat nie. Löschen Sie das Komma nach dem letzten Element in jedem Objekt und Array:

{
  "name": "Alice",
  "age": 30
}

Dies ist mein Support-Ticket-Komma. Respektiere es.

2. Einzelne Zitate

{ 'name': 'Alice' }

Der klassische Python erzählen. str(my_dict) produziert einzelzitiertes Pseudo-JSON; json.dumps(my_dict) produziert die reale Sache. Wenn Sie einzelne Zitate in etwas sehen, das behauptet, JSON zu sein, hat jemand ein Diktat gedruckt, anstatt es zu serialisieren - ich habe es getan, Sie haben es getan, wir alle tun es wieder.

{ "name": "Alice" }

3. unentdeckte Backslashs

{ "path": "C:\new\test" }

Sieht harmlos aus. aber \n ist eine Newline und \t ist eine Registerkarte, so dass dies in einen Pfad mit tatsächlichen Zeilenumbrüchen analysiert - oder bei Sequenzen wie fehlschlägt \xdrohen Windows-Pfaden sind das Opfer Nummer eins:

{ "path": "C:\\new\\test" }

4. Nicht übereinstimmende Klammern

{
  "users": [
    {"name": "Alice"},
    {"name": "Bob"}
}

vermisst ]drohen Trivial hier, brutal in einer Konfiguration verschachtelt sechs Ebenen tief. Dies ist eine Kategorie von Fehlern, die Menschen wirklich schlecht finden und Parser sofort finden - lagern Sie sie aus.

5. Javascript-Werte, die JSON sind

{ "value": undefined, "count": NaN }

undefined, NaN, und Infinity sind Javascript, nicht JSON. JSON.stringify konvertiert leise NaN auf null und Tropfen undefined Eigenschaften vollständig - was bedeutet, dass der Fehler oft nicht in der JSON ist, die Sie betrachten, sondern in dem, was auch immer es produziert hat. null explizit und überprüfen Sie Ihren Serializer.

der Formatierer Fängt alle fünf mit der angehängten Zeilennummer. Dieser letzte Satz ist der ganze Grund, warum diese Werkzeugkategorie existiert.


Sollten Sie 2 Leerzeichen, 4 Leerzeichen oder Tabs verwenden?

Die ewige Debatte, JSON-Ausgabe. Hier der ehrliche Vergleich:

2 Räume 4 Felder Tabs
Ökosystem Javascript/TypeScript, npm, React Python, Java, .NET Gehen Sie, ein älterer Code
Tiefes Einschachteln bleibt auf dem Bildschirm Läuft am rechten Rand Abhängig von der Registerkartenbreite
Unterschiedlichkeit gut gut gut bis gemischt mit Räumen
JSON.stringify Standard-Arg 2 (auf Konvention) 4 "\t"
Mein Urteil Standard für JSON Gut, wenn Ihr Team Python-First Nicht für JSON speziell

Meine Position, und ich werde auf diesem kleinen Hügel sterben: 2 Leerzeichen für JSON, unabhängig davon, was Ihr anderer Code verwendet. JSON nestert tiefer als der typische Quellcode - API-Antworten vier und fünf Ebenen sind normal - und 4-Space-Einrückungen werden zu horizontalen Bildlaufübungen. Selbst in Python-lastigen Teams habe ich JSON auf 2 Felder gesetzt und niemand hat sich jemals zweimal beschwert.

Was auch immer Sie auswählen, codieren Sie es, damit die Debatte endet:

# .editorconfig
[*.json]
indent_style = space
indent_size = 2
insert_final_newline = true

der Formatierer Unterstützt beide Breiten, so dass die Übereinstimmung Ihres Projekts konventionell ist, ist ein Dropdown und keine Diskussion.


Was ist mit der Formatierung über die Befehlszeile?

Manchmal ist das Terminal näher als ein Browser-Tab. Meine tatsächliche Nutzung:

# jq — the standard. Install it, learn 10% of it, profit.
curl -s https://api.example.com/users | jq .

# Python — already on basically every machine
curl -s https://api.example.com/users | python -m json.tool

# Node, if you enjoy typing
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync(0,'utf8')),null,2))" < data.json

Wo jeder gewinnt, ehrlich:

  • jq für alles Skripte, wiederholte oder pfeifende - und für das Extrahieren von Feldern (jq '.data.users[].email') anstatt ganze Dokumente zu lesen.
  • Das Browser-Tool Für einmalige, für alles, was Sie wollen erforschen Mit zusammenklappbaren Abschnitten und zum Anzeigen eines Teamkollegen - können Sie einen JQ-Ausdruck einem Projektmanager nicht teilen.
  • VS-Code (Shift+Alt+F) für JSON-Dateien, die im Repo leben und trotzdem geöffnet sind.

Ich benutze alle drei täglich. Wer sagt, dass einer die anderen ersetzt, verkauft etwas.

Eine Gewohnheit, die es wert ist, gestohlen zu curl -s ... > response.json vorweg, dann formatieren Sie die Datei. Wenn sich herausstellt, dass es sich um eine HTML-Fehlerseite handelt, die eine Content-Type: application/json Kostüm - Passiert mehr als jeder von uns möchte - Sie möchten die ursprünglichen Bytes und nicht die Interpretation Ihres Browsers.


Drei Formatierungstechniken, die die meisten Leute überspringen

Sortieren Sie die Tasten alphabetisch. Verschiedene Serialisierer geben Schlüssel in unterschiedlichen Reihenfolgen aus, wodurch die Daten wie "Rewrites" wie "Rewrites" aussehen. Das Sortieren von Tasten vor dem Differential verwandelt einen 300-Zeiger-Diff in die beiden Linien, die sich tatsächlich geändert haben. Das passt wunderbar zum Text-Diff-Tool Beim Vergleich von Staging- und Produktionsnutzlasten - ein Trick, der mich bei mindestens zwei Vorfällen persönlich gerettet hat.

Halten Sie kurze Arrays inline. "colors": ["red", "green", "blue"] In einer Zeile besser als fünf Zeilen der Zeremonie. Gute Formatierer tun dies automatisch für Arrays von Primitiven; es ist der Unterschied zwischen formatiertem JSON, den Sie überfliegen können, und formatierte JSON, die technisch hübsch sind, aber 4.000 Zeilen lang sind.

Formatieren Sie das Fragment, nicht die Datei. Für ein 15-MB-Dokument, wenn Sie sich nur um ein Objekt kümmern: Kopieren Sie dieses geschachtelte Objekt, formatieren Sie es alleine, fertig. Das Formatieren der gesamten Datei, damit Sie 40 Zeilen lesen können, ist verschwendeter Aufwand. Wenn Sie jedoch das Ganze benötigen, verarbeitet ein clientseitiges Tool dies ohne Upload-Fortschrittsleiste, da es kein Upload gibt.

und weiß wann nicht Formatieren: Miniifizierte JSON in Produktionsbündeln und API-Antworten sollten minimiert bleiben. Die Formatierung ist für Augen, nicht für Drähte. Wenn Sie die entgegengesetzte Richtung brauchen, das gleiche Werkzeug Verkleinert mit einem Klick.


Häufig gestellte Fragen

Wie formatiere ich JSON online kostenlos?

Fügen Sie Ihren JSON in die ein toolz.dev JSON-Formater — Es formatiert sofort mit Syntax-Hervorhebung und Fehlerprüfung, kostenlos, ohne Anmeldung. Die Verarbeitung erfolgt in Ihrem Browser, sodass nichts, was Sie einfügen, irgendwo hochgeladen wird. Dieser letzte Teil ist wichtiger als der "freie" Teil, wenn die Nutzdaten Token oder Benutzerdaten enthalten.

Warum formatiert mein JSON nicht richtig?

Das Dokument hat einen Syntaxfehler, und die Hauptverdächtigen sind nachgestellte Kommas, einfache Anführungszeichen, nicht zitierte Schlüssel, nicht entweichte Backslashs und nicht übereinstimmende Klammern. Ein Formatierer, der validiert wird, zeigt auf die genaue Linie. Wenn der Fehler keinen Sinn ergibt, prüfen Sie, ob Sie überhaupt JSON haben - APIs lieben es, HTML-Fehlerseiten mit einem JSON-Inhaltstyp zurückzugeben.

Was ist der Unterschied zwischen Formatierung und Validierung von JSON?

Formatieren neu write Leerzeichen für Lesbarkeit, Validierung prüft das Dokument mit der Grammatik RFC 8259. In der Praxis sind sie dieselbe Operation - ein Formatierer muss analysieren (validieren), bevor er neu formatieren kann. Das ist der Grund, warum "es wird nicht formatieren", und "es ist ungültig" dieselbe Diagnose.

Sollte ich 2 oder 4 Leerzeichen für die JSON-Einrückung verwenden?

Verwenden Sie 2 Leerzeichen, es sei denn, Ihr Projekt ist bereits auf 4 standardisiert. JSON nestert tiefer als der der größte Quellcode, und 2-Space-Einrückung hält reale API-Antworten ohne horizontales Bildlauf lesbar. Dann sperren Sie die Wahl ein .editorconfig Es kommt also nie wieder in der Code-Überprüfung auf.

Kann ich JSON in VS-Code ohne Erweiterung formatieren?

Ja- Shift+Alt+F (oder Shift+Option+F on Mac) formatiert jede JSON-Datei mit dem integrierten Formatierer und "Format on Save" macht es automatisch. Beachten Sie, dass VS Code eigene settings.json ist JSONC, das Kommentare zulässt - lassen Sie sich davon nicht überzeugen.

Ist es sicher, API-Antworten in Online-JSON-Formater einzufügen?

nur in kundenseitige. Viele Formatierungsseiten veröffentlichen Ihre Eingaben auf einen Server. Dies bedeutet, dass Ihre API-Antwort - Token, E-Mails und alles davon - jetzt in den Protokollen eines anderen vorhanden ist. der toolz.dev-Formater Läuft vollständig in Ihrem Browser; überprüfen Sie es selbst, indem Sie sich beim Einfügen auf die Registerkarte Netzwerk ansehen.

Wie formatiere ich eine riesige JSON-Datei (10 MB +)?

Clientseitige Browser-Tools verarbeiten Dateien in diesem Bereich einwandfrei, da es keinen Upload-Schritt gibt - das Einfügen ist der langsame Teil. Nach ungefähr 50 MB wechseln Sie zu Streaming-Tools: jq In der Befehlszeile oder extrahieren Sie nur den Abschnitt, den Sie benötigen, und formatieren Sie diesen. Fügen Sie niemals große Dateien in serverbasierte Tools ein, Sie warten auf einen Upload ohne Nutzen.

Wie verkleinere ich JSON, anstatt es zu formatieren?

Gleiches Werkzeug, gegenüberliegende Schaltfläche - die JSON-Formater Hat einen Ein-Klick-Minify-Modus, der alle Leerzeichen abisoliert. Minify für Produktionsnutzlasten, LocalStorage und Log Pipelines; Format für Menschen. Die Daten sind in beiden Fällen identisch.

Ändert das Formatieren von JSON die Daten?

Nein - Die Formatierung schreibt nur Leerzeichen um, sodass die Schlüssel, Werte und die Struktur in der Bedeutung identisch bleiben. Ein formatiertes Dokument und seine minimierte Version parsen genau das gleiche Objekt. Wenn sich Ihre Daten tatsächlich ändern, haben Sie etwas von Hand bearbeitet und nicht nur formatiert.

Was ist ein JSON-Verschönerer?

Es ist ein anderer Name für einen JSON-Formater - ein Tool, das minimierte oder unordentliche JSON-Dateien enthält und Einrückung und Zeilenumbrüche hinzufügt, damit ein Mensch es lesen kann. "Verschönern", "Pretty-Print", und "Format" beschreiben alle denselben Vorgang. der JSON-Formater Tut es in einer Paste.


die fünfzehn-sekundende Gewohnheit

Formatieren von JSON ist eine kleine Fähigkeit mit übergroßen Renditen — die meisten "die API ist gebrochen" Momente sind wirklich "die Nutzlast ist unlesbar" Momente, und die lösen sich in der Sekunde, in der die Struktur sichtbar wird. Holen Sie sich die Schleife im Format Paste-Format auf fünfzehn Sekunden und eine ganze Kategorie von Debugging-Reibung verschwindet.

der JSON-Formater auf toolz.dev ist die Version dieses Tools, die ich während dieses Support-Tickets wollte: Sofort, präzise über Fehler und nicht in der Lage, Ihre Daten zu durchlaufen, da es sie nie erhält.

Sobald Ihr JSON sauber ist, bewegt es sich normalerweise irgendwohin in eine Tabelle mit dem JSON-zu-CSV-Konverter, aus einem mit dem CSV-zu-JSON-Konverteroder in eine Konfigurations-Pipeline über die YAML-Validatordrohen Beginnen Sie mit dem JSON zu CSV-Leitfaden oder gehen Sie zurück zum Komplette JSON-Tools-Anleitung für die vollständige Karte.


Verwandte Artikel:

Frequently Asked Questions

Paste your JSON into the toolz.dev JSON Formatter — it formats instantly with syntax highlighting and error checking, free, no signup. Processing happens in your browser, so nothing you paste is uploaded anywhere. That last part matters more than the "free" part if the payload contains tokens or user data.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!