Von JSON5 bis JSONC: Nachsichtiges JSON-Formatting in der Praxis

Wenn striktes JSON dich die ganze Nacht debuggen lässt, weil ein fehlendes Komma schuld ist, lohnt sich ein Blick auf die flexibleren Varianten: JSON5 und JSON with Comments (JSONC).

Was ist JSON5?

JSON5 ist eine Erweiterung von JSON, die Funktionen aus ECMAScript 5.1 einbezieht, darunter unquotierte Schlüssel, abschließende Kommas, einfache Anführungszeichen, Kommentare und Hexadezimalzahlen. Es wird von der Community gepflegt und soll handgeschriebene Konfigurationsdateien lesbarer und fehlertoleranter machen als striktes JSON.

Was ist JSONC?

JSONC (JSON with Comments) ist eine minimale Erweiterung von Standard-JSON, die Unterstützung für einzeilige (//) und mehrzeilige (/* */) Kommentare sowie abschließende Kommas hinzufügt. Von Microsoft gepflegt, ist es das native Format für VS-Code-Einstellungen, tsconfig.json und andere TypeScript-Konfigurationsdateien.

Warum wir „fehlertolerantes” JSON brauchen

Lesbarkeit: Standard-JSON verbietet Kommentare, abschließende Kommas und einfache Anführungszeichen, was Konfigurationen und Demos schwerer lesbar macht.
Team-Zusammenarbeit: Große JSON-Dateien ohne Inline-Notizen sind schwer zu pflegen; eine kleine Änderung kann die ganze Datei zerstören.
DevOps-Praxis: Kubernetes und CI/CD-Pipelines führen häufig JSON zusammen oder generieren es automatisch. Fehlertolerante Syntax reduziert manuelle Korrekturen.

JSON5 vs. JSONC auf einen Blick

Feature	JSON (strikt)	JSON5	JSONC
`//` einzeilige Kommentare	Nein	Ja	Ja
`/* */` mehrzeilige Kommentare	Nein	Ja	Ja
Abschließende Kommas	Nein	Ja	Ja
Einfache Anführungszeichen	Nein	Ja	Nein
Unquotierte Schlüssel	Nein	Ja	Nein
Numerische Vorzeichen `+` / `-`	Nein	Ja	Nein
Hex- / Binärzahlen	Nein	Ja	Nein
Spezifikation	ECMA	Community (A. Rauschmayer)	Microsoft / VS Code

Kurzfassung: JSON5 fühlt sich an wie ein JavaScript-Objektliteral, während JSONC einfach Standard-JSON plus Kommentare ist.

Syntax-Beispiele

Vanilla JSON (strikt)

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

JSON5-Beispiel

// Projekt-Konfiguration
{
  name: 'Go Tools',      // einfache Anführungszeichen & unquotierte Schlüssel
  features: [
    'Base64',
    'JSON Formatter',    // abschließendes Komma
  ],
  version: 1.0,          // nicht-String-Zahl erlaubt
}

JSONC-Beispiel

{
  // Projektname
  "name": "Go Tools",
  // Feature-Liste
  "features": [
    "Base64",
    "JSON Formatter", // abschließendes Komma
  ]
}

Formatting- und Parsing-Unterstützung

Szenario	JSON5	JSONC	Empfohlene Bibliotheken / Tools
Browser	`JSON5.parse()` Polyfill, Prettier mit eingebautem `json5` Parser (>= v1.13)	VS Code `settings.json` native Unterstützung	—
Node.js	`json5` npm-Paket	`comment-json`, `jsonc-parser`	CLI-Formatting & AST-Parsing unterstützen
IDE	VS Code, WebStorm-Erweiterungen	VS Code nativ, WebStorm-Plugin	Prettier kann Formatting vereinheitlichen
CI / Lint	`eslint-plugin-json5`	`eslint-plugin-jsonc`	Integration mit Husky & lint-staged
Online-Tool	Go Tools JSON Formatter (verschönert & validiert JSON5/JSONC)	Gleich	JSON Formatter

Schnelles VS-Code-Formatting

Füge zu settings.json hinzu:

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

Dann drücke Alt + Shift + F, um jede JSONC-Datei zu verschönern.

Praxis-Konfigurationsdateien

JSON5 und JSONC werden bereits in Konfigurationsdateien verwendet, denen du täglich begegnest:

TypeScript (tsconfig.json — JSONC)

{
  // Strict-Modus fängt mehr Bugs zur Kompilierzeit
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    // Pfad-Aliase für sauberere Imports
    "paths": {
      "@/*": ["./src/*"],
      "@tests/*": ["./tests/*"],
    },
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"],
}

TypeScripts tsconfig.json verwendet JSONC nativ, Kommentare und abschließende Kommas funktionieren direkt. Dies ist eine der häufigsten JSONC-Dateien in jedem JavaScript/TypeScript-Projekt.

ESLint Flat Config (eslint.config.json — JSONC)

{
  "rules": {
    // Warnung bei console.log, aber console.error erlauben
    "no-console": ["warn", { "allow": ["error", "warn"] }],
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
  }
}

Babel (babel.config.json5 — JSON5)

{
  // Einfache Anführungszeichen und unquotierte Schlüssel machen es lesbarer
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.25%, not dead',
      modules: false,  // Bundler Module verwalten lassen
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
  ],
}

VS Code Workspace Settings (.vscode/settings.json — JSONC)

{
  // Editor-Einstellungen
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,

  // Sprachspezifische Überschreibungen
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
}

Praktische Tipps und Fallstricke

1. Vor Produktion konvertieren

Browser erfordern weiterhin striktes JSON für JSON.parse. Verwende Build-Step-Tooling, um Kommentare und abschließende Kommas zu entfernen:

// Node.js Build-Skript: JSON5-Konfiguration zu striktem JSON konvertieren
import JSON5 from 'json5';
import { readFileSync, writeFileSync } from 'fs';

const config = JSON5.parse(readFileSync('config.json5', 'utf8'));
writeFileSync('config.json', JSON.stringify(config, null, 2));

Für Bundler verwende rollup-plugin-json5 oder vite-plugin-json5 für automatische Konvertierung während des Builds.

2. Sicherheit und Zuverlässigkeit

Nachsichtigkeit kann unerwünschte Felder verbergen. Validiere Konfigurationen immer mit JSON Schema oder zod, bevor du sie verarbeitest:

// Konfigurationsform mit zod nach dem Parsen validieren
import { z } from 'zod';
import JSON5 from 'json5';

const ConfigSchema = z.object({
  port: z.number().min(1).max(65535),
  host: z.string(),
  debug: z.boolean().default(false),
});

const raw = JSON5.parse(readFileSync('config.json5', 'utf8'));
const config = ConfigSchema.parse(raw); // Wirft bei Ungültigkeit

3. Team-Konventionen

Deklariere in der README, dass *.json5 nur für Konfigurationen ist; Release-Pakete sollten striktes .json liefern.
Standardisiere Prettier-Regeln, um unübersichtliche Diffs zu vermeiden.
Verwende .editorconfig, um konsistente Einrückung über JSON, JSON5 und JSONC-Dateien durchzusetzen.

4. Performance

Das Parsen von JSON5/JSONC fügt Abhängigkeiten und geringfügigen Overhead hinzu. Für CLI und Dev-Tooling ist das kein Problem, aber in Produktion solltest du messen. Das json5 npm-Paket ist ~8 KB minifiziert, und das Parsen ist ungefähr 2–5x langsamer als natives JSON.parse. Für Konfigurationsdateien, die einmal beim Start geladen werden, ist das vernachlässigbar. Für Hot Paths mit tausenden Objekten pro Sekunde bleib bei striktem JSON.

Häufig gestellte Fragen

Was ist der Unterschied zwischen JSON5 und JSONC?

JSON5 erweitert JSON um JavaScript-ähnliche Syntax: unquotierte Schlüssel, abschließende Kommas, einzeilige und Block-Kommentare, Hex-Zahlen und mehrzeilige Strings. JSONC ist einfacher: es fügt nur einzeilige (//) und Block- (/* */) Kommentare zu Standard-JSON hinzu. Wähle JSONC für Konfigurationsdateien, bei denen Kommentare ausreichen; wähle JSON5, wenn du reichhaltigere Syntax brauchst.

Kann ich JSON5 oder JSONC in Produktions-APIs verwenden?

Nein. JSON5 und JSONC sind für Konfigurationsdateien konzipiert, nicht für Datenaustausch. APIs sollten Standard-JSON (RFC 8259) für maximale Interoperabilität verwenden. Reserviere JSON5/JSONC für lokale Konfigurationsdateien wie tsconfig.json, .vscode/settings.json oder Umgebungskonfiguration, wo menschliche Lesbarkeit wichtiger ist als maschinelles Parsen.

Unterstützt VS Code JSON5 nativ?

VS Code unterstützt JSONC nativ (seine eigenen Einstellungsdateien verwenden JSONC), unterstützt aber JSON5 nicht direkt. Für JSON5 installiere eine dedizierte Erweiterung wie „JSON5 syntax” aus dem VS Code Marketplace. Du kannst auch .json5-Dateien dem JSON5-Sprachmodus in deinen Einstellungen zuordnen.

Wie konvertiere ich JSON5 zu Standard-JSON?

Verwende das json5 npm-Paket: JSON5.parse() liest JSON5, dann gibt JSON.stringify() Standard-JSON aus. Für CLI-Nutzung führe npx json5 < input.json5 > output.json aus. Online-Tools wie unser JSON Formatter können auch die konvertierte Ausgabe validieren, um Korrektheit sicherzustellen.

Ist JSONC dasselbe wie JSON with Comments?

Ja. JSONC steht für „JSON with Comments” und ist das Format, das von VS Code, TypeScript (tsconfig.json) und anderen Microsoft-Tools verwendet wird. Es folgt der Standard-JSON-Spezifikation mit dem alleinigen Zusatz von // und /* */ Kommentaren. Parser entfernen Kommentare vor der Verarbeitung, sodass die resultierende Datenstruktur identisch mit Standard-JSON ist.

Siehe auch: Leitfaden für Entwickler-Werkzeuge

Zusammenfassung

JSON5 und JSONC verbessern das Schreiberlebnis bei Konfigurationsdateien. Mit der richtigen Build- und Validierungs-Pipeline lassen sich die Vorteile flexibler JSON-Varianten sicher nutzen.

Von JSON5 bis JSONC: Nachsichtiges JSON-Formatting