De JSON5 à JSONC : une expérience de formatage JSON plus tolérante

De JSON5 à JSONC : des normes JSON plus tolérantes et leur support de formatage

Quand un simple oubli de virgule vous fait passer la nuit à déboguer un fichier JSON, il est peut-être temps de rencontrer ses cousins plus indulgents : JSON5 et JSON with Comments (JSONC).

1. Pourquoi avons-nous besoin d’un JSON « tolérant » ?

• Lisibilité : le JSON strict interdit les commentaires, les virgules finales, les guillemets simples, etc. Résultat : les fichiers de configuration et les exemples manquent de clarté.
• Collaboration : entretenir un fichier JSON volumineux sans aucune note en ligne est pénible ; la moindre modification peut casser l’ensemble.
• Réalisme DevOps : dans Kubernetes ou les pipelines CI/CD, on fusionne ou génère du JSON dynamiquement ; une syntaxe plus souple réduit les corrections manuelles.

2. JSON5 vs JSONC : vue d’ensemble

Fonctionnalité	JSON (strict)	JSON5	JSONC
Commentaires // ligne simple	❌	✅	✅
Commentaires /* */ multi-ligne	❌	✅	✅
Virgules finales	❌	✅	✅
Chaînes avec guillemets simples	❌	✅	❌
Clés sans guillemets	❌	✅	❌
Signes numériques + / -	❌	✅	❌
Nombres hexadécimaux / binaires	❌	✅	❌
Mainteneurs de la spec	ECMA	Communauté (A. Rauschmayer)	Microsoft / VS Code

En un mot : JSON5 ressemble à un littéral d’objet JavaScript, tandis que JSONC est un JSON standard avec des commentaires.

3. Exemples de syntaxe

3.1 JSON classique (strict)

{
  "name": "Go Tools",
  "features": ["Base64", "JSON Formatter"]
}

3.2 Exemple JSON5

// Configuration du projet
{
  name: 'Go Tools',      // guillemets simples & clés sans guillemets
  features: [
    'Base64',
    'JSON Formatter',    // virgule finale ✅
  ],
  version: 1.0,          // nombre non-chaîne accepté
}

3.3 Exemple JSONC

{
  // Nom du projet
  "name": "Go Tools",
  // Liste des fonctionnalités
  "features": [
    "Base64",
    "JSON Formatter", // virgule finale ✅
  ]
}

4. Outils de formatage & de parsing

Scénario	JSON5	JSONC	Bibliothèques / outils conseillés
Navigateur	Polyfill JSON5.parse() Prettier avec le parseur json5 intégré (≥ v1.13)	Prise en charge native dans settings.json de VS Code	Chrome DevTools ne prévisualise toujours pas directement
Node.js	Package npm json5	comment-json, jsonc-parser	Les deux offrent formatage CLI et parsing AST
IDE	Extensions VS Code, WebStorm	VS Code natif, plugin WebStorm	Prettier unifie le formatage
CI / Lint	eslint-plugin-json5	eslint-plugin-jsonc	À intégrer avec Husky & lint-staged
Outil en ligne	Go Tools JSON Formatter (embellit & valide JSON5 / JSONC)	Idem	https://go-tools.org/json-formatter

Formatage rapide dans VS Code

Ajoutez dans settings.json :

"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Puis appuyez sur Alt + Shift + F pour embellir n’importe quel fichier JSONC.

5. Conseils pratiques & pièges

1. Conversion avant production

   • Les navigateurs exigent encore du JSON strict pour JSON.parse.
   • Utilisez rollup-plugin-json5 ou un script perso pour transpiler JSON5/JSONC en JSON pur lors du build.

2. Sécurité & fiabilité

   • Une syntaxe tolérante peut dissimuler des champs indésirables ; validez avec JSON Schema ou zod avant d’exposer les API.

3. Convention d’équipe

   • Documentez dans le README que les fichiers *.json5 sont réservés aux configs ; les paquets publiés doivent contenir du .json strict.
   • Uniformisez les règles Prettier pour éviter les diff inutiles.

4. Performance

   • Le parsing JSON5/JSONC ajoute des dépendances et un léger overhead ; acceptable pour les outils CLI & dev, mais à mesurer en production.

6. Conclusion

Trouver l’équilibre entre lisibilité et rigueur est un défi classique. JSON5 et JSONC améliorent l’expérience d’écriture ; avec le bon pipeline de build et de validation, vous pouvez profiter sereinement d’un « JSON tolérant ».

🎉 Testez-le : rendez-vous sur Go Tools JSON Formatter → collez votre JSON5/JSONC → formatage et surlignage instantanés.

---

Références

• JSON5 sur GitHub : https://github.com/json5/json5
• Spécification JSONC (VS Code) : https://github.com/microsoft/node-jsonc-parser
• Documentation du parseur Prettier (JSON5, JSONC) : https://prettier.io/docs/options#parser
• comment-json : https://github.com/kaelzhang/node-comment-json

---