ESLint وقواعد React وتكامل Prettier
أعد ESLint مع قواعد React وادمج Prettier لتنسيق متّسق؛ وشغّل أوامر الفحص والإصلاح.
ESLint وقواعد React وتكامل Prettier درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا ESLint وPrettier
الهدف: اكتشاف مشكلات التعليمات البرمجية باستخدام ESLint والحفاظ على اتساق التنسيق باستخدام Prettier.
- ESLint: القواعد والإضافات والإصلاح
- Prettier: أداة تنسيق ذات أسلوب محدد
- شغّلهما في بيئة التطوير وCI
التثبيت والإضافات
- ESLint: eslint و@typescript-eslint/* (إذا كنت تستخدم TS) وeslint-plugin-react وeslint-plugin-react-hooks
- Prettier: prettier وeslint-config-prettier
- النصوص البرمجية: "lint" و"lint:fix" و"format"
عرض تجريبي: مخرجات الفحص والإصلاحات
يحدد ESLint المشكلات، بينما يصلح Prettier التنسيق. قارن بين الحالة السيئة والجيدة، وشاهد نموذجًا من المخرجات.
<div id="root"></div>
عرض تجريبي: محاكاة تنسيق Prettier
بدّل الخيار لمحاكاة تشغيل Prettier؛ فتصبح التعليمات البرمجية منسّقة باتساق.
<div id="root"></div>
نصائح ونصوص الحزمة
- النصوص البرمجية: "lint" و"lint:fix" و"format"
- استخدم eslint-config-prettier لتعطيل قواعد التنسيق
- فعّل قواعد react-hooks: exhaustive-deps وrules-of-hooks
قواعد React التي ينبغي معرفتها
قواعد React:
- react/jsx-key — أضف key إلى القوائم
- react-hooks/rules-of-hooks — استدعِ الخطافات على المستوى الأعلى فقط
- react-hooks/exhaustive-deps — حافظ على صحة تبعيات التأثير
أدوار ESLint وPrettier
خلاصة
خلاصة: يكتشف ESLint المشكلات، بينما ينسّق Prettier التعليمات البرمجية. أضف إضافات React وقواعد الخطافات، واربط النصوص البرمجية بالفحص والإصلاح والتنسيق.
الأسئلة الشائعة
هل درس «ESLint وقواعد React وتكامل Prettier» مجاني؟
نعم — نص درس «ESLint وقواعد React وتكامل Prettier» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «ESLint وقواعد React وتكامل Prettier»؟
أعد ESLint مع قواعد React وادمج Prettier لتنسيق متّسق؛ وشغّل أوامر الفحص والإصلاح. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «ESLint وقواعد React وتكامل Prettier»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ESLint وقواعد React وتكامل Prettier
- تسمية الملفات وحدود المكوّنات وتسمية الخصائص
- متغيرات البيئة وتنظيم الإعدادات