📋
← Kembali ke Panduan

JSON Pretty Print: Cara Memformat JSON agar Mudah Dibaca

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

Apa itu JSON Pretty Printing?

JSON pretty printing adalah proses mengambil data JSON mentah dan ringkas (diminifikasi) dan memformat ulang dengan indentasi, jeda baris, dan spasi yang tepat agar dapat dibaca manusia. Dokumen JSON yang di-pretty-print menggunakan indentasi konsisten dan formatting struktural yang jelas yang mengungkapkan hierarki objek dan array bersarang.

Bandingkan dua representasi dari data yang sama ini:

Diminifikasi (sulit dibaca):

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

Pretty Printed (mudah dibaca):

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

Pretty Print vs JSON Diminifikasi

Pilihan antara JSON pretty-printed dan diminifikasi tergantung pada kasus penggunaan:

| Aspek | Pretty Print | Diminifikasi | |--------|-------------|----------| | Keterbacaan | Tinggi -- struktur jelas | Rendah -- semua data dalam satu baris | | Ukuran file | Lebih besar (lebih banyak whitespace) | Lebih kecil (tanpa overhead whitespace) | | Transfer jaringan | Lebih lambat untuk payload besar | Lebih cepat, lebih sedikit bandwidth | | Debugging | Ideal untuk pengembangan | Tidak praktis untuk inspeksi | | Penggunaan production | Jarang digunakan | Standar untuk respons API |

API production biasanya menyajikan JSON diminifikasi untuk mengurangi bandwidth, sementara pengembang melakukan pretty-print JSON selama pengembangan dan debugging.

Gaya Indentasi

Sebagian besar formatter mendukung dua gaya indentasi umum:

Indentasi 2 Spasi (Paling Umum)

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

Direkomendasikan untuk: Proyek JavaScript/TypeScript, pengembangan web modern, dan sebagian besar penggunaan umum.

Indentasi 4 Spasi

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

Direkomendasikan untuk: Proyek Python (gaya PEP 8) dan tim yang lebih suka indentasi lebih lebar untuk kejelasan.

Indentasi Tab

Beberapa pengembang lebih suka indentasi berbasis tab, terutama dalam alur kerja yang berfokus pada aksesibilitas di mana pengguna menyesuaikan lebar tab di editor mereka.

Memilih Indentasi yang Tepat

Sebagian besar tim menstandarisasi pada 2 spasi karena menyeimbangkan keterbacaan dengan efisiensi ruang horizontal. Ekosistem JavaScript (Node.js, React, Vue) sangat banyak menggunakan indentasi 2 spasi. Jika Anda bekerja di lingkungan yang banyak menggunakan Python, indentasi 4 spasi mungkin terasa lebih alami. Kuncinya adalah konsistensi -- pilih satu gaya dan terapkan di seluruh proyek Anda dengan alat seperti Prettier atau EditorConfig.

JSON Pretty Print di Berbagai Bahasa Pemrograman

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)

Cara Pretty Print JSON

Menggunakan Formatter JSON Online

Metode tercepat adalah menggunakan formatter JSON online gratis -- tempel JSON Anda dan dapatkan output terformat instan dengan penyorotan sintaks dan deteksi kesalahan.

Menggunakan Alat Command Line

Dengan jq (paling populer):

cat file.json | jq .

Dengan Python:

python -m json.tool file.json

Dengan Node.js:

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

Alat Pengembang Browser

Semua browser utama memformat respons JSON secara otomatis di tab Network mereka:

  • Chrome DevTools: Tab Network secara otomatis melakukan pretty-print respons JSON
  • Firefox Developer Tools: Respons JSON ditampilkan dengan tampilan pohon yang dapat dilipat
  • Safari Web Inspector: Pratinjau JSON mencakup formatting otomatis

Plugin IDE untuk Formatting JSON

VS Code

VS Code memiliki dukungan JSON bawaan yang sangat baik. Gunakan Shift+Alt+F (Windows/Linux) atau Shift+Option+F (macOS) untuk memformat file JSON apa pun. Ekstensi tambahan meningkatkan pengalaman:

  • Prettier -- Memformat JSON, JSONC, dan banyak bahasa lain secara konsisten
  • JSON Tools -- Mengurutkan, meminifikasi, dan memformat JSON dengan pintasan keyboard
  • JavaScript Booster -- Fitur manipulasi JSON tingkat lanjut

JetBrains IDE (IntelliJ, WebStorm, PyCharm)

  • Formatter bawaan: Ctrl+Alt+L (Windows/Linux) atau Cmd+Option+L (macOS)
  • Validasi dan formatting JSON otomatis saat paste

Vim / Neovim

" Format JSON in place
:%!jq .

Opsi Formatting JSON Tingkat Lanjut

Formatter JSON modern menawarkan lebih dari sekadar indentasi dasar:

  • Pengurutan kunci -- Mengurutkan kunci objek secara alfabetis untuk output yang konsisten
  • Penyorotan sintaks -- Kunci, string, angka, dan boolean berkode warna
  • Pohon yang dapat dilipat -- Membuka dan menutup struktur bersarang untuk navigasi yang lebih mudah
  • Nomor baris -- Mereferensikan lokasi tertentu selama debugging
  • Penyorotan kesalahan -- Menandai kesalahan sintaks secara visual dengan pesan detail

Praktik Terbaik untuk Keterbacaan JSON

  1. Selalu validasi sebelum memformat -- Formatter tidak dapat memperbaiki JSON yang tidak valid. Gunakan validator JSON terlebih dahulu untuk menangkap kesalahan sintaks.
  2. Tetapkan standar tim -- Sepakati indentasi (2 spasi adalah standar industri) dan terapkan dengan Prettier atau linter.
  3. Jaga nesting tetap dangkal -- JSON yang sangat bersarang (4+ level) sulit dibaca terlepas dari formatting. Pertimbangkan restrukturisasi jika memungkinkan.
  4. Gunakan kunci yang bermakna -- Nama kunci yang deskriptif dan ringkas meningkatkan keterbacaan lebih dari formatter mana pun.
  5. Tambahkan baris baru di akhir -- Akhiri file JSON dengan karakter baris baru untuk mematuhi standar POSIX dan menghindari noise diff.

Coba alat pretty print JSON online gratis kami untuk langsung memformat dan mempercantik data JSON Anda dengan indentasi yang dapat disesuaikan dan penyorotan sintaks.