منسّق الأكواد

ماذا تفعل الأداة

يأخذ منسّق الأكواد الكود المتكدّس أو المصغَّر أو غير المنتظم في مسافاته البادئة، ويعيد طباعته بنمط نظيف ومتّسق. ويدعم اللغات الأكثر شيوعًا في عمل الويب: HTML وCSS وSCSS وLess وJavaScript وTypeScript وJSON وXML وMarkdown وYAML وGraphQL.

تعتمد الأداة في جوهرها على Prettier، المنسّق الذي تستخدمه ملايين المشاريع، لذا تبدو النتيجة تمامًا مثل كود نُسِّق في VS Code أو بواسطة pre-commit hook. ولا يُحمَّل محلل كل لغة إلا عند اختيارها، ما يبقي الصفحة سريعة.

طريقة الاستخدام

1. اختر اللغة الخاصة بالكود.
2. الصق الكود، أو افتح ملفًا.
3. اختر نمط المسافة البادئة (مسافتان أو 4 مسافات أو Tab) وعرض السطر. تُلَفّ الأسطر الأطول من العرض حيث تسمح اللغة بذلك.
4. في JavaScript وTypeScript، اختر ما إذا كانت العبارات تنتهي بـ الفواصل المنقوطة. وفي السكربتات وملفات الأنماط، اختر علامات اقتباس مفردة إذا كان مشروعك يفضّلها.
5. انسخ النتيجة أو نزّلها.

مثال

المثال صفحة HTML من سطر واحد تتضمن CSS وJavaScript مضمّنين. بعد التنسيق، يصبح كل عنصر في سطر مستقل، وتُفرَد قواعد CSS بتصريح واحد في كل سطر، وتحصل الدالة السهمية في السكربت على أقواس وفاصلة منقوطة:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

نصائح

• التنسيق أيضًا فحص سريع للصياغة. إذا لم يتمكن Prettier من تحليل الإدخال، تعرض رسالة الخطأ السطر والعمود لتنتقل مباشرة إلى موضع الخطأ.
• يُنسَّق XML مع اعتبار المسافات البيضاء غير مؤثرة كي تُزاح الوسوم المتداخلة. إذا كان مستندك يعتمد على مسافات دقيقة داخل العناصر، فراجع النتيجة قبل استخدامها.
• تحتاج العكس؟ استخدم أداة تصغير JavaScript وCSS لتقليص الكود للإنتاج، أو منسّق JSON للتحقق من JSON وتصغيره.