Comment formater JSON en ligne : guide complet avec des exemples

De retour dans mes jours WP Adminify, un ticket de support a été lancé qui lisait simplement : "Importation des paramètres interrompu. Rien ne fonctionne. L'utilisateur avait édité à la main un fichier de paramètres exportés - une virgule qui s'adressait à la ligne 217 d'un JSON de 9 000 lignes - et mon importateur a répondu avec l'erreur la moins utile au monde : L'importation a échoué

J'ai écrit ce message d'erreur. C'est sur moi.

Il a fallu 40 minutes de va-et-vient aux deux de nos deux pour trouver une virgule qu'un formateur décent aurait signalé en une demi-seconde. Ce billet a changé ma façon de penser à l'outillage JSON, et des années plus tard, il a façonné la façon dont j'ai construit le Formateur JSON Sur toolz.dev : L'emplacement de l'erreur n'est pas agréable à avoir. C'est l'ensemble du produit.

Ce guide explique comment formater JSON en ligne, pourquoi la mise en forme échoue et les pièges de syntaxe qui mangent finalement l'après-midi de tout le monde, y compris le mien.

tl;dr : Pour formater JSON Online, collez-le dans un outil côté client comme le Formateur JSON toolz.dev — Il s'imprime instantanément, signale les erreurs de syntaxe avec les numéros de ligne et ne télécharge jamais vos données. Si le formatage échoue, vous disposez presque certainement d'une virgule de suivi, de guillemets simples ou d'une clé non cotée. Utilisez l'indentation à 2 espaces, sauf indication contraire de votre équipe.

Que fait "formatage JSON" ?

Le formatage - jolie impression, si vous vous sentez imaginé - ajoute une indentation et des sauts de ligne pour que la structure devienne visible. Les données ne changent pas d'un seul bit. C'est une transformation de présentation, rien de plus.

ceci :

{"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}

devient ceci :

{
  "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
}

des données identiques. Mais un seul d'entre eux vous permet de repérer en un coup d'œil que Jane est en conception.

Il y a un bonus auquel la plupart des gens ne pensent pas : le formatage est également une validation déguisée. Un formateur doit analyser votre document pour le reformater, donc si le JSON est cassé, un bon formateur vous le dit alors que — C'est la raison réelle d'en utiliser un au lieu de plisser les yeux.

Comment formater JSON en ligne dans la pratique ?

L'ensemble du workflow est d'une quinzaine de secondes :

1. Copiez le JSON De n'importe où où il habite — Onglet DevTools Network (cliquez avec le bouton droit sur une requête → copier la réponse), curl sortie, un fichier journal, un message de Slack d'un collègue.
2. Ouvrez le Formateur JSON. Pas d'inscription, pas de connexion. Il se charge et vous collez.
3. Lisez la sortie. Le JSON valide revient en retrait et en surbrillance syntaxique, avec des sections pliables pour les gros documents. Le JSON non valide obtient une erreur avec un numéro de ligne et une description en anglais simple.
4. copier ou télécharger. Un clic dans les deux sens.

C'est ça. La partie intéressante n'est pas le chemin heureux - c'est l'étape 3 lorsque les choses tournent mal. Alors allons-y mal.

Pourquoi mon JSON ne se formate-t-il pas ?

Si un formateur refuse votre JSON, le document viole la grammaire dans RFC 8259. D'après mon expérience - à la fois de mon propre débogage et de la construction de l'outil, les gens collent leur JSON brisé - c'est presque toujours l'une des cinq choses.

1. virgule de suivi

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

SyntaxError: Unexpected token } in JSON at position 34

Javascript permet cela. JSON n'a jamais. Supprimez la virgule après le dernier élément de chaque objet et tableau :

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

Ceci est ma virgule de support. respectez-le.

2. Citations uniques

{ 'name': 'Alice' }

Le Python classique dit. str(my_dict) produit un pseudo-JSON à guillemet simple; json.dumps(my_dict) produit la vraie chose. Si vous voyez des citations uniques dans quelque chose qui prétend être JSON, quelqu'un a imprimé un dict au lieu de le sérialiser - je l'ai fait, vous l'avez fait, nous le ferons tous à nouveau.

{ "name": "Alice" }

3. Backslash non échappé

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

semble inoffensif. mais \n est une nouvelle ligne et \t est un onglet, donc cela s'analyse dans un chemin avec une ligne qui se brise - ou échoue carrément sur des séquences comme \x. Les chemins d'accès Windows sont la victime numéro un :

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

4. Supports non assortis

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

absent ]. Trivial ici, brutal dans une configuration imbriquée à six niveaux. Il s'agit d'une catégorie d'erreurs que les humains sont vraiment mauvais à trouver et les analyseurs trouvent instantanément - externalisez-le.

