ESLint + @typescript-eslint
أعدّ ESLint باستخدام الإضافة @typescript-eslint لاكتشاف المشكلات المرتبطة بالأنواع وفرض أسلوب متسق.
ESLint + @typescript-eslint درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
مقدمة
الهدف: استخدم ESLint مع @typescript-eslint لاكتشاف الأخطاء وفرض نمط موحّد في مشاريع TypeScript.
تثبيت
ثبّت ESLint الأساسي بالإضافة إلى @typescript-eslint/parser و@typescript-eslint/eslint-plugin.
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginالإعداد
اضبط ESLint لاستخدام محلّل TS والقواعد الموصى بها. أضف القواعد الخاصة بالمشروع عند الحاجة.
// .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
rules: {
"@typescript-eslint/no-unused-vars": "warn"
}
};مثال على الفحص
يسلّط ESLint الضوء على المعاملات المفقودة والمتغيرات غير المستخدمة ومشكلات النمط عند استخدام المحلّل المتوافق مع TS.
// demo.ts
function greet(name: string) {
console.log("Hello", name)
}
greet("Ada")
greet() // ESLint error: missing arg
قواعد تعتمد على الأنواع
اربط tsconfig.json في parserOptions للقواعد التي تحتاج إلى معلومات الأنواع، مثل اكتشاف الوعود غير المعالجة.
// tsconfig.json must be linked for type-aware rules
{
"parserOptions": {
"project": "./tsconfig.json"
}
}
// Example: no-floating-promises
async function f() {
fetch("/api") // ESLint error: unhandled promise
}تشغيل الفحص
شغّل ESLint على قاعدة الشيفرة لديك. أضف --fix لتطبيق الإصلاحات الآمنة تلقائيًا.
npx eslint "src/**/*.{ts,tsx}" --fixسؤال
تحقق سريع: لماذا نستخدم @typescript-eslint بالإضافة إلى ESLint الأساسي؟
مراجعة
مراجعة: ثبّت ESLint و@typescript-eslint، واضبط المحلّل، ووسّع الإعدادات الموصى بها، وشغّل أداة الفحص مع القواعد المعتمدة على الأنواع للحفاظ على شيفرة نظيفة.
الأسئلة الشائعة
هل درس «ESLint + @typescript-eslint» مجاني؟
نعم — نص درس «ESLint + @typescript-eslint» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
ماذا ستتعلم في «ESLint + @typescript-eslint»؟
أعدّ ESLint باستخدام الإضافة @typescript-eslint لاكتشاف المشكلات المرتبطة بالأنواع وفرض أسلوب متسق. تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «ESLint + @typescript-eslint»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ESLint + @typescript-eslint
- تكامل Prettier وتعارضات القواعد
- مجموعات القواعد الشائعة في المشاريع الواقعية