Comment formater joliment du JSON

Formater joliment du JSON (pretty printing) rend les données brutes lisibles avec une indentation et des sauts de ligne appropriés. C'est essentiel pour le débogage, la documentation, le développement d'API et tout scénario où des humains doivent inspecter des données structurées. Sans formatage, le JSON apparaît comme une seule ligne de texte continue, quasi impossible à analyser visuellement. Ce guide couvre toutes les méthodes pour formater du JSON dans différents environnements, des outils en ligne aux utilitaires en ligne de commande et bibliothèques de code.

Qu'est-ce que le formatage joli (pretty printing) ?

Le formatage joli (également appelé embellissement ou formatage) prend du JSON compact et ajoute des espaces pour le rendre lisible par un humain. Un objet JSON compact comme {"name":"John","age":30,"hobbies":["reading","coding"]} devient une représentation structurée et indentée :

{
  "name": "John",
  "age": 30,
  "hobbies": [
    "reading",
    "coding"
  ]
}

Le processus ne modifie pas les données — seulement leur présentation visuelle. La plupart des formateurs offrent une indentation configurable (2 espaces, 4 espaces ou tabulations) et un tri optionnel des clés. Certains proposent également la coloration syntaxique, des vues arborescentes repliables et la mise en évidence des erreurs pour le JSON invalide.

Méthode en ligne

L'outil Help2Code JSON Formatter fournit un formatage instantané avec coloration syntaxique, validation et une vue arborescente. C'est le moyen le plus rapide de formater du JSON sans installer de logiciel. Il suffit de coller votre chaîne JSON dans la zone de saisie et l'outil la formate en temps réel. Fonctionnalités clés :

• Formatage en temps réel pendant la frappe ou le collage
• Coloration syntaxique pour les clés, chaînes, nombres, booléens et valeurs null
• Validation JSON avec messages d'erreur spécifiques à chaque ligne
• Vue arborescente repliable pour naviguer dans les structures profondément imbriquées
• Téléchargement de la sortie formatée en fichier
• Mode minification pour compresser le JSON formaté en forme compacte
• Copie dans le presse-papiers en un clic

Cet outil est idéal pour les développeurs qui ont besoin d'inspecter rapidement des réponses API, de déboguer des fichiers de configuration ou de partager du JSON formaté avec des collègues.

Comparaison des méthodes

Outils de développement navigateur

Tous les navigateurs modernes incluent un formatage JSON intégré dans leurs outils de développement. Lorsque vous enregistrez des objets dans la console avec console.log(), le navigateur les affiche automatiquement dans une vue arborescente interactive et repliable. Cependant, pour un meilleur contrôle du formatage, utilisez JSON.stringify() avec les options de formatage :

// In browser console
const data = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St",
    city: "Boston",
    zip: "02101"
  }
};

// Pretty print with 2-space indentation
console.log(JSON.stringify(data, null, 2));

// Pretty print with 4-space indentation
console.log(JSON.stringify(data, null, 4));

// Pretty print with tab indentation
console.log(JSON.stringify(data, null, '\t'));

// Using console.table for arrays of objects
const users = [
  { id: 1, name: "Alice", role: "Admin" },
  { id: 2, name: "Bob", role: "User" }
];
console.table(users);

L'onglet Réseau (Network) des Chrome DevTools inclut également un visualiseur JSON intégré pour les réponses API. Lorsqu'une réponse a Content-Type: application/json, l'onglet Aperçu (Preview) formate et colore automatiquement le corps de la réponse avec des sections repliables.

VS Code

Visual Studio Code offre un excellent support d'édition et de formatage JSON dès l'installation :

1. Formater le document : Sélectionnez le contenu JSON et appuyez sur Shift+Alt+F (Windows/Linux) ou Shift+Option+F (Mac), ou faites un clic droit et choisissez « Formater le document ».
2. Auto-formatage à l'enregistrement : Ajoutez "editor.formatOnSave": true dans votre settings.json pour formater automatiquement les fichiers JSON lors de l'enregistrement.
3. JSON avec commentaires (.jsonc) : VS Code prend en charge les fichiers JSON contenant des commentaires, couramment utilisés pour les fichiers de configuration comme settings.json et launch.json.

Extensions VS Code supplémentaires pour la gestion JSON :

• Prettier - Formateur de code qui prend en charge JSON avec des options personnalisables
• JSON Tools - Ajoute des commandes de tri, minification et formatage
• Bracket Pair Colorizer - Colorie les paires de parenthèses correspondantes pour le JSON profondément imbriqué

Ligne de commande (jq)

jq est un puissant processeur JSON en ligne de commande qui gère le formatage, le filtrage, la transformation et l'interrogation. Il est disponible sur toutes les plateformes via les gestionnaires de paquets et est l'outil de référence pour la manipulation JSON dans les scripts :

# Basic formatting - pipe JSON to jq with the identity filter
echo '{"name":"test","value":123}' | jq .

# Colorized output (disabled by default in pipes)
echo '{"name":"test"}' | jq -C .

