تنسيق JSON: كيفية تنسيق JSON لقابلية القراءة

ما هو تنسيق JSON؟

تنسيق JSON هو عملية أخذ بيانات JSON الخام والمضغوطة (minified) وإعادة تنسيقها بمسافات بادئة مناسبة وفواصل أسطر ومسافات لجعلها قابلة للقراءة البشرية. يستخدم مستند JSON المنسق مسافات بادئة متسقة وتنسيقًا هيكليًا واضحًا يكشف عن التسلسل الهرمي للكائنات والمصفوفات المتداخلة.

قارن بين هذين التمثيلين لنفس البيانات:

مضغوط (صعب القراءة):

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

منسق (سهل القراءة):

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

JSON المنسق مقابل JSON المضغوط

يعتمد الاختيار بين JSON المنسق والمضغوط على حالة الاستخدام:

| الجانب | منسق | مضغوط | |--------|-------------|----------| | قابلية القراءة | عالية -- هيكل واضح | منخفضة -- جميع البيانات في سطر واحد | | حجم الملف | أكبر (مسافات بيضاء أكثر) | أصغر (بدون عبء المسافات البيضاء) | | النقل عبر الشبكة | أبطأ للحمولات الكبيرة | أسرع، نطاق ترددي أقل | | التصحيح | مثالي للتطوير | غير عملي للفحص | | استخدام الإنتاج | نادر الاستخدام | قياسي لاستجابات API |

تقدم واجهات API الإنتاجية عادة JSON مضغوطًا لتقليل النطاق الترددي، بينما يقوم المطورون بتنسيق JSON أثناء التطوير والتصحيح.

أنماط المسافات البادئة

تدعم معظم المنسقات نمطين شائعين للمسافات البادئة:

مسافتان بادئتان (الأكثر شيوعًا)

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

موصى به لـ: مشاريع JavaScript/TypeScript وتطوير الويب الحديث ومعظم الاستخدامات العامة.

4 مسافات بادئة

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

موصى به لـ: مشاريع Python (أسلوب PEP 8) والفرق التي تفضل مسافات بادئة أوسع للوضوح.

المسافات البادئة بعلامات التبويب

يفضل بعض المطورين المسافات البادئة القائمة على علامات التبويب، خاصة في سير العمل المركّز على إمكانية الوصول حيث يضبط المستخدمون عرض علامة التبويب في محررهم.

اختيار المسافة البادئة المناسبة

توحد معظم الفرق على مسافتين لأنها توازن بين قابلية القراءة وكفاءة المساحة الأفقية. يستخدم نظام JavaScript البيئي (Node.js, React, Vue) بشكل ساحق مسافتين بادئتين. إذا كنت تعمل في بيئة غنية بـ Python، فقد تبدو 4 مسافات بادئة أكثر طبيعية. المفتاح هو الاتساق -- اختر نمطًا واحدًا وفرضه عبر مشروعك باستخدام أداة مثل Prettier أو EditorConfig.

تنسيق JSON في لغات البرمجة المختلفة

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)

كيفية تنسيق JSON

استخدام منسق JSON عبر الإنترنت

أسرع طريقة هي استخدام منسق JSON مجاني عبر الإنترنت -- الصق JSON الخاص بك واحصل على مخرجات منسقة فورية مع إبراز الصياغة واكتشاف الأخطاء.

استخدام أدوات سطر الأوامر

باستخدام jq (الأكثر شيوعًا):

cat file.json | jq .

باستخدام Python:

python -m json.tool file.json

باستخدام Node.js:

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

أدوات مطوري المتصفح

تقوم جميع المتصفحات الرئيسية بتنسيق استجابات JSON تلقائيًا في علامات تبويب الشبكة:

• Chrome DevTools: علامة تبويب الشبكة تنسق استجابات JSON تلقائيًا
• Firefox Developer Tools: يتم عرض استجابات JSON مع عروض شجرية قابلة للطي
• Safari Web Inspector: معاينة JSON تتضمن تنسيقًا تلقائيًا

إضافات IDE لتنسيق JSON

VS Code

يحتوي VS Code على دعم مدمج ممتاز لـ JSON. استخدم Shift+Alt+F (Windows/Linux) أو Shift+Option+F (macOS) لتنسيق أي ملف JSON. تعزز الإضافات الإضافية التجربة:

• Prettier -- ينسق JSON و JSONC والعديد من اللغات الأخرى باستمرار
• JSON Tools -- فرز وضغط وتنسيق JSON باستخدام اختصارات لوحة المفاتيح
• JavaScript Booster -- ميزات معالجة JSON متقدمة

JetBrains IDEs (IntelliJ, WebStorm, PyCharm)

• منسق مدمج: Ctrl+Alt+L (Windows/Linux) أو Cmd+Option+L (macOS)
• تحقق تلقائي من صحة JSON وتنسيقه عند اللصق

Vim / Neovim

" Format JSON in place
:%!jq .

خيارات تنسيق JSON المتقدمة

تقدم منسقات JSON الحديثة أكثر من مجرد مسافات بادئة أساسية:

• فرز المفاتيح -- فرز مفاتيح الكائن أبجديًا لمخرجات متسقة
• إبراز الصياغة -- ترميز لوني للمفاتيح والنصوص والأرقام والقيم المنطقية
• أشجار قابلة للطي -- توسيع وطي الهياكل المتداخلة لتسهيل التنقل
• أرقام الأسطر -- الإشارة إلى مواقع محددة أثناء التصحيح
• إبراز الأخطاء -- تمييز أخطاء الصياغة بصريًا مع رسائل مفصلة

أفضل الممارسات لقابلية قراءة JSON

1. تحقق دائمًا قبل التنسيق -- لا يمكن للمنسق إصلاح JSON غير الصالح. استخدم مدقق JSON أولاً لاكتشاف أخطاء الصياغة.
2. حدد معيارًا للفريق -- اتفق على المسافة البادئة (مسافتان هو معيار الصناعة) وفرضها باستخدام Prettier أو linter.
3. حافظ على التداخل ضحلاً -- JSON شديد التداخل (4+ مستويات) يصعب قراءته بغض النظر عن التنسيق. فكر في إعادة الهيكلة عندما يكون ذلك ممكنًا.
4. استخدم مفاتيح ذات معنى -- أسماء المفاتيح الوصفية والموجزة تحسن قابلية القراءة أكثر من أي منسق.
5. أضف أسطرًا جديدة في النهاية -- أنهِ ملفات JSON بحرف سطر جديد للامتثال لمعايير POSIX وتجنب ضوضاء diff.

جرب أداة تنسيق JSON المجانية عبر الإنترنت الخاصة بنا لتنسيق وتجميل بيانات JSON الخاصة بك فورًا مع مسافات بادئة قابلة للتخصيص وإبراز الصياغة.