Dari JSON5 ke JSONC: Format JSON yang lebih fleksibel untuk konfigurasi

Ketika JSON ketat membuat Anda debugging semalaman karena satu koma yang hilang, mungkin sudah saatnya berkenalan dengan sepupunya yang lebih toleran — JSON5 dan JSON with Comments (JSONC).

Apa Itu JSON5?

JSON5 adalah ekstensi dari JSON yang menggabungkan fitur dari ECMAScript 5.1, termasuk key tanpa tanda kutip, trailing comma, string dengan tanda kutip tunggal, komentar, dan angka heksadesimal. Ia dikelola oleh komunitas dan dirancang untuk membuat file konfigurasi yang ditulis tangan lebih mudah dibaca dan lebih toleran daripada JSON ketat.

Apa Itu JSONC?

JSONC (JSON with Comments) adalah ekstensi minimal dari JSON standar yang menambahkan dukungan untuk komentar satu baris (//) dan multi-baris (/* */), ditambah trailing comma. Dikelola oleh Microsoft, ini adalah format native untuk pengaturan VS Code, tsconfig.json, dan file konfigurasi TypeScript lainnya.

Mengapa Kita Butuh JSON yang “Lenient”

Hambatan keterbacaan: JSON standar melarang komentar, trailing comma, tanda kutip tunggal, dll., yang mengurangi kejelasan dalam konfigurasi dan demo.
Kesulitan kolaborasi tim: File JSON besar tanpa catatan inline sama sekali sulit untuk dipelihara; satu perubahan kecil bisa merusak seluruh file.
Realitas DevOps: Kubernetes dan pipeline CI/CD sering menggabungkan atau menghasilkan JSON secara dinamis; sintaks yang toleran mengurangi perbaikan manual.

JSON5 vs. JSONC Sekilas

Fitur	JSON (ketat)	JSON5	JSONC
Komentar `//` satu baris	Tidak	Ya	Ya
Komentar `/* */` multi-baris	Tidak	Ya	Ya
Trailing comma	Tidak	Ya	Ya
String tanda kutip tunggal	Tidak	Ya	Tidak
Key tanpa tanda kutip	Tidak	Ya	Tidak
Tanda numerik `+` / `-`	Tidak	Ya	Tidak
Angka hex / binary	Tidak	Ya	Tidak
Pengelola spesifikasi	ECMA	Komunitas (A. Rauschmayer)	Microsoft / VS Code

Dalam satu kalimat: JSON5 terasa seperti object literal JavaScript, sedangkan JSONC hanyalah JSON standar plus komentar.

Contoh Sintaks

JSON Vanilla (ketat)

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

Contoh JSON5

// Konfigurasi proyek
{
  name: 'Go Tools',      // tanda kutip tunggal & key tanpa tanda kutip
  features: [
    'Base64',
    'JSON Formatter',    // trailing comma
  ],
  version: 1.0,          // angka non-string diperbolehkan
}

Contoh JSONC

{
  // Nama proyek
  "name": "Go Tools",
  // Daftar fitur
  "features": [
    "Base64",
    "JSON Formatter", // trailing comma
  ]
}

Dukungan Formatting & Parsing

Skenario	JSON5	JSONC	Library / tool yang direkomendasikan
Browser	Polyfill `JSON5.parse()`, Prettier dengan parser `json5` bawaan (>= v1.13)	Dukungan native `settings.json` VS Code	—
Node.js	Package npm `json5`	`comment-json`, `jsonc-parser`	Mendukung formatting CLI & parsing AST
IDE	Ekstensi VS Code, WebStorm	VS Code native, plugin WebStorm	Prettier dapat menyatukan formatting
CI / Lint	`eslint-plugin-json5`	`eslint-plugin-jsonc`	Integrasikan dengan Husky & lint-staged
Alat online	Go Tools JSON Formatter (memperindah & memvalidasi JSON5/JSONC)	Sama	JSON Formatter

Formatting Cepat di VS Code

Tambahkan ke settings.json:

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

Lalu tekan Alt + Shift + F untuk memperindah file JSONC mana pun.

File Konfigurasi Dunia Nyata

JSON5 dan JSONC sudah banyak digunakan di file konfigurasi yang Anda temui sehari-hari. Berikut contoh konkret:

TypeScript (tsconfig.json — JSONC)

{
  // Mode strict menangkap lebih banyak bug saat kompilasi
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    // Path alias untuk import yang lebih bersih
    "paths": {
      "@/*": ["./src/*"],
      "@tests/*": ["./tests/*"],
    },
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"],
}

tsconfig.json TypeScript menggunakan JSONC secara native — komentar dan trailing comma bekerja langsung. Ini adalah salah satu file JSONC paling umum di proyek JavaScript/TypeScript mana pun.

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

{
  "rules": {
    // Peringatan untuk console.log, tapi izinkan console.error
    "no-console": ["warn", { "allow": ["error", "warn"] }],
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
  }
}

Babel (babel.config.json5 — JSON5)

{
  // Tanda kutip tunggal dan key tanpa tanda kutip membuatnya lebih mudah dibaca
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.25%, not dead',
      modules: false,  // Biarkan bundler menangani module
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
  ],
}

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

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

  // Override khusus bahasa
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
}

Tips & Peringatan Praktis

1. Konversi sebelum produksi

Browser masih membutuhkan JSON ketat untuk JSON.parse. Gunakan tooling build-step untuk menghapus komentar dan trailing comma:

// Script build Node.js: konversi konfigurasi JSON5 ke JSON ketat
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));

Untuk bundler, gunakan rollup-plugin-json5 atau vite-plugin-json5 untuk menangani konversi secara otomatis saat build.

2. Keamanan & keandalan

Kelonggaran dapat menyembunyikan field berbahaya. Selalu validasi konfigurasi dengan JSON Schema atau zod sebelum menggunakannya:

// Validasi bentuk konfigurasi dengan zod setelah 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); // Throw jika tidak valid

3. Konvensi tim

Nyatakan di README bahwa *.json5 hanya untuk konfigurasi; package rilis harus mengirim .json ketat.
Standarisasi aturan Prettier untuk menghindari diff yang berisik.
Gunakan .editorconfig untuk menegakkan indentasi yang konsisten di seluruh file JSON, JSON5, dan JSONC.

4. Performa

Parsing JSON5/JSONC menambahkan dependensi dan sedikit overhead — tidak masalah untuk CLI & tooling dev, tetapi ukur untuk prod. Package npm json5 berukuran ~8 KB setelah minifikasi, dan parsing sekitar 2-5x lebih lambat dari JSON.parse native. Untuk file konfigurasi yang dimuat sekali saat startup, ini tidak signifikan. Untuk hot path yang mem-parsing ribuan objek per detik, tetap gunakan JSON ketat.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara JSON5 dan JSONC?

JSON5 memperluas JSON dengan sintaks mirip JavaScript: key tanpa tanda kutip, trailing comma, komentar satu baris dan blok, angka hex, dan string multiline. JSONC lebih sederhana — ia hanya menambahkan komentar satu baris (//) dan blok (/* */) ke JSON standar. Pilih JSONC untuk file konfigurasi di mana komentar sudah cukup; pilih JSON5 ketika Anda membutuhkan sintaks yang lebih kaya.

Bisakah saya menggunakan JSON5 atau JSONC di API produksi?

Tidak — JSON5 dan JSONC dirancang untuk file konfigurasi, bukan pertukaran data. API harus menggunakan JSON standar (RFC 8259) untuk interoperabilitas maksimal. Simpan JSON5/JSONC untuk file konfigurasi lokal seperti tsconfig.json, .vscode/settings.json, atau konfigurasi lingkungan di mana keterbacaan manusia lebih penting daripada parsing mesin.

Apakah VS Code mendukung JSON5 secara native?

VS Code mendukung JSONC secara native (file pengaturannya sendiri menggunakan JSONC), tetapi tidak mendukung JSON5 langsung dari kotak. Untuk JSON5, instal ekstensi khusus seperti “JSON5 syntax” dari marketplace VS Code. Anda juga dapat mengasosiasikan file .json5 dengan mode bahasa JSON5 di pengaturan Anda.

Bagaimana cara mengonversi JSON5 ke JSON standar?

Gunakan package npm json5: JSON5.parse() membaca JSON5, lalu JSON.stringify() menghasilkan JSON standar. Untuk penggunaan CLI, jalankan npx json5 < input.json5 > output.json. Alat online seperti JSON Formatter kami juga dapat memvalidasi output yang dikonversi untuk memastikan kebenaran.

Apakah JSONC sama dengan JSON with Comments?

Ya — JSONC singkatan dari “JSON with Comments” dan merupakan format yang digunakan oleh VS Code, TypeScript (tsconfig.json), dan tool Microsoft lainnya. Ia mengikuti spesifikasi JSON standar dengan satu-satunya penambahan komentar // dan /* */. Parser menghapus komentar sebelum memproses, sehingga struktur data yang dihasilkan identik dengan JSON standar.

Untuk lebih banyak alat developer berbasis browser termasuk encoding Base64, pembuatan hash, dan konversi timestamp, lihat Panduan Alat Developer Esensial kami.

Penutup

Menyeimbangkan keterbacaan dan kekakuan adalah perjuangan klasik developer. JSON5 dan JSONC meningkatkan pengalaman penulisan, dan dengan pipeline build & validasi yang tepat, Anda dapat menikmati manfaat “JSON yang lenient” dengan aman.

JSON5 vs JSONC: Panduan Format JSON yang Lebih Fleksibel