📋
← Terug naar handleidingen

JSON pretty print: JSON opmaken voor leesbaarheid

· Tags: json, pretty-print, json-formatter, json-indentation, developer-tools

Wat is JSON pretty printing?

JSON pretty printing is het proces van het nemen van ruwe, compacte (geminificeerde) JSON-gegevens en deze opnieuw opmaken met de juiste inspringing, regeleinden en spaties om ze leesbaar te maken voor mensen. Een mooi afgedrukt JSON-document gebruikt consistente inspringing en duidelijke structuuropmaking die de hiërarchie van geneste objecten en arrays onthult.

Vergelijk deze twee weergaven van dezelfde gegevens:

Geminificeerd (moeilijk te lezen):

{"users":[{"id":1,"name":"Alice","roles":["admin","editor"]},{"id":2,"name":"Bob","roles":["viewer"]}],"total":2}

Mooi afgedrukt (gemakkelijk te lezen):

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "roles": ["admin", "editor"]
    },
    {
      "id": 2,
      "name": "Bob",
      "roles": ["viewer"]
    }
  ],
  "total": 2
}

Pretty print vs. geminificeerde JSON

De keuze tussen mooi afgedrukte en geminificeerde JSON hangt af van het gebruik:

| Aspect | Pretty print | Geminificeerd | |--------|-------------|----------| | Leesbaarheid | Hoog -- duidelijke structuur | Laag -- alle gegevens op één regel | | Bestandsgrootte | Groter (meer witruimte) | Kleiner (geen witruimte-overhead) | | Netwerkoverdracht | Langzamer voor grote payloads | Sneller, minder bandbreedte | | Debuggen | Ideaal voor ontwikkeling | Ongeschikt voor inspectie | | Productiegebruik | Zelden gebruikt | Standaard voor API-antwoorden |

Productie-API's leveren doorgaans geminificeerde JSON om bandbreedte te besparen, terwijl ontwikkelaars JSON tijdens ontwikkeling en debuggen mooi afdrukken.

Inspringingsstijlen

De meeste formatters ondersteunen twee veelvoorkomende inspringingsstijlen:

Inspringing met 2 spaties (meest gebruikelijk)

{
  "name": "Alice",
  "age": 30,
  "address": {
    "city": "New York"
  }
}

Aanbevolen voor: JavaScript/TypeScript-projecten, moderne webontwikkeling en de meeste algemene toepassingen.

Inspringing met 4 spaties

{
    "name": "Alice",
    "age": 30,
    "address": {
        "city": "New York"
    }
}

Aanbevolen voor: Python-projecten (PEP 8-stijl) en teams die de voorkeur geven aan bredere inspringing voor duidelijkheid.

Tab-inspringing

Sommige ontwikkelaars geven de voorkeur aan op tabs gebaseerde inspringing, vooral in toegankelijkheidsgerichte workflows waarbij gebruikers de tabbreedte in hun editor aanpassen.

De juiste inspringing kiezen

De meeste teams standaardiseren op 2 spaties omdat dit leesbaarheid in evenwicht brengt met efficiëntie in horizontale ruimte. Het JavaScript-ecosysteem (Node.js, React, Vue) gebruikt in overgrote meerderheid inspringing met 2 spaties. Als je in een Python-intensieve omgeving werkt, voelt inspringing met 4 spaties misschien natuurlijker aan. De sleutel is consistentie -- kies één stijl en handhaaf deze in je project met een tool zoals Prettier of EditorConfig.

JSON pretty print in verschillende programmeertalen

JavaScript / Node.js

const formatted = JSON.stringify(data, null, 2);
console.log(formatted);

Python

import json
formatted = json.dumps(data, indent=2)
print(formatted)

Java

import com.fasterxml.jackson.databind.ObjectMapper;
ObjectMapper mapper = new ObjectMapper();
String formatted = mapper.writerWithDefaultPrettyPrinter()
    .writeValueAsString(data);

Go

import "encoding/json"
formatted, _ := json.MarshalIndent(data, "", "  ")
fmt.Println(string(formatted))

Ruby

require 'json'
puts JSON.pretty_generate(data)

Hoe JSON mooi af te drukken

Een online JSON-formatter gebruiken

De snelste methode is het gebruik van een gratis online JSON-formatter -- plak je JSON en ontvang direct, opgemaakte uitvoer met syntaxmarkering en foutdetectie.

Opdrachtregeltools gebruiken

Met jq (meest populair):

cat file.json | jq .

Met Python:

python -m json.tool file.json

Met Node.js:

node -e "const d = require('./file.json'); console.log(JSON.stringify(d, null, 2));"

Ontwikkelaarstools in de browser

Alle grote browsers formatteren JSON-antwoorden automatisch in hun Netwerk-tabbladen:

  • Chrome DevTools: Het Netwerk-tabblad drukt JSON-antwoorden automatisch mooi af
  • Firefox Developer Tools: JSON-antwoorden worden weergegeven met inklapbare boomweergaven
  • Safari Web Inspector: De JSON-preview bevat automatische opmaak

IDE-plugins voor JSON-opmaak

VS Code

VS Code heeft uitstekende ingebouwde JSON-ondersteuning. Gebruik Shift+Alt+F (Windows/Linux) of Shift+Option+F (macOS) om elk JSON-bestand op te maken. Extra extensies verbeteren de ervaring:

  • Prettier -- Formatteert JSON, JSONC en vele andere talen consistent
  • JSON Tools -- Sorteer, minificeer en formatteer JSON met toetsenbordsneltoetsen
  • JavaScript Booster -- Geavanceerde JSON-manipulatiefuncties

JetBrains IDE's (IntelliJ, WebStorm, PyCharm)

  • Ingebouwde formatter: Ctrl+Alt+L (Windows/Linux) of Cmd+Option+L (macOS)
  • Automatische JSON-validatie en -opmaak bij het plakken

Vim / Neovim

" Format JSON in place
:%!jq .

Geavanceerde JSON-opmaakopties

Moderne JSON-formatters bieden meer dan alleen basisinspringing:

  • Sleutelsortering -- Object-sleutels alfabetisch sorteren voor consistente uitvoer
  • Syntaxmarkering -- Sleutels, strings, getallen en booleans in kleurcodes
  • Inklapbare bomen -- Geneste structuren uit- en inklappen voor eenvoudigere navigatie
  • Regelnummers -- Specifieke locaties raadplegen tijdens het debuggen
  • Foutmarkering -- Syntaxfouten visueel markeren met gedetailleerde berichten

Beste praktijken voor JSON-leesbaarheid

  1. Valideer altijd vóór het opmaken -- Een formatter kan ongeldige JSON niet repareren. Gebruik eerst een JSON-validator om syntaxfouten op te sporen.
  2. Stel een teamstandaard in -- Spreek inspringing af (2 spaties is de industriestandaard) en handhaaf deze met Prettier of een linter.
  3. Houd nesten ondiep -- Diep geneste JSON (4+ niveaus) is moeilijk te lezen, ongeacht de opmaak. Overweeg waar mogelijk te herstructureren.
  4. Gebruik betekenisvolle sleutels -- Beschrijvende, beknopte sleutelnamen verbeteren de leesbaarheid meer dan welke formatter dan ook.
  5. Voeg afsluitende regeleinden toe -- Eindig JSON-bestanden met een regeleindeteken om te voldoen aan POSIX-standaarden en diff-ruis te voorkomen.

Probeer onze gratis online JSON pretty print-tool om je JSON-gegevens direct op te maken en te verfraaien met aanpasbare inspringing en syntaxmarkering.