Zurück in meinen WP Adminify Tagen landete ein Support-Ticket, das einfach lautete: " Einstellungen importieren defekt Nichts geht." Der Benutzer hatte eine exportierte Einstellungsdatei von Hand bearbeitet - ein nachgestelltes Komma auf Zeile 217 eines 9.000 Zeilen langen JSON-Blobs - und mein Importeur antwortete mit der Welt's am wenigsten hilfreicher Fehler: 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.
Diese Anleitung behandelt, wie man JSON online formatiert, warum die Formatierung fehlschlägt und welche Syntaxfallen alle fressen's Nachmittag schließlich - 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 ziemlich sofort, markiert Syntaxfehler mit Zeilennummern und lädt niemals Ihre Daten hoch. Wenn die Formatierung fehlschlägt, haben Sie mit ziemlicher Sicherheit ein nachfolgendes Komma, einzelne Anführungszeichen oder einen nicht zitierten Schlüssel. Verwenden Sie die 2-Raum-Einrückung, sofern Ihr Team nichts anderes sagt.
Was macht eigentlich das „Formatieren von JSON“?
Formatieren - hübsch drucken, wenn Sie & #39; re Gefühl fancy - fügt Einrückungen und Zeilenumbrüche, so dass die Struktur sichtbar wird Die Daten nicht & #39; ändern sich um ein einziges Bit It' s eine Präsentation transformieren, nichts mehr.
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- was der eigentliche Grund ist, statt zu schielen, eine zu benutzen.

Wie formatieren Sie JSON online in der Praxis?
Der gesamte Workflow beträgt ungefähr fünfzehn Sekunden:
- Kopieren Sie den JSON Von wo auch immer es lebt - Tab DevTools Network (mit der rechten Maustaste auf eine Anfrage → Antwort kopieren),
curlAusgabe, eine Protokolldatei, die Slack-Nachricht eines Kollegen. - Öffne das JSON-Formaterdrohen Keine Anmeldung, kein Login. es lädt und Sie kleben.
- 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.
- kopieren oder herunterladen. Ein Klick in beide Richtungen.
Das' ist es. Der interessante Teil ist't der glückliche Weg - it's Schritt 3, wenn etwas schief geht Also lasst & #39;s schief gehen.