5. valeurs JavaScript qui ne sont pas JSON

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

undefined, NaN, et Infinity sont Javascript, pas JSON. JSON.stringify convertit tranquillement NaN à null et gouttes undefined Les propriétés entièrement - ce qui signifie que le bogue n'est souvent pas dans le JSON que vous recherchez, il est en amont dans tout ce qui le produit. null explicitement et vérifiez votre sérialiseur.

le formateur Attrape les cinq avec le numéro de ligne joint. Cette dernière phrase est la raison pour laquelle cette catégorie d'outil existe.

Faut-il utiliser 2 espaces, 4 espaces ou onglets ?

Le débat éternel, édition JSON. Voici la comparaison honnête :

Ma position, et je mourrai sur cette petite colline : 2 espaces pour JSON, quel que soit votre autre code. JSON nest plus profond que le code source typique - réponses de l'API à quatre et cinq niveaux de profondeur sont normales - et l'indentation à 4 espaces les transforme en exercices de défilement horizontaux. Même dans les équipes lourdes de Python, j'ai défini JSON sur 2 espaces et personne ne s'est jamais plaint deux fois.

Quoi que vous choisissiez, encodez-le pour que le débat se termine :

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

le formateur Prend en charge les deux largeurs, donc correspondre à la convention de votre projet est une liste déroulante, pas une discussion.

Qu'en est-il du formatage à partir de la ligne de commande ?

Parfois, le terminal est plus proche qu'un onglet de navigateur. Mon utilisation réelle :

# 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

Où chacun gagne, honnêtement :

• JQ Pour tout script, répété ou canalisé — et pour extraire des champs (jq '.data.users[].email') plutôt que de lire des documents entiers.
• L'outil de navigation pour les ponctuels, pour tout ce que vous voulez explorer Avec des sections repliables, et pour montrer un coéquipier, vous ne pouvez pas partager une expression JQ avec un chef de projet.
• VS Code (Shift+Alt+F) pour les fichiers JSON qui vivent dans le référentiel et sont ouverts de toute façon.

J'utilise les trois tous les jours. Quiconque vous dit que l'un remplace les autres vend quelque chose.

Une habitude qui vaut la peine d'être volée : curl -s ... > response.json premier, puis formatez le fichier. Lorsque la réponse s'avère être une page d'erreur HTML portant un Content-Type: application/json Le costume - arrive plus que n'importe lequel d'entre nous le souhaiterait - vous voudrez les octets d'origine, pas l'interprétation de votre navigateur.

Trois techniques de formatage La plupart des gens sautent

Trier les clés par ordre alphabétique. Différents sérialiseurs émettent des clés dans différentes commandes, ce qui fait que les données "mêmes" ressemblent à des réécritures. Les clés de tri avant de différer transforment un différentiel de 300 lignes en 2 lignes qui ont réellement changé. Cela se marie à merveille avec le Outil de diff de texte Lors de la comparaison des charges utiles de mise en scène par rapport aux charges utiles de production, une astuce qui m'a personnellement sauvé au moins deux incidents.

Gardez les tableaux courts en ligne. "colors": ["red", "green", "blue"] Sur une ligne, on lit mieux que cinq lignes de cérémonie. De bons formateurs le font automatiquement pour les tableaux de primitives, c'est la différence entre le format JSON formaté, vous pouvez survoler et formater JSON qui est techniquement jolie mais 4 000 lignes.

Formatez le fragment, pas le fichier. Pour un document de 15 Mo lorsque vous ne vous souciez que d'un seul objet : copiez cet objet imbriqué, formatez-le seul, c'est terminé. Le formatage de l'intégralité du fichier afin que vous puissiez en lire 40 lignes est un effort perdu, mais si vous avez besoin de tout, un outil côté client le gère sans barre de progression de téléchargement, car il n'y a pas de téléchargement.

et savoir quand non Au format : JSON minifié dans les bundles de production et les réponses API doivent rester minimisés. Le formatage est pour les yeux, pas pour les fils. Si vous avez besoin de la direction opposée, la même chose outil Réduit en un clic.

Questions fréquentes

Comment formater gratuitement JSON en ligne ?

Collez votre JSON dans le Formateur JSON toolz.dev — Il se formate instantanément avec la mise en évidence de la syntaxe et la vérification des erreurs, gratuite, sans inscription. Le traitement se produit dans votre navigateur, de sorte que rien de ce que vous collez n'est téléchargé n'importe où. Cette dernière partie compte plus que la partie "gratuite" si la charge utile contient des jetons ou des données utilisateur.

Pourquoi mon JSON ne se formate-t-il pas correctement ?

Le document contient une erreur de syntaxe et les principaux suspects sont des virgules, des guillemets simples, des clés non citées, des barres obliques inversées et des crochets incompatibles. Un formateur qui validera pointera vers la ligne exacte. Si l'erreur n'a aucun sens, vérifiez si vous avez réellement JSON - les API adorent retourner les pages d'erreur HTML avec un type de contenu JSON.

Quelle est la différence entre le formatage et la validation de JSON ?

Le formatage réécrit les espaces blancs pour la lisibilité ; la validation vérifie le document par rapport à la grammaire RFC 8259. En pratique, ils sont la même opération - un formateur doit analyser (valider) avant de pouvoir reformater. C'est pourquoi "il ne formatera pas" et "il n'est pas valide" est le même diagnostic.

Dois-je utiliser 2 ou 4 espaces pour l'indentation JSON ?

Utilisez 2 espaces, sauf si votre projet est déjà normalisé sur 4. JSON nest plus profond que la plupart des codes sources, et l'indentation à 2 espaces permet de les rendre lisibles dans le monde réel sans défilement horizontal. Verrouillez ensuite le choix dans .editorconfig Donc, il ne revient plus jamais dans la révision du code.

Puis-je formater JSON en code VS sans extension ?

Oui — Shift+Alt+F (ou Shift+Option+F Sur Mac) formate n'importe quel fichier JSON avec le formateur intégré et "format sur enregistrer" le rend automatique. Notez que VS Code Own settings.json IS JSONC, qui autorise les commentaires - ne laissez pas cela vous convaincre de vous convaincre régulièrement de JSON.

Est-il sûr de coller des réponses API dans les formateurs JSON en ligne ?

Uniquement dans les clients. De nombreux sites de formateurs publient votre entrée sur un serveur, ce qui signifie que votre réponse API - jetons, e-mails, tout cela existe désormais dans les journaux de quelqu'un d'autre. le Formateur Toolz.dev S'exécute entièrement dans votre navigateur, vérifiez-le vous-même en regardant l'onglet Réseau pendant que vous collez.

Comment formater un énorme fichier JSON (10 Mo+) ?

Les outils de navigateur côté client gèrent bien les fichiers de cette plage puisqu'il n'y a pas d'étape de téléchargement - le collage est la partie lente. Passer environ 50 Mo, passez aux outils de streaming : jq Sur la ligne de commande, ou extraire la section dont vous avez besoin et formatez-la. Ne collez jamais d'énormes fichiers dans des outils basés sur le serveur, vous attendez un téléchargement sans aucun avantage.

Comment minimiser JSON au lieu de le formater ?

même outil, bouton opposé — le Formateur JSON A un mode Minify en un clic qui supprime tous les espaces blancs. Minify pour les charges utiles de production, la stockage local et les pipelines de journaux ; format pour les humains. Les données sont identiques dans les deux sens.

Le formatage JSON modifie-t-il les données ?

Non : le formatage ne réécrit que les espaces blancs, de sorte que les clés, les valeurs et la structure restent identiques dans leur sens. Un document formaté et sa version minifiée analysent exactement le même objet. Si vos données changent réellement, vous avez modifié quelque chose à la main plutôt que de simplement formater.

Qu'est-ce qu'un embellisseur JSON ?

C'est un autre nom pour un formateur JSON - un outil qui prend JSON minifié ou désordonné et ajoute une indentation et des sauts de ligne pour qu'un humain puisse le lire. "Beautify", " "Joli-print" et "format" tous décrivent tous la même opération. le Formateur JSON Le fait-il en une seule pâte.

La quinze secondes

Le formatage JSON est une petite compétence avec des rendements démesurés - la plupart des "l'API est interrompue" Les moments sont vraiment "la charge utile est illisible" et ceux-ci dissolvent la seconde où la structure devient visible. Obtenez la boucle de lecture de format collé à quinze secondes et toute une catégorie de frottement de débogage disparaît.

le Formateur JSON sur Toolz.dev Est-ce la version de cet outil que je voulais lors de ce ticket de support : instantané, précis sur les erreurs et incapable de divulguer vos données car ils ne les reçoivent jamais.

Une fois que votre JSON est propre, la prochaine étape consiste généralement à le déplacer quelque part - dans une feuille de calcul avec le Convertisseur JSON en CSV, reculez d'un seul avec le Convertisseur CSV en JSON, ou dans un pipeline de configuration via le Validateur de YAML. Commencez par le Guide JSON vers CSV ou remonter au Guide complet des outils JSON Pour la carte complète.

Articles connexes :

• Le guide ultime des outils JSON (2026)
• Conversion JSON en CSV : 5 méthodes utilisées par les développeurs en 2026
• Guide d'outils de texte en ligne gratuit