دعونا نتحدث عن كيفية ترحيل tslint إلى eslint في Angular

 نانوغرام أضف @angular-eslint/schematics

نتائج التشغيل:

• يتم إنشاء الملف .eslintrc.json تلقائيًا في الجذر، ويتم استخدام البرنامج الإضافي @angular-eslint eslint بشكل افتراضي.

 {
  "الجذر": صحيح،
  "تجاهل الأنماط": [
    "المشاريع/**/*"
  ]،
  "التجاوزات": [
    {
      "الملفات": [
        "*.ts"
      ]،
      "خيارات المحلل": {
        "مشروع": [
          "tsconfig.json"
        ]،
        "createDefaultProgram": صحيح
      },
      "يمتد": [
        "المكون الإضافي:@angular-eslint/موصى به"،
        "المكون الإضافي:@angular-eslint/template/process-inline-templates"
      ]،
      "قواعد": {
        "@angular-eslint/directive-selector": [
          "خطأ"،
          {
            "النوع": "السمة"،
            "البادئة": "التطبيق"،
            "نمط": "camelCase"
          }
        ]،
        "@angular-eslint/محدد المكونات": [
          "خطأ"،
          {
            "النوع": "العنصر"،
            "البادئة": "التطبيق"،
            "style": "علبة كباب"
          }
        ]
      }
    },
    {
      "الملفات": [
        "*.html"
      ]،
      "يمتد": [
        "المكون الإضافي:@angular-eslint/قالب/موصى به"
      ]،
      "قواعد": {}
    }
  ]
}

• تتم إضافة تكوين cli التالي المتعلق بـ eslint إلى angular.json إذا قمت بإنشاء lib أو تطبيق من خلال سطر أوامر ng في المستقبل، فسيتم إنشاء .eslintrc.json تلقائيًا ضمن هذه الوحدة.

 "كلي": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. قم بإزالة أو استبدال الملفات أو التكوينات ذات الصلة بـ tslint

• احذف tslint.json ضمن الدليل الجذر أو الوحدة النمطية
• احذف حزم التطوير المرتبطة بـ tslint، مثل tslint أو typescript-tslint-plugin وما إلى ذلك.
• (إن وجد) احذف التكوين المرتبط بـ tslint-plugin في tsconfig.json، مثل

• قم بتغيير تكوين tslint (إن وجد) ضمن angular.json إلى eslint، والذي قد يحتاج إلى تعديل يدويًا.

تكوين Tslint الأصلي:

تكوين eslint المعدل (على سبيل المثال، تم تكوينه لتنفيذ الوبر في دليل اختبار المشاريع/lint):

3. إذا كنت بحاجة إلى إيقاف تشغيل فحص eslint مؤقتًا لبعض الرموز أو الملفات

• أضف التعليق التالي أعلى الرمز لإيقاف تشغيل eslint مؤقتًا للتحقق من هذا الرمز

 /* تعطيل إسلينت */
const some_un_used_var;

• يمكنك إضافة القاعدة عندما يُبلغ فحص eslint عن خطأ في التعليق للإشارة إلى سبب إيقاف تشغيل الفحص مؤقتًا. على سبيل المثال، في التعليمة البرمجية التالية، لا تريد أن يتم سحب متغير غير مستخدم بواسطة eslint وإلقاء خطأ.

 /* تعطيل eslint @typescript-eslint/no-unused-vars */
const some_un_used_var;

• إذا كنت بحاجة إلى إيقاف تشغيل فحص eslint لبعض الملفات، فيمكنك إضافة ملف .eslintignore تحت الجذر.
• يمكن تكوين الأنماط التي تتطلب فحص الوبر في .eslintrc (لن تخوض هذه المقالة في التفاصيل، المقدمة الرسمية)

4. تحقق مما إذا كان يمكن استخدامه

تشغيل أمر لينت

 نانوغرام الوبر

إذا تم تشغيله بنجاح، تهانينا على إكمال عملية الترحيل!

(اختياري) المكونات الإضافية الداعمة الأخرى لـ eslint

• eslint-plugin-deprecation: تم إهمال رمز التحقق
• eslint-plugin-header: تحقق مما إذا كانت تعليقات رأس الملف تتبع قواعد معينة (يمكن استخدامها للإصدار، والتحقق من براءة الاختراع، وما إلى ذلك)
• eslint-plugin-import: تحقق من الأخطاء الإملائية أو الأخطاء النحوية في عنوان الاستيراد أو الأخطاء النحوية وما إلى ذلك.
• eslint-plugin-prefer-arrow: التحقق من صحة استخدام وظائف السهم
• eslint-plugin-unicorn: تحقق من ارتباط بناء جملة js وts
• eslint-plugin-jsdoc: الوثائق ذات الصلة
• ...

يمكن تهيئتها في .eslintrc.json (الوثائق الرسمية)

(اختياري) قم بتكوين رمز VS

تثبيت البرنامج المساعد eslint

يقوم رمز VS تلقائيًا بتصحيح المشكلات المتعلقة بـ eslint عند الحفظ

تم تعيينه في .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": صحيح }

أو ابحث عن إعدادات الحفظ ضمن ملف->التفضيلات->الإعدادات للعثور على الإعدادات ذات الصلة بـ eslint.