Định dạng JSON đẹp

Định dạng JSON với thụt lề tùy chỉnh để dễ đọc hơn

Thử ví dụ

Đầu vào

Đầu ra đã định dạng

Chạy cục bộ · An toàn để dán thông tin bí mật
JSON đã định dạng sẽ xuất hiện ở đây…

JSON Pretty Print là gì?

JSON pretty print chuyển đổi JSON nhỏ gọn, khó đọc thành định dạng nhiều dòng với thụt lề gọn gàng. Trong khi máy tính xử lý JSON một dòng dễ dàng, con người cần cấu trúc — phân cấp trực quan, dấu ngoặc thẳng hàng và thụt lề nhất quán — để hiểu dữ liệu phức tạp nhanh chóng.

Before · json
After · json
{"user":"alice","role":"admin","permissions":["read","write"],"active":true,"lastLogin":1717200000}
{
  "user": "alice",
  "role": "admin",
  "permissions": [
    "read",
    "write"
  ],
  "active": true,
  "lastLogin": 1717200000
}

Tại sao nên Pretty Print JSON?

JSON thô từ API, cơ sở dữ liệu và file log thường bị rút gọn để tiết kiệm băng thông. Pretty print khôi phục cấu trúc có thể đọc được cần thiết để debug, xem xét và hiểu dữ liệu.

🔍
Debug nhanh hơn
Phát hiện các trường thiếu, giá trị sai và lỗi cấu trúc trong vài giây thay vì phân tích từng ký tự của một khối văn bản.
👥
Code review rõ ràng hơn
Xem xét thay đổi file cấu hình JSON trong pull request dễ dàng hơn nhiều với thụt lề đúng cách — người review có thể tập trung vào những gì đã thay đổi.
🔌
Kiểm tra API
Khi khám phá API mới, các phản hồi đã định dạng cho phép hiểu mô hình dữ liệu và cấu trúc lồng nhau ngay lập tức.
📝
Tài liệu và chia sẻ
JSON đã định dạng sẵn sàng dán vào tài liệu, wiki, ticket và Slack mà không cần ai phải phân tích bằng tư duy.

Chọn thụt lề

Cả 2 và 4 dấu cách đều được sử dụng rộng rãi. Lựa chọn phù hợp thường phụ thuộc vào hướng dẫn phong cách của nhóm hoặc sở thích cá nhân.

2 dấu cách
Lựa chọn phổ biến nhất trong cộng đồng JavaScript và JSON. Giữ file nhỏ gọn trong khi vẫn dễ đọc. Được dùng bởi npm, ESLint và hầu hết hướng dẫn phong cách JS.
4 dấu cách
Phổ biến trong các dự án Python, Java và C#. Cung cấp nhiều không gian trực quan hơn và thường được ưa chuộng cho cấu trúc lồng nhau sâu.

Trường hợp sử dụng phổ biến

Debug phản hồi API
Dán phản hồi API thô và xem ngay toàn bộ cấu trúc dữ liệu, các đối tượng lồng nhau và nội dung mảng trong bố cục dễ đọc.
Đọc file cấu hình
Cấu hình được lưu trong JSON rút gọn trở nên dễ đọc và chỉnh sửa sau khi định dạng — không còn phải tìm kiếm một key cụ thể.
Phân tích log
Log có cấu trúc thường chứa payload JSON. Định dạng từng mục log riêng lẻ giúp phân tích nguyên nhân gốc rễ nhanh hơn nhiều.
Tài liệu dành cho nhà phát triển
Cung cấp ví dụ JSON rõ ràng, có thụt lề trong tài liệu API giúp nhà phát triển hiểu ngay cấu trúc của yêu cầu và phản hồi.
Khám phá dữ liệu
Khi làm việc với dataset không quen thuộc, pretty print tiết lộ toàn bộ schema — các trường, kiểu và lồng nhau — mà không cần đọc tài liệu trước.
Kiểm thử và QA
So sánh JSON mong đợi với thực tế khi kiểm thử thất bại dễ dàng hơn nhiều với thụt lề nhất quán và cấu trúc từng dòng.

Pretty Print trong Terminal

Không phải lúc nào cũng cần công cụ trình duyệt. Các lệnh này định dạng JSON trực tiếp trong terminal mà không cần cài đặt thêm.

Python
echo '{"a":1}' | python3 -m json.tool
Node.js
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync('/dev/stdin','utf8')),null,2))"
CLI (jq)
cat data.json | jq .
curl + jq
curl -s https://api.example.com/data | jq .

Câu hỏi thường gặp

What is JSON pretty printing?
JSON pretty printing (also called JSON formatting or JSON beautifying) converts compact, minified JSON into a human-readable layout with consistent indentation and line breaks. It makes nested structures, arrays, and key-value pairs easy to scan and debug.
Pretty print có thay đổi dữ liệu không?
Không. Chỉ thêm khoảng trắng — không có dữ liệu, key, giá trị hay thứ tự nào bị thay đổi. File JSON đã định dạng về mặt ngữ nghĩa giống hệt bản gốc.
2 dấu cách hay 4 dấu cách tốt hơn?
Không có cái nào tốt hơn một cách khách quan. 2 dấu cách gọn gàng hơn và là mặc định trong nhiều công cụ JavaScript. 4 dấu cách cung cấp phân tách trực quan nhiều hơn. Dùng cái mà hướng dẫn phong cách nhóm bạn quy định.
Tôi có thể pretty print JSON không hợp lệ không?
Không — đầu vào phải là JSON hợp lệ trước. Nếu có dấu phẩy thừa, dấu nháy đơn hoặc comment (JSONC/JSON5), hãy chuyển sang JSON tiêu chuẩn trước.
Làm thế nào để định dạng JSON trong DevTools của trình duyệt?
Trong Chrome/Firefox DevTools, nhấp vào nút {} ở cuối bảng phản hồi mạng để tự động định dạng. Bạn cũng có thể chạy JSON.stringify(obj, null, 2) trong console để định dạng bất kỳ đối tượng JavaScript nào.

Hướng dẫn theo ngôn ngữ