แนวปฏิบัตจัดรูปแบบ JSON: อ่านง่าย ถูกต้องและมีประสิทธิภาพ
Quick Answer
ใช้ indent 2-space สำหรับ JSON ที่อ่านได้ ไม่มี trailing comma, double-quoted key, ลำดับ key สอดคล้อง minify สำหรับ production transport และ pretty-print สำหรับ development ใช้ JSON Formatter ฟรีของเราเพื่อสลับทันที
Introduction
การเลือก format JSON มีผลต่อความอ่านง่าย ขนาดไฟล์ และความเร็ว debug แม้ JSON syntax กำหนดโดย RFC 8259 แต่ indent ลำดับ key และ whitespace เป็นเรื่อง convention คู่มือนี้อธิบาย best practice ทั่วไปเพื่อ JSON สอดคล้องทั้งทีม debug ง่าย และมีประสิทธิภาพ
Step by Step
-
Choose an indentation width
2 spaces is the most common convention (Prettier, ESLint, Google JSON Style Guide). 4 spaces is acceptable for deeply nested configs. Tabs are discouraged because rendering varies across editors. Pick one and enforce it project-wide.
-
Order keys consistently
Either sort keys alphabetically for deterministic output (useful for caching and diffs) or group by domain meaning (id first, then attributes, then relationships). Avoid random key order —it makes diffs noisy and breaks snapshot tests.
-
Minify for production transport
Minified JSON removes all non-essential whitespace, reducing payload size by 10—0%. Serve minified JSON from APIs in production, and keep pretty-printed JSON for local development and debugging only.
-
Validate before sending
Always run JSON through a validator before sending to an API or writing to a config file. A single trailing comma or unquoted key will cause JSON.parse() to throw and break the consumer.
-
Use a formatter to switch modes
Paste your JSON into the JSON Formatter to beautify for reading or minify for transport. The tool validates syntax and reports the exact location of any error, saving debugging time.
Examples
Pretty-printed (2-space indent)
Input: {"id":1,"name":"Alice","active":true}
Output: {
"id": 1,
"name": "Alice",
"active": true
}
Minified for production
Input: {
"id": 1,
"name": "Alice"
}
Output: {"id":1,"name":"Alice"}
Alphabetically sorted keys
Input: {"zebra":1,"apple":2,"mango":3}
Output: {"apple":2,"mango":3,"zebra":1}
Common Problems
- Trailing commas: {"a":1,} is invalid JSON. Most formatters strip them, but strict parsers like JSON.parse() will reject the input.
- Single quotes and unquoted keys: {'a':1} and {a:1} are valid JavaScript but invalid JSON. Always use double quotes for keys and string values.
- Comments in JSON: standard JSON does not allow // or /* */ comments. Use JSONC, JSON5, or a separate schema file if you need inline documentation.
- Mixed indentation: mixing tabs and spaces breaks diff tools and can cause "inconsistent indentation" lint errors. Normalize with a formatter before committing.
Tips
- Configure your editor to format JSON on save with 2-space indentation —this prevents style debates in code review.
- For API responses, set Content-Type: application/json; charset=utf-8 and serve minified JSON with gzip/Brotli compression for maximum efficiency.
- Use deterministic key ordering (e.g., alphabetical) when JSON is hashed or compared in snapshot tests —random order causes false-positive failures.
- When debugging a large JSON payload, pretty-print it first, then use regex or jq to extract the relevant subtree instead of scanning by eye.