ESLint وإضافات TypeScript: دليل شامل مع أمثلة عملية

مقدمة: ما هي إضافات ESLint و TypeScript ولماذا تحتاجها؟

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

إضافات ESLint و TypeScript ليست مكتبة واحدة بالمعنى التقليدي (مثل Lodash)، بل هي نظام بيئي من الأدوات. الحزمة الأساسية eslint مسؤولة عن تحليل الكود، بينما تضيف الإضافات @typescript-eslint/eslint-plugin و @typescript-eslint/parser دعمًا لصياغة TypeScript وتوفر مئات القواعد الخاصة به.

لماذا تحتاج هذا؟

• اكتشاف الأخطاء مبكرًا: يمكن لأداة التحليل اكتشاف مشاكل محتملة قد يتجاهلها مترجم TypeScript (مثل المتغيرات غير المستخدمة، سوء استخدام Promises، مشاكل أنواع غير نحوية).
• نمط كود موحد: في فريق التطوير، تضمن أداة التحليل الالتزام بنمط كود موحد (المسافات البادئة، علامات الاقتباس، الفواصل المنقوطة)، مما يجعل الكود أكثر قابلية للقراءة والتوقع.
• التصحيح التلقائي: تدعم العديد من قواعد ESLint التصحيح التلقائي (--fix)، مما يسمح بتنسيق الكود تلقائيًا وإصلاح الأخطاء البسيطة.
• التكامل مع بيئة التطوير: معظم محررات الكود الحديثة (VS Code، WebStorm) تدعم ESLint بشكل مدمج، مما يتيح رؤية الأخطاء والتحذيرات أثناء كتابة الكود.

في موقع pythonlib.ru، نسعى لتقديم أدلة مفيدة قدر الإمكان. هذه المقالة ستكون مرجعك الشامل لإعداد واستخدام ESLint مع TypeScript.

تثبيت ESLint وإضافات TypeScript

يتم التثبيت عبر مدير الحزم npm (أو yarn، pnpm). نفترض أن لديك مشروعًا بملف package.json و TypeScript مثبتًا (typescript).

نفذ في الطرفية في جذر مشروعك:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

لنفهم ما قمنا بتثبيته:

• eslint — نواة أداة التحليل.
• @typescript-eslint/parser — المحلل الذي يسمح لـ ESLint بفهم صياغة TypeScript (بما في ذلك الأنواع العامة، الديكورات، الأنواع، إلخ).
• @typescript-eslint/eslint-plugin — الإضافة التي تحتوي على مجموعة قواعد خاصة بـ TypeScript (مثل @typescript-eslint/no-unused-vars بدلاً من القاعدة الافتراضية no-unused-vars).

إضافي (موصى به):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

هذا يتيح دمج ESLint مع Prettier (أداة تنسيق الكود) وتجنب التعارضات بينهما.

بداية سريعة: الإعداد والتشغيل الأول

بعد التثبيت، يجب إنشاء ملف إعداد. أسهل طريقة هي توليده باستخدام المعالج المدمج في ESLint:

npx eslint --init

سيُطرح عليك عدة أسئلة. اختر:

• كيف تريد استخدام ESLint؟ — To check syntax, find problems, and enforce code style
• ما هو تنسيق الوحدات الذي تستخدمه؟ — JavaScript modules (import/export)
• ما هو الإطار الذي تستخدمه؟ — None of these (أو React/Vue/Angular إذا كنت تستخدمه)