# Read from file and format
jq . file.json

# Save formatted output
jq . file.json > formatted.json

# Format with specific indentation (default is 2)
jq --indent 4 . file.json

# Minify JSON (remove all whitespace)
jq -c . file.json

# Sort object keys alphabetically
jq -S . file.json

# Extract and format a specific field
cat data.json | jq '.users' | jq .

# Pretty print and colorize in one command
cat messy.json | jq -C . | less -R

jq peut également être combiné avec d'autres outils en ligne de commande pour des pipelines de traitement de données puissants :

# Fetch API response and format it
curl https://api.example.com/users | jq .

# Format only the first N items
curl https://api.example.com/users | jq '.[:5]'

# Transform and format
cat data.json | jq '{name: .user.name, email: .user.email}'

Méthodes par langage

Chaque langage de programmation majeur inclut un formatage JSON intégré ou basé sur une bibliothèque :

JavaScript :

const pretty = JSON.stringify(obj, null, 2); // 2-space indent
const compact = JSON.stringify(obj); // no whitespace

// With custom replacer function to filter/transform values
const filtered = JSON.stringify(obj, ['name', 'age'], 2);

// Custom replacer to redact sensitive fields
const redacted = JSON.stringify(obj, (key, value) => {
  if (key === 'password' || key === 'ssn') return '***';
  return value;
}, 2);

// Using util.inspect in Node.js for more control
const util = require('util');
console.log(util.inspect(obj, { colors: true, depth: null, sorted: true }));

Python :

import json

data = {"name": "John", "age": 30, "active": True}

# Basic pretty print with 2-space indent
pretty = json.dumps(data, indent=2)

# Sort keys alphabetically
pretty = json.dumps(data, indent=2, sort_keys=True)

# Ensure non-ASCII characters are preserved (not escaped)
pretty = json.dumps(data, indent=2, ensure_ascii=False)

# Custom separators for more compact output
compact = json.dumps(data, separators=(',', ':'))

# Pretty print directly to console
print(json.dumps(data, indent=2, sort_keys=True))

PHP :

$data = ["name" => "John", "age" => 30, "hobbies" => ["reading"]];

// Basic pretty print
$pretty = json_encode($data, JSON_PRETTY_PRINT);

// Preserve Unicode characters
$pretty = json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);

// Sort keys
$pretty = json_encode($data, JSON_PRETTY_PRINT | JSON_SORT_KEYS);

// Format with escaping for HTML
$pretty = json_encode($data, JSON_PRETTY_PRINT | JSON_HEX_TAG | JSON_HEX_AMP);

Ruby :

require 'json'

data = { name: "John", age: 30, active: true }

# Pretty print
puts JSON.pretty_generate(data)

# Custom options
puts JSON.pretty_generate(data, indent: "    ")

Go :

package main

import (
    "encoding/json"
    "fmt"
)

func main() {
    data := map[string]interface{}{
        "name": "John",
        "age": 30,
    }
    pretty, _ := json.MarshalIndent(data, "", "  ")
    fmt.Println(string(pretty))
}

Validation JSON lors du formatage

La plupart des outils de formatage valident également la syntaxe JSON. Un JSON invalide ne peut pas être formaté car l'analyseur ne peut pas déterminer la structure prévue. Les erreurs de validation JSON courantes incluent :

• Virgules finales ([1, 2,]) - Bien qu'autorisées en JavaScript, les virgules finales sont invalides en JSON
• Guillemets simples ('value') - JSON exige des guillemets doubles pour les chaînes
• Guillemets manquants autour des clés ({name: "John"}) - Les clés doivent être entre guillemets
• Caractères de contrôle non échappés - Les tabulations, nouvelles lignes et retours chariot doivent être échappés comme \t, \n, \r
• Commentaires - JSON ne prend pas en charge les commentaires ; utilisez le format JSONC si des commentaires sont nécessaires

Quand utiliser quelle méthode

Le choix de la méthode dépend de votre flux de travail :

• Formatage ponctuel : Outil en ligne (plus rapide, aucune installation)
• Pendant le développement : Outils de développement navigateur ou VS Code (intégré à votre flux de travail)
• Dans les scripts et l'automatisation : jq (compatible avec les pipelines, scriptable)
• Formatage programmatique dans les applications : Méthodes spécifiques au langage (JavaScript JSON.stringify, Python json.dumps, PHP json_encode)
• Fichiers volumineux : jq ou outils en ligne de commande (efficaces en mémoire pour le streaming)

Conclusion

Le formatage joli du JSON est une compétence fondamentale pour tout développeur travaillant avec des API, des fichiers de configuration ou le traitement de données. Avec des méthodes disponibles pour chaque environnement — des outils en ligne aux utilitaires en ligne de commande en passant par tous les principaux langages de programmation — il y a toujours un moyen de rendre votre JSON lisible. La clé est de choisir l'outil adapté à votre contexte : rapide et pratique pour les inspections rapides, puissant et scriptable pour les pipelines automatisés.