Warum formatiert mein JSON nicht?
Wenn ein Formatierer Ihren JSON ablehnt, verstößt das Dokument gegen die Grammatik in RFC 8259. Meiner Erfahrung nach fügen die Leute sowohl aus meinem eigenen Debugging als auch aus dem Bau des Tools ihr defektes JSON ein - it's 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 das Echte Wenn Sie' einzelne Zitate in etwas sehen, das behauptet, JSON zu sein, hat jemand ein Diktat gedruckt, anstatt es zu serialisieren - I' hat es geschafft, Sie' haben es getan, wir' machen es alle wieder.
{ "name": "Alice" }
3. unentdeckte Backslashs
{ "path": "C:\new\test" }
Sieht harmlos aus. aber \n ist eine Newline und \t Tab ist, also analysiert sich dies in einen Pfad mit tatsächlichen Zeilenumbrüchen darin - oder schlägt bei Sequenzen wie direkt fehl \xdrohen Windows-Pfaden sind das Opfer Nummer eins:
{ "path": "C:\\new\\test" }
4. Nicht übereinstimmende Klammern
{
"users": [
{"name": "Alice"},
{"name": "Bob"}
}
vermisst ]. Trivial hier, brutal in einer Konfiguration, die sechs Ebenen tief verschachtelt ist. Dies ist eine Kategorie von Fehlern, die Menschen wirklich schlecht finden können, und Parser finden sie sofort - 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 ' t im JSON you' betrachten, it' s Upstream in dem, was es produziert hat Verwenden Sie 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 nistet tiefer als typischer Quellcode - API-Antworten vier und fünf Stufen tief sind normal - und 4-Raum-Einrückung macht sie zu horizontalen Scrollü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, was mit Skripten, Wiederholungen oder Pipeds versehen ist - und zum 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 & #39; t einen JQ-Ausdruck an einen Projektmanager weitergeben.
- 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' Ich möchte die Originalbytes, nicht Ihren Browser und #39;s Interpretation davon.
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 vs. Produktionsnutzlasten - ein Trick, der mich persönlich bei mindestens zwei Vorfällen 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 großes Dokument, wenn es Ihnen nur um ein Objekt geht: Kopieren Sie dieses verschachtelte Objekt, formatieren Sie es alleine, fertig. Die Formatierung der gesamten Datei, damit Sie 40 Zeilen davon lesen können, ist ein verschwendeter Aufwand - wenn Sie das Ganze jedoch benötigen, wird dies von einem clientseitigen Tool ohne Upload-Fortschrittsleiste erledigt, da dort's kein Upload.
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 Syntaxhervorhebung und Fehlerprüfung, kostenlos, keine Anmeldung Verarbeitung geschieht in Ihrem Browser, so dass nichts, was Sie einfügen, irgendwo hochgeladen wird Dieser letzte Teil ist wichtiger als das & quot; free" Teil, wenn die Nutzlast Token oder Benutzerdaten enthält.
Warum formatiert mein JSON nicht richtig?
Das Dokument hat einen Syntaxfehler, und die Top-Verdächtigen sind nachgestellte Kommas, einzelne Anführungszeichen, nicht zitierte Schlüssel, nicht entkommene Backslashes und nicht übereinstimmende Klammern Ein Formatierer, der validiert, zeigt auf die genaue Zeile Wenn der Fehler keinen Sinn ergibt, überprüfen Sie, ob Sie tatsächlich JSON überhaupt haben - APIs lieben es, HTML-Fehlerseiten mit einem JSON-Inhaltstyp zurückzugeben.
Was ist der Unterschied zwischen Formatierung und Validierung von JSON?
Formatieren schreibt Leerzeichen für Lesbarkeit um; die Validierung prüft das Dokument mit der RFC 8259 Grammatik In der Praxis ist sie' die gleiche Operation - ein Formatierer muss analysieren (validieren), bevor er neu formatieren kann That's warum " it won' t format" und & quot; it's ungültig" sind die gleiche 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 - don' Lassen Sie sich davon überzeugen, dass JSON dies regelmäßig tut.
Ist es sicher, API-Antworten in Online-JSON-Formater einzufügen?
Nur in clientseitige Viele Formatiererseiten POSTEN Ihre Eingabe auf einen Server, das heißt Ihre API-Antwort - Token, E-Mails, alles - existiert jetzt in jemand anderem' s-Protokollen Die 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 fein, da dort' s kein Upload-Schritt - das Einfügen ist der langsame Teil Nach 50 MB oder so 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 Taste - 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 - Formatierung schreibt nur Leerzeichen um, also bleiben die Tasten, Werte, Struktur in der Bedeutung identisch Ein formatiertes Dokument und dessen minifizierte Versionsanalyse auf genau dasselbe Objekt, wenn sich Ihre Daten tatsächlich ändern, haben Sie etwas von Hand bearbeitet, anstatt nur zu formatieren.
Was ist ein JSON-Verschönerer?
It' s ein anderer Name für einen JSON-Formatierer - ein Werkzeug, das minifiziertes oder chaotisches JSON nimmt und Einrückungen und Zeilenumbrüche hinzufügt, damit ein Mensch es lesen kann. "Beautify, " " pretty-print, " und & quot;format" alle beschreiben den gleichen Vorgang Die JSON-Formater Tut es in einer Paste.
die fünfzehn-sekundende Gewohnheit
Das Formatieren von JSON ist eine kleine Fähigkeit mit übergroßen Renditen - die meisten & quot; die API ist defekt" Momente sind wirklich " die Nutzlast ist unlesbar" Momente, und diese lösen sich auf, sobald die Struktur sichtbar wird Holen Sie sich die Paste-Format-Lese-Schleife auf fünfzehn Sekunden herunter und eine ganze Kategorie von Debugging-Reibungen 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, besteht der nächste Schritt normalerweise darin, es irgendwo hin zu verschieben - 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:



