Softonic

تنسيق JavaScript

خطوة 1 / 3
التالي

قم بلصق كتلة من كود جافا سكريبت مختصر أو مُدرج بعلامات انحدار غير صحيحة، ثم حصل على كود نظيف وسهل القراءة مُهيأ وفق نفس القواعد التي تستخدمها أدوات التحرير. اختر نوع العلامات التبويبية أو الفواصل، والاقتباسات الأحادية أو المزدوجة، وعلامات النقطة والفاصلة (؛) أو عدم استخدامها، بالإضافة إلى وجود فواصل في نهاية الجمل وفقًا لمعيار ES5 أو جميعها معًا. يدعم هذا الكود الصيغة النحوية الحديثة، بما في ذلك الربط الاختياري، والدمج عند قيم صفرية، وJSX، وTypeScript، وخاصية الانتظار على المستوى الأعلى (top-level await).

كيفية تنسيق لغة جافا سكريبت

  1. 1

    لصق المصدر

    أي كود صحيح لغة JavaScript أو JSX أو TypeScript؛ حيث يقوم المحلل باختيار النمط اللغوي من بنية الكود.

  2. 2

    قم بضبط تفضيلاتك

    حجم الحفر، الأشرطة مقابل الفواصل، نمط الاقتباسات، علامات النقطة والفاصلة، عرض الطباعة، الفواصل النهائية.

  3. 3

    التنسيق

    يقوم الأداة بتنفيذ عملية تنسيق متوافقة مع Prettier ويُخرِج النتيجة المُنسَّقة.

  4. 4

    قم بنسخ الناتج.

    قم بنسخ المحتوى بنقرة واحدة أو قم بتنزيله كملف؛ حيث يتم إلغاء التنسيق الأصلي للإدراج، وليس تراكيبه فوقه.

خيارات النمط

الخيار القيم القيمة الافتراضية
الانحناء tab، 2، 4 مسافتان
نمط الاقتباس single، double مزدوج
علامات الفاصلة always، never دائمًا
عرض الطباعة 60 - 120 80
علامات الفاصلة الخلفية none، es5، all es5
علامات السهم always، avoid دائمًا
مسافة الأقواس true، false صحيح
اقتباس واحد لـ JSX true، false خاطئ

لماذا يهم تنسيق النصوص؟

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

  • تنتهي عملية إزالة التنسيقات الزائفة (Bike-shedding) بمجرد أن يتبنى المشروع تنسيقًا رسميًا. يوضح أمر git diff التغيير الفعلي، وليس الخلافات المتعلقة بأساليب التنسيق الداخلي.
  • مربوطات التأكيد المسبق (باستخدام أدوات مثل Husky وlint-staged) تقوم تلقائيًا بتنسيق ملفات المرحلة قبل إرسالها للتأكيد.
  • التكامل مع المحرر (VS Code، WebStorm) يُطبّق نفس القواعد عند حفظ الملف.

ما الذي لا يقوم به التنسيق؟

  • لا يُجري فحوصات lint. قواعد الأسلوب (no-unused-vars، eqeqeq) تقع ضمن نطاق اختصاص أداة ESLint؛ أما مُنظم التنسيق فهو يقتصر فقط على إعادة تنظيم المسافات الفارغة وعلامات الترقيم، ولا يرفض الكود بسبب مشاكل منطقية.
  • لا يصحح أخطاء النحو. إذا كان المدخل غير صحيح من ناحية لغة JavaScript، فإن أداة تنسيق النصوص ستطرح خطأًا. استخدمها كفحص للتحقق من سلامة الكود، للتأكد من أن النظام قادر على تحليله على الأقل.
  • لا يفرض قواعد تسمية محددة؛ فالتباين بين camelCase وsnake_case يُعد قاعدة كشف أخطاء (lint rule)، وليس قاعدة تنسيق.

الأخطاء الشائعة

  • معارك التنسيق: إذا استمررت في إعادة تنسيق النص بعد تشغيل البرنامج، فأنت تضيع وقتك دون جدوى؛ لذا إما قم بضبط الخيارات المناسبة، أو اتبع اختيار البرنامج نفسه.
  • التنسيق على ملف مُنتج: لا يُفيد أي من المخرجات الناتجة عن أداة التجميع، أو الكود المُجمَّع، أو ملف .min.js؛ فالتنسيق ينطبق على المصادر فقط، وليس على المنتجات النهائية.
  • التنسيق دون تحليل: استخدام صيغة نمطية بالتعابير النمطية (regex) قد يؤدي إلى تلف النصوص القيمية القائمة على القوالب (template literals)، والنصوص القيمية من التعابير النمطية، بالإضافة إلى بيانات JSX. يُنصح دائمًا باستخدام مُنظّم تنسيقي مبني على شجرة الصيغة المجردة (AST)، مثل هذا المثيل.

الأسئلة الشائعة

نعم، يقوم مُحلل النص بالكشف عن صيغة TypeScript (الأنواع، الواجهات، العناصر العامة، المُزيّنات) ويُنظمها وفقًا لذلك؛ كما يدعم تنسيق JSX في ملفات .tsx/.jsx.

يتبع نفس القواعد المطبقة على إعدادات برنامج Prettier الافتراضية، ويمكن تهيئة هذه الإعدادات من خلال الخيارات الشائعة (عرض الطباعة، علامات الاقتباس، علامات النقطة والفاصلة، وعلامات الفاصلة في نهاية الجملة). يجب أن يتطابق ملف مُهيأ بهذه الطريقة مع ملف تم تهيئته باستخدام برنامج Prettier بنفس الإعدادات.

يتطلب أداة تنسيق البيانات كودًا جافاسكريبتًا صحيحًا وقابلًا لتحليله. إذا ظهر خطأ، فمن المرجح أن يكون السبب في ذلك مشكلة في صيغة الكود (مثل قوس غير مغلق، أو كود JSX غير صحيح، أو خطأ إملائي). إذا كانت الرسالة غير واضحة، يُنصح بتشغيل الكود أولًا باستخدام أداة تدقيق للكود.

نعم، تُحتفظ كل من التعليقات ذات السطر الواحد (//) والتعليقات المتسلسلة (/* */) في الناتج، وتُوضع بالقرب من مواقعها في المصدر.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

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

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

مولد EditorConfig

أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.

منسق HTML

نسّق HTML محلياً في المتصفح بمسافة بادئة من مسافتين أو أربع مسافات. لا يُرفع HTML ولا يُتحقق منه.

الأداة متاحة بلغات أخرى