📋
← Quay lại hướng dẫn

JSON Pretty Print: Cách định dạng JSON để dễ đọc

· Thẻ: json, pretty-print, json-formatter, json-indentation, developer-tools

JSON Pretty Printing là gì?

JSON pretty printing là quá trình lấy dữ liệu JSON thô, nhỏ gọn (đã rút gọn) và định dạng lại với thụt lề, ngắt dòng và khoảng trắng phù hợp để con người có thể đọc được. Một tài liệu JSON được pretty print sử dụng thụt lề nhất quán và định dạng cấu trúc rõ ràng cho thấy phân cấp của các object và array lồng nhau.

So sánh hai cách biểu diễn của cùng một dữ liệu:

Đã rút gọn (khó đọc):

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

Pretty Printed (dễ đọc):

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

Pretty Print vs JSON đã rút gọn

Lựa chọn giữa JSON pretty print và đã rút gọn phụ thuộc vào trường hợp sử dụng:

| Khía cạnh | Pretty Print | Đã rút gọn | |-----------|-------------|------------| | Khả năng đọc | Cao -- cấu trúc rõ ràng | Thấp -- tất cả dữ liệu trên một dòng | | Kích thước tệp | Lớn hơn (nhiều khoảng trắng hơn) | Nhỏ hơn (không có chi phí khoảng trắng) | | Truyền tải mạng | Chậm hơn cho payload lớn | Nhanh hơn, ít băng thông hơn | | Gỡ lỗi | Lý tưởng cho phát triển | Không thực tế để kiểm tra | | Sử dụng production | Hiếm khi được sử dụng | Tiêu chuẩn cho phản hồi API |

API production thường phục vụ JSON đã rút gọn để giảm băng thông, trong khi nhà phát triển pretty print JSON trong quá trình phát triển và gỡ lỗi.

Kiểu thụt lề

Hầu hết các trình định dạng hỗ trợ hai kiểu thụt lề phổ biến:

Thụt lề 2 khoảng trắng (Phổ biến nhất)

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

Khuyến nghị cho: Dự án JavaScript/TypeScript, phát triển web hiện đại và hầu hết các mục đích sử dụng chung.

Thụt lề 4 khoảng trắng

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

Khuyến nghị cho: Dự án Python (phong cách PEP 8) và các nhóm thích thụt lề rộng hơn để rõ ràng.

Thụt lề Tab

Một số nhà phát triển thích thụt lề dựa trên tab, đặc biệt trong các quy trình làm việc tập trung vào khả năng tiếp cận nơi người dùng điều chỉnh độ rộng tab trong trình soạn thảo của họ.

Chọn thụt lề phù hợp

Hầu hết các nhóm tiêu chuẩn hóa trên 2 khoảng trắng vì nó cân bằng khả năng đọc với hiệu quả không gian ngang. Hệ sinh thái JavaScript (Node.js, React, Vue) áp đảo sử dụng thụt lề 2 khoảng trắng. Nếu bạn làm việc trong môi trường chủ yếu là Python, thụt lề 4 khoảng trắng có thể cảm thấy tự nhiên hơn. Điều quan trọng là tính nhất quán -- chọn một kiểu và thực thi nó trên toàn bộ dự án của bạn với một công cụ như Prettier hoặc EditorConfig.

JSON Pretty Print trong các ngôn ngữ lập trình khác nhau

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)

Cách Pretty Print JSON

Sử dụng JSON Formatter trực tuyến

Phương pháp nhanh nhất là sử dụng trình định dạng JSON trực tuyến miễn phí -- dán JSON của bạn và nhận đầu ra được định dạng ngay lập tức với tô sáng cú pháp và phát hiện lỗi.

Sử dụng công cụ dòng lệnh

Với jq (phổ biến nhất):

cat file.json | jq .

Với Python:

python -m json.tool file.json

Với Node.js:

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

Công cụ phát triển trình duyệt

Tất cả các trình duyệt chính tự động định dạng phản hồi JSON trong tab Network của chúng:

  • Chrome DevTools: Tab Network tự động pretty print phản hồi JSON
  • Firefox Developer Tools: Phản hồi JSON được hiển thị với chế độ xem dạng cây có thể thu gọn
  • Safari Web Inspector: Xem trước JSON bao gồm định dạng tự động

Plugin IDE cho định dạng JSON

VS Code

VS Code có hỗ trợ JSON tích hợp tuyệt vời. Sử dụng Shift+Alt+F (Windows/Linux) hoặc Shift+Option+F (macOS) để định dạng bất kỳ tệp JSON nào. Các tiện ích mở rộng bổ sung nâng cao trải nghiệm:

  • Prettier -- Định dạng JSON, JSONC và nhiều ngôn ngữ khác một cách nhất quán
  • JSON Tools -- Sắp xếp, rút gọn và định dạng JSON với phím tắt
  • JavaScript Booster -- Các tính năng thao tác JSON nâng cao

JetBrains IDE (IntelliJ, WebStorm, PyCharm)

  • Trình định dạng tích hợp: Ctrl+Alt+L (Windows/Linux) hoặc Cmd+Option+L (macOS)
  • Xác thực và định dạng JSON tự động khi dán

Vim / Neovim

" Định dạng JSON tại chỗ
:%!jq .

Tùy chọn định dạng JSON nâng cao

Các trình định dạng JSON hiện đại cung cấp nhiều hơn chỉ thụt lề cơ bản:

  • Sắp xếp khóa -- Sắp xếp khóa object theo thứ tự bảng chữ cái để đầu ra nhất quán
  • Tô sáng cú pháp -- Mã màu cho khóa, chuỗi, số và boolean
  • Chế độ xem dạng cây có thể thu gọn -- Mở rộng và thu gọn cấu trúc lồng nhau để điều hướng dễ dàng hơn
  • Số dòng -- Tham chiếu vị trí cụ thể trong quá trình gỡ lỗi
  • Tô sáng lỗi -- Đánh dấu trực quan lỗi cú pháp với thông báo chi tiết

Các phương pháp tốt nhất cho khả năng đọc JSON

  1. Luôn xác thực trước khi định dạng -- Trình định dạng không thể sửa JSON không hợp lệ. Sử dụng trình xác thực JSON trước để phát hiện lỗi cú pháp.
  2. Đặt tiêu chuẩn nhóm -- Thống nhất về thụt lề (2 khoảng trắng là tiêu chuẩn ngành) và thực thi nó với Prettier hoặc linter.
  3. Giữ độ lồng nông -- JSON lồng sâu (4+ cấp) khó đọc bất kể định dạng. Cân nhắc tái cấu trúc khi có thể.
  4. Sử dụng khóa có ý nghĩa -- Tên khóa mô tả, ngắn gọn cải thiện khả năng đọc hơn bất kỳ trình định dạng nào.
  5. Thêm dòng mới ở cuối -- Kết thúc tệp JSON bằng ký tự dòng mới để tuân thủ tiêu chuẩn POSIX và tránh nhiễu diff.

Hãy thử công cụ JSON pretty print trực tuyến miễn phí của chúng tôi để định dạng và làm đẹp dữ liệu JSON của bạn ngay lập tức với thụt lề có thể tùy chỉnh và tô sáng cú pháp.