Van JSON5 naar JSONC: flexibeler werken met JSON-bestanden

Houdt strikte JSON je ‘s nachts wakker door één ontbrekende komma? Maak kennis met zijn toegeeflijkere neven — JSON5 en JSON with Comments (JSONC).

Wat is JSON5?

JSON5 is een uitbreiding van JSON die functies uit ECMAScript 5.1 overneemt, zoals sleutels zonder aanhalingstekens, afsluitende komma’s, strings met enkele aanhalingstekens, commentaar en hexadecimale getallen. Het wordt beheerd door de community en is ontworpen om handgeschreven configuratiebestanden leesbaarder en toegeeflijker te maken dan strikte JSON.

Wat is JSONC?

JSONC (JSON with Comments) is een minimale uitbreiding van standaard JSON die ondersteuning toevoegt voor regelcommentaar (//) en blokcommentaar (/* */), plus afsluitende komma’s. Het wordt onderhouden door Microsoft en is het standaardformaat voor VS Code-instellingen, tsconfig.json en andere TypeScript-configuratiebestanden.

Waarom we “toegeeflijke” JSON nodig hebben

Leesbaarheidsproblemen: Standaard JSON staat geen commentaar, afsluitende komma’s of enkele aanhalingstekens toe, wat de leesbaarheid in configuraties en demo’s vermindert.
Samenwerken in teams: Grote JSON-bestanden zonder inline-notities zijn moeilijk te onderhouden; één kleine wijziging kan het hele bestand ongeldig maken.
DevOps in de praktijk: Kubernetes en CI/CD-pipelines voegen regelmatig JSON on the fly samen of genereren het; toegeeflijke syntax vermindert handmatige correcties aanzienlijk.

JSON5 versus JSONC in één oogopslag

Functie	JSON (strikt)	JSON5	JSONC
`//` enkelvoudig commentaar	Nee	Ja	Ja
`/* */` meervoudig commentaar	Nee	Ja	Ja
Afsluitende komma’s	Nee	Ja	Ja
Strings met enkele aanhalingstekens	Nee	Ja	Nee
Sleutels zonder aanhalingstekens	Nee	Ja	Nee
Numerieke tekens `+` / `-`	Nee	Ja	Nee
Hex- en binaire getallen	Nee	Ja	Nee
Spec-beheerders	ECMA	Community (A. Rauschmayer)	Microsoft / VS Code

In één zin: JSON5 voelt als een JavaScript object literal, terwijl JSONC gewoon standaard JSON plus commentaar is.

Syntaxisvoorbeelden

Standaard JSON (strikt)

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

JSON5-voorbeeld

// Project config
{
  name: 'Go Tools',      // single quotes & unquoted keys
  features: [
    'Base64',
    'JSON Formatter',    // trailing comma
  ],
  version: 1.0,          // non-string number allowed
}

JSONC-voorbeeld

{
  // Project name
  "name": "Go Tools",
  // Feature list
  "features": [
    "Base64",
    "JSON Formatter", // trailing comma
  ]
}

Ondersteuning voor formatteren en parsen

Scenario	JSON5	JSONC	Aanbevolen libs / tools
Browser	`JSON5.parse()` polyfill, Prettier met ingebouwde `json5`-parser (>= v1.13)	VS Code `settings.json` native ondersteuning	—
Node.js	`json5` npm-pakket	`comment-json`, `jsonc-parser`	Ondersteunen CLI-formattering en AST-analyse
IDE	VS Code, WebStorm-extensies	VS Code native, WebStorm-plugin	Prettier kan formattering verenigen
CI / Lint	`eslint-plugin-json5`	`eslint-plugin-jsonc`	Integreer met Husky & lint-staged
Online tool	Go Tools JSON Formatter (maakt JSON5/JSONC mooi en valideert het)	Hetzelfde	JSON Formatter

Snel formatteren in VS Code

Voeg dit toe aan settings.json:

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

Druk daarna op Alt + Shift + F om een JSONC-bestand te verfraaien.

Veelgebruikte configuratiebestanden in de praktijk

JSON5 en JSONC worden al volop gebruikt in configuratiebestanden die je dagelijks tegenkomt. Hier zijn concrete voorbeelden:

TypeScript (tsconfig.json — JSONC)

{
  // Strict mode catches more bugs at compile time
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    // Path aliases for cleaner imports
    "paths": {
      "@/*": ["./src/*"],
      "@tests/*": ["./tests/*"],
    },
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"],
}

tsconfig.json van TypeScript gebruikt ingebouwde JSONC-ondersteuning — commentaar en afsluitende komma’s werken direct. Dit is een van de meest voorkomende JSONC-bestanden in elk JavaScript/TypeScript-project.

ESLint flat config (eslint.config.json — JSONC)

{
  "rules": {
    // Warn on console.log, but allow console.error
    "no-console": ["warn", { "allow": ["error", "warn"] }],
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
  }
}

Babel (babel.config.json5 — JSON5)

{
  // Single quotes and unquoted keys make it more readable
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.25%, not dead',
      modules: false,  // Let bundler handle modules
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
  ],
}

VS Code-werkruimte-instellingen (.vscode/settings.json — JSONC)

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

  // Language-specific overrides
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
}

Praktische tips en aandachtspunten

1. Zet altijd om naar strikte JSON voor productie

Browsers vereisen nog steeds strikte JSON voor JSON.parse. Gebruik build-tooling om commentaar en afsluitende komma’s te verwijderen:

// Node.js build script: convert JSON5 config to strict JSON
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));

Gebruik voor bundlers rollup-plugin-json5 of vite-plugin-json5 om de omzetting automatisch tijdens de build af te handelen.

2. Veiligheid en betrouwbaarheid

Toegeeflijkheid kan verborgen velden maskeren. Valideer configuraties altijd met JSON Schema of zod voordat je ze verwerkt:

// Validate config shape with zod after parsing
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); // Gooit een fout als de data ongeldig is

3. Teamafspraken

Vermeld in de README dat *.json5 alleen voor configuraties geldt; releasepakketten moeten strikte .json bevatten.
Standaardiseer Prettier-regels om ruis in diffs te voorkomen.
Gebruik .editorconfig om consistente inspringing af te dwingen voor JSON-, JSON5- en JSONC-bestanden.

4. Prestaties

JSON5/JSONC verwerken voegt afhankelijkheden en een kleine overhead toe — prima voor CLI- en ontwikkeltools, maar meet dit voor productie. Het json5 npm-pakket is circa 8 KB geminificeerd, en het parsen gaat ruwweg 2–5 keer langzamer dan de ingebouwde JSON.parse. Voor configuratiebestanden die eenmalig bij opstarten worden geladen, is dit verwaarloosbaar. Voor veelgebruikte codepaden die duizenden objecten per seconde verwerken, kun je beter bij strikte JSON blijven.

Veelgestelde vragen

Wat is het verschil tussen JSON5 en JSONC?

JSON5 breidt JSON uit met JavaScript-achtige syntax: sleutels zonder aanhalingstekens, afsluitende komma’s, regel- en blokcommentaar, hexadecimale getallen en meerregelige strings. JSONC is eenvoudiger — het voegt alleen regelcommentaar (//) en blokcommentaar (/* */) toe aan standaard JSON. Kies JSONC voor configuratiebestanden waar commentaar voldoende is; kies JSON5 wanneer je rijkere syntax nodig hebt.

Kan ik JSON5 of JSONC gebruiken in productie-API’s?

Nee — JSON5 en JSONC zijn bedoeld voor configuratiebestanden, niet voor gegevensuitwisseling. API’s moeten standaard JSON (RFC 8259) gebruiken voor maximale interoperabiliteit. Reserveer JSON5/JSONC voor lokale configuratiebestanden zoals tsconfig.json, .vscode/settings.json of omgevingsconfiguratie, waar leesbaarheid voor mensen zwaarder weegt dan machineverwerking.

Ondersteunt VS Code JSON5 native?

VS Code ondersteunt JSONC native (de eigen instellingsbestanden gebruiken JSONC), maar ondersteunt JSON5 niet direct. Voor JSON5 installeer je een speciale extensie zoals “JSON5 syntax” uit de VS Code-marktplaats. Je kunt ook .json5-bestanden koppelen aan de JSON5-taalmode in je instellingen.

Hoe zet ik JSON5 om naar standaard JSON?

Gebruik het json5 npm-pakket: JSON5.parse() leest JSON5 in, daarna geeft JSON.stringify() standaard JSON terug. Voor gebruik via de commandoregel voer je npx json5 < input.json5 > output.json uit. Online tools zoals onze JSON Formatter kunnen de omgezette output ook valideren om de juistheid te controleren.

Is JSONC hetzelfde als JSON with Comments?

Ja — JSONC staat voor “JSON with Comments” en is het formaat dat wordt gebruikt door VS Code, TypeScript (tsconfig.json) en andere Microsoft-tools. Het volgt de standaard JSON-specificatie met als enige toevoeging //- en /* */-commentaar. Parsers verwijderen commentaar voordat ze de data verwerken, waardoor de resulterende gegevensstructuur identiek is aan standaard JSON.

Probeer onze JSON Formatter om JSON5- en JSONC-bestanden direct in de browser te verfraaien en valideren — zonder dat je gegevens je apparaat verlaten.

Conclusie

Leesbaarheid en striktheid in balans brengen is een klassieke ontwikkelaarsuitdaging. JSON5 en JSONC verbeteren de schrijfervaring, en met de juiste build- en validatiepipeline geniet je veilig van de voordelen van “toegeeflijke JSON”.

JSON5 en JSONC formatteren: een toegeeflijkere JSON-aanpak