مولد ESLintrc

ما الذي يحتويه ملف التهيئة المولّد

يبدأ المولّد دائمًا من eslint:recommended ويضيف بالضبط ما تستلزمه اختياراتك:

• env مع browser و/أو node، إضافة إلى es2022
• @typescript-eslint/parser وplugin:@typescript-eslint/recommended عند تفعيل TypeScript
• plugin:react/recommended عند تفعيل React
• no-console وno-unused-vars مضبوطتان على warn

الناتج هو كائن JSON بسيط بالشكل التقليدي لملفات .eslintrc.json، جاهز للصق وتوسيعه بقواعدك الخاصة.

مقارنة بين التكوين المسطح والتكوين التقليدي

أوقف ESLint دعم تنسيق .eslintrc.* لصالح تنسيق التكوين المسطح (eslint.config.js). الفروقات الرئيسية هي:

يجب أن تستخدم المشاريع الجديدة التكوين المسطح. أما المشاريع الحالية فيمكن أن تستمر بالتكوين التقليدي طوال سلسلة الإصدارات 10.x، لكن يُنصح بإجراء الانتقال.

نظام بيئة البرامج الإضافية

إضافة البرامج النموذجية لمشاريع React/TS:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

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

التعايش مع Prettier

تتولى أداة Prettier معالجة التنسيق، بينما تُعنى أداة ESLint بالصحة والأسلوب بما يتجاوز التنسيق. ولتجنب التعارضات:

1. ثبّت eslint-config-prettier وأضفه كآخر عنصر في extends/config الخاص بك.
2. فهو يُعطّل كل قاعدة ESLint تتعارض مع مخرجات Prettier.
3. شغّل Prettier بشكل منفصل (عند الحفظ في المحرر، أو في خطاف ما قبل الالتزام، أو في الـ CI).

لا تستخدم eslint-plugin-prettier في المشاريع الجديدة؛ فهو يُبطئ ESLint بتشغيل Prettier داخله. افصل بين الأداتين.

نصائح لضبط القواعد

• ابدأ بمرونة، ثم شدّد تدريجيًا؛ وفعّل التحذيرات قبل الأخطاء.
• تجاوزات الاختبارات: غالبًا ما تتطلب ملفات الاختبار تخفيف no-unused-expressions مع المتغيرات العامة الخاصة بـ Jest.
• تجاوزات السكربتات: قد تحتاج سكربتات البناء إلى متغيرات Node العامة دون إضافة env: node بشكل شامل.
• توثيق التجاوزات: يستحق كل تجاوز للقواعد تعليقًا يوضح سببه.

مطابقة التكوين مع محررك

يتطلب برنامج VS Code تثبيت وإعداد إضافة ESLint. أضف هذه الإضافات إلى إعدادات مساحة العمل الخاصة بك لتفعيل التصحيح التلقائي عند حفظ الملفات.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}