Un beautifier JSON qui ne voit jamais votre JSON.

Un JSON beautifier lit un document, le parse en un arbre d'objets, de tableaux, de chaînes, de nombres, de booléens et de null, puis réécrit cet arbre avec une valeur par ligne et une indentation constante. Le mot important est parse. Il n'insère pas des retours à la ligne après chaque virgule avec une expression régulière, comme le font beaucoup d'extraits qui circulent sur le web, et comme cela détruit silencieusement toute chaîne contenant une virgule ou une accolade.

Cela a une conséquence immédiate : un document qui n'est pas du JSON valide ne peut pas être embelli. Il n'y a pas d'arbre à imprimer. C'est pourquoi embellir et valider sont ici la même opération et non deux boutons, et pourquoi un collage invalide vous rend une ligne, une colonne et une description de ce qui était attendu, au lieu d'un panneau de sortie vide.

Les espaces en dehors des chaînes n'ont aucun sens en JSON. La RFC 8259 autorise espace, tabulation, retour chariot et saut de ligne entre deux jetons quelconques, donc reformater ne peut pas changer ce qu'un document signifie. L'espace à l'intérieur d'une chaîne est une donnée et reste exactement tel quel. Un formateur qui travaille sur du texte plutôt que sur un arbre syntaxique ne distingue pas ces deux cas, et c'est la façon la plus courante dont un formatage corrompt une charge utile.

L'ordre des clés est préservé. La spécification considère les objets comme non ordonnés, donc rien ne devrait en dépendre, mais l'ordre dans lequel vous avez collé est presque toujours celui qu'attendent un diff, une revue de code ou un lecteur humain, et réordonner les clés rend bruyante toute comparaison ultérieure sans rien apporter.

Collez dans le panneau de gauche et appuyez sur Embellir. Le document formaté apparaît à droite, prêt à être copié ou téléchargé. Il n'y a ni compte, ni étape d'envoi, ni quota quotidien, ni offre payante, ce que la plupart des gens cherchent en tapant JSON beautifier en ligne gratuit plutôt que la version d'essai d'un logiciel de bureau.

L'indentation par défaut est de deux espaces, ce sur quoi la plupart des écosystèmes et des guides de style se sont arrêtés. Quatre espaces et les tabulations sont disponibles si votre dépôt a déjà tranché à votre place, et le choix est mémorisé localement dans votre navigateur plutôt que sur un serveur, puisqu'il n'y a aucun serveur pour le mémoriser.

Tout tourne dans un Web Worker, de sorte que l'interface reste réactive pendant qu'un document est parsé. Une charge de 100 Ko se formate en environ 9 à 13 ms, 1 Mo en 70 à 119 ms, et 10 Mo en 0,6 à 0,8 seconde, mesuré sur une machine de bureau sur deux exécutions. Prenez cela comme une fourchette et non comme un benchmark, mais la forme compte : 10 Mo suffisent à figer complètement un thread principal, et ici cela ne tourne pas sur un thread principal.

Après la première visite la page est en cache, donc ce JSON beautifier en ligne continue de fonctionner réseau débranché. Ce n’est pas une astuce de service worker. C’est le résultat naturel d’une page statique qui fait son travail localement : réseau coupé, le ping analytique échoue simplement, et tous les outils continuent, parce qu’aucun d’eux n’avait besoin d’un serveur au départ.

La plupart des formateurs sont une zone de texte et un bouton. Le collage entre, le texte formaté sort, et si le document était cassé vous voilà de retour dans votre éditeur à deviner. Le panneau ici est un véritable éditeur de code, avec coloration syntaxique, correspondance des accolades, repliement de code, recherche incrémentale et marqueurs d'erreur en ligne, de sorte que vous pouvez corriger ce que vous avez collé et le reformater sans quitter la page.

Le repliement compte plus qu'il n'y paraît. Un fichier de configuration de 4 000 lignes n'est pas lisible du seul fait qu'il est indenté. Ce qui le rend vraiment lisible, c'est de replier toutes les branches sauf celle qui vous intéresse, et c'est une propriété de l'éditeur, pas du formateur.

Si vous voulez le même document sous forme d'arbre repliable plutôt que de texte, la visionneuse JSON l'affiche ainsi. La validation signale tous les problèmes au lieu de s'arrêter au premier. La réparation traite le presque-JSON, guillemets simples, virgules finales et clés non quotées, et liste chaque changement effectué pour que vous puissiez refuser ceux qui relevaient du jugement plutôt que de la correction.

Ceux qui cherchent la meilleure visionneuse et le meilleur JSON beautifier en ligne ne posent en général pas une question sur l'indentation, que tous les outils réussissent. Ils posent une question sur les documents qui cassent les outils : des entiers plus grands que ce que JavaScript peut contenir, des clés dupliquées et des caractères invisibles collés depuis une messagerie ou un traitement de texte. Cela est traité ici, décrit plus haut avec de vraies sorties, et c'est la seule partie qui mérite discussion.

Un onglet de navigateur n'est pas toujours l'endroit où vous voulez que cela se passe. Si le fichier est déjà ouvert dans votre éditeur, le JSON beautifier le plus rapide est celui qui y est associé à une touche.

Notepad++ n'a pas de formateur JSON intégré. La réponse habituelle est le greffon JSTool : ouvrez Plugins, puis Plugins Admin, cherchez JSTool, installez-le, redémarrez, et la commande apparaît sous Plugins, JSTool, JSFormat. Cela fonctionne, et pour des charges utiles ordinaires c'est le bon outil. Sachez que JSTool parse les nombres en flottants 64 bits, donc un identifiant de type Twitter ou Snowflake au-dessus de 9007199254740991 ressort avec des chiffres différents de ceux qui sont entrés, sans le dire.

Sublime Text utilise le paquet Pretty JSON, installé via Package Control et associé à Ctrl+Alt+J par défaut. Il formate via Python, ce qui veut dire que les grands entiers survivent exactement, un avantage réel sur les options basées sur JavaScript. En revanche il supprime les clés dupliquées sans rien dire, en gardant la dernière.

VS Code n'a besoin d'aucun greffon. Formater le document, soit Maj+Alt+F sous Windows et Linux et Maj+Option+F sous macOS, formate tout fichier que l'éditeur reconnaît comme du JSON. Il existe aussi une commande Format JSON dans la palette.

Ce qu'aucun de ces outils ne donne, c'est un diagnostic. Ils formatent un document valide et refusent un document invalide, ce qui va très bien jusqu'au jour où le document est invalide et fait 40 000 lignes. C'est le cas pour lequel cette page est faite, et c'est aussi celui d'une machine sur laquelle vous n'avez pas le droit d'installer de greffon.

Une extension JSON beautifier pour Chrome fait quelque chose de réellement utile : elle intercepte les réponses servies en application/json et les affiche formatées et repliables dans la barre d'adresse, si bien qu'une API que vous explorez devient lisible sans passer par un formateur. Firefox le fait nativement depuis la version 44 et n'a besoin d'aucune extension pour cela.

Le coût mérite d'être lu avant d'en installer une. Pour réécrire la page de n'importe quelle API que vous visitez, l'extension doit demander l'autorisation de lire et modifier vos données sur tous les sites web, soit la permission la plus large que Chrome accorde. Cette permission couvre votre banque, votre messagerie et la console d'administration de votre entreprise, et elle persiste à travers chaque mise à jour silencieuse que l'extension publie ensuite. Une extension JSON beautifier est une chose raisonnable à installer venant d'un mainteneur en qui vous avez des raisons d'avoir confiance, et une mauvaise chose à installer parce que c'était le premier résultat.

Cette page n'a besoin de rien de tout cela. Elle fonctionne de la même façon dans Chrome, Firefox, Safari et Edge, elle n'installe rien et ne détient aucune permission sur les autres sites que vous visitez, parce qu'une page n'est pas une extension : elle peut se lire elle-même et rien d'autre. Coller demande une frappe de plus qu'une extension qui intercepte, et c'est toute la différence.

Vous n'avez pas besoin d'une bibliothèque pour cela. JSON.stringify prend un troisième argument qui contrôle l'indentation, et il est présent dans tous les moteurs JavaScript : JSON.stringify(valeur, null, 2) indente avec deux espaces, et passer une chaîne au lieu d'un nombre, comme dans JSON.stringify(valeur, null, "\t"), indente avec des tabulations.

C'est au moment d'injecter le résultat dans une page qu'un JSON beautifier en HTML dérape. La sortie doit se trouver dans un élément <pre>, sinon chaque suite d'espaces est réduite et vous avez défait le formatage, et elle doit être échappée avant d'être insérée comme HTML. Sinon une valeur de chaîne contenant </script> ou un chevron est remise au parseur comme du balisage, ce qui est une faille de cross site scripting avec des étapes en plus.

En React, cet échappement est déjà fait pour vous. <pre>{JSON.stringify(donnees, null, 2)}</pre> constitue à lui seul un JSON beautifier React pour le débogage, et comme React échappe le texte interpolé par défaut, c'est sûr même avec une entrée non fiable. La règle est simplement de ne jamais recourir à dangerouslySetInnerHTML pour afficher du JSON, seul moyen de perdre cette garantie.

La réserve qui vaut pour tous ces cas est la précision numérique. JSON.parse transforme chaque nombre en double, donc un identifiant au-dessus de 2^53-1 est déjà le mauvais nombre avant même que JSON.stringify ne le voie, et aucun formatage ne ramène ces chiffres. Si votre charge utile contient de grands identifiants, lisez d'abord ce qui arrive à un entier au-dessus de 2^53-1. Le beautifier de cette page réémet les chiffres exacts que vous avez collés, raison pour laquelle sa sortie et un aller-retour par JSON.parse ne coïncident pas toujours.