Loading…

حول مزين JavaScript عبر الإنترنت

تواجه صعوبة مع JavaScript المضغوط أو الفوضوي؟ يحول مزين JavaScript الخاص بنا الأسطر المفردة المضغوطة إلى كود قابل للقراءة ومنظم جيداً بنقرة واحدة. تستخدم الأداة نفس المكون الأساسي لضاغط JavaScript ولكنها تفترض إجراء <strong>التنسيق</strong> بشكل افتراضي، لذا يمكنك التبديل بين الإخراج القابل للقراءة والمضغوط متى احتجت. يعمل كل شيء من جانب العميل للسرعة والخصوصية.

لماذا تستخدم مُنسّق JavaScript هذا؟

  • إعادة تنسيق JavaScript الفوضوي أو المضغوط إلى كود نظيف وقابل للقراءة
  • قواعد تنسيق على غرار Prettier لتركيب JavaScript الحديث
  • نفس المكون الأساسي لضاغط JavaScript، لكن الإجراء الافتراضي هو <strong>تنسيق</strong>
  • رائع لتصحيح النصوص المعلبة ومقتطفات الطرف الثالث
  • نسخ أو تنزيل JS المُنسّق بنقرة واحدة
  • مسافات بادئة قابلة للتخصيص (مسافات/علامات تبويب) وتلميحات لطول السطر
  • يعمل في المتصفح على سطح المكتب والجوال
  • معالجة 100% من جانب العميل – كودك لا يغادر الصفحة أبداً

🛠️ كيفية تجميع كود JavaScript for javascript-beautifier

1

الصق أو حمّل JS الخاص بك

أسقط ملف .js/.mjs في المحرر أو الصق مقتطف JavaScript الخاص بك. الأداة مثالية للنصوص المضغوطة والمقتطفات المضمنة وحمولات مدير العلامات.

2

اختر إجراء التنسيق

لأنه يشارك نفس المكون مع ضاغط JavaScript، سترى كلاً من إجراءات <strong>تنسيق</strong> و<strong>ضغط</strong>. للتجميل، حافظ على ضبط الإجراء على تنسيق (الافتراضي).

3

طبق قواعد التنسيق

يتم تحليل الكود إلى AST وإعادة طباعته بمسافات بادئة وتباعد وفواصل أسطر متناسقة مع الحفاظ على السلوك.

4

افحص، صحح الأخطاء وصدر

استخدم العرض المُجمّع لتصحيح الأخطاء أو مراجعة الكود. ثم انسخ من محرر المخرجات أو حمّل ملف .js مُنسّق للاستخدام المحلي.

المواصفات الفنية

التركيب المدعوم (وضع المُنسّق)

يركز على تركيب JavaScript الحديث في ملف واحد.

الميزةالدعمملاحظات
تركيب ES2015+✅ كاملlet/const، دوال السهم، async/await، الفئات، إلخ.
الوحدات (import/export)✅ كاملبناء جملة ESM القياسي في .js/.mjs
التسلسل الاختياري / الدمج اللاغي✅ كاملعاملات ?. و ??
القوالب الحرفية✅ كامليحافظ على التعبيرات المضمنة ومحتوى النص
JSX أساسي✅ جزئييعمل عندما يتم تكوين المُنسِّق الأساسي لبناء جملة شبيهة بـ JSX في .jsx
بناء جملة TypeScript المحدد⚠️ ليس الهدف الأساسييُستخدم بشكل أفضل مع مخرجات JS العادية من مترجم TS

خيارات التنسيق (مُعينة لواجهة الأداة)

هذه الخيارات مُعرضة عبر عناصر تحكم المحرر ومُعينة للمُنسِّق الأساسي.

الخيارالقيمالافتراضي
نمط المسافة البادئةمسافات / علامات تبويبمسافات
حجم المسافة البادئة1–8 مسافات عند استخدام المسافاتمسافتان
تلميح التفاف السطور0 (إيقاف) إلى ~120 عمود80 حرفًا
نهاية السطرLF (\n) / CRLF (\r\n)LF (\n)
الفوارز المنقوطة / علامات الاقتباس / الفوارز الزائدةالإعدادات الافتراضية للمُنسِّقنمط متسق وذو توجه محدد

معايير الأداء

لقطات أداء تقريبية في متصفح حديث على كمبيوتر محمول عادي.

حجم الملفوقت التجميلملاحظات
5 كيلوبايت⚡ < 50 مللي ثانيةتغذية راجعة فورية للمقتطفات الصغيرة
50 كيلوبايت⚡ < 200 مللي ثانيةتحرير تفاعلي سلس
250 كيلوبايت⏳ < 1 ثانيةجيد لمعظم البرامج النصية أحادية الملف
1 ميجابايت⏳ ~ 2–3 ثوانٍلا يزال قابلاً للاستخدام؛ بعد ذلك يُفضل استخدام الأدوات المحلية

بدائل سطر الأوامر لسير العمل المحلي

للمشاريع الكاملة، قم بتشغيل منسق في محررك، أو خطافات ما قبل الالتزام، أو التكامل المستمر بدلاً من تنسيق ملف واحد في كل مرة.

Node.js / متعدد المنصات

Prettier (المنسق الموصى به)

npx prettier --write "src/**/*.js"

تطبيق تنسيق متسق على جميع ملفات JavaScript في مشروعك.

وضع التحقق من Prettier

npx prettier --check "src/**/*.js"

استخدم في التكامل المستمر لضمان احترام الكود الملتزم لقواعد التنسيق.

حالات الاستخدام الشائعة

تصحيح الأخطاء في البرامج النصية المضغوطة أو الغامضة

  • إعادة تنسيق مقتطفات البائعين المعبأة لفهم ما تفعله
  • فحص حقن مدير العلامات أو الأدوات الطرف الثالث
  • تتبع المنطق المشبوه أو المعطوب في JavaScript المضغوط

مراجعة الكود والتعلم

  • تجميع الكود المنقول من المنتديات أو مواقع الأسئلة والأجوبة
  • توحيد النمط قبل تقديم التصحيحات
  • استخدام التنسيق المقروء لتعليم مفاهيم JavaScript

التنظيف قبل إعادة الهيكلة

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

❓ Frequently Asked Questions

هل سيغير تجميع JavaScript طريقة تشغيل الكود الخاص بي؟

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

ما الفرق بين التجميع والضغط؟

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

هل تدعم هذه الأداة JSX أو TypeScript؟

الهدف الرئيسي هو JavaScript العادي. قد يتم تنسيق بناء جملة يشبه JSX البسيط بشكل صحيح عندما يدعمه المُنسق الأساسي، ولكن لمشاريع JSX/TS الكاملة يجب تشغيل مُنسق مخصص (مثل Prettier) مباشرة في محررك أو خط أنابيب CI.

هل يتم رفع كود JavaScript الخاص بي إلى خادم؟

لا. يعمل التجميل بالكامل في متصفحك. هذا يجعله مناسبًا لمقتطفات الكود الخاصة، والأدوات الداخلية، والمراجعات السريعة، دون إرسال الكود المصدري إلى خوادم الطرف الثالث.

ما هو الحجم الأقصى لملف JS للتجميل المريح؟

لأفضل تجربة، حافظ على الملفات الفردية أقل من ~1 ميجابايت. ستظل الحزم الأكبر تعمل ولكن الأدوات المحلية وتكامل المحرر عادةً ما يكونان أكثر كفاءة.

Additional Resources

ECMA-262 (مواصفات لغة ECMAScript)
Documentation
MDN: دليل JavaScript
Documentation
Prettier – مُنسق كود برأي محدد
Documentation

Other Tools