حافظ على الكود الخاص بك نظيفًا مع ESLint

تعرف على أساسيات JavaScript linter الأكثر شيوعًا ، والتي يمكن أن تساعد في جعل التعليمات البرمجية الخاصة بك تلتزم بمجموعة معينة من اصطلاحات بناء الجملة ، وتحقق مما إذا كانت الشفرة تحتوي على مصادر محتملة للمشكلات وما إذا كانت الشفرة تطابق مجموعة من المعايير التي تحددها أنت أو فريقك

ESLint هو ملفJavaScriptلينتر.

ما هو لينتر؟

سؤال جيد! linter هي أداة تحدد المشكلات في التعليمات البرمجية الخاصة بك.

يمكن أن يخبرك تشغيل لينتر على الكود الخاص بك بالعديد من الأشياء:

  • إذا كانت الشفرة تلتزم بمجموعة معينة من اصطلاحات بناء الجملة
  • إذا كانت الشفرة تحتوي على مصادر محتملة للمشكلات
  • إذا تطابق الرمز مع مجموعة معايير تحددها أنت أو فريقك

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

ESLint

ESLint هو لينتر للغة برمجة جافا سكريبت ، مكتوب بلغةNode.js.

إنه مفيد للغاية لأن JavaScript ، كونها لغة مفسرة ، لا تحتوي على خطوة تجميع ويمكن العثور على العديد من الأخطاء فقط في وقت التشغيل.

سوف تساعدك ESLint في اكتشاف هذه الأخطاء. أي أخطاء على وجه الخصوص تسأل؟

  • تجنب لانهائيةالحلقاتفي الforشروط الحلقة
  • تأكد من أن جميع طرق getter تعيد شيئًا ما
  • عدم السماح بعبارات console.log (وما شابهها)
  • تحقق من وجود حالات مكررة في التبديل
  • تحقق من وجود رمز لا يمكن الوصول إليه
  • تحقق من صلاحية JSDoc

وأكثر بكثير! القائمة الكاملة متاحة علىhttps://eslint.org/docs/rules/

الشعبية المتزايدة لـأجملنظرًا لأن منسق الكود جعل جزء التصميم من ESLint نوعًا قديمًا ، لكن ESLint لا يزال مفيدًا جدًا للقبض على الأخطاء ورائحة الكود في التعليمات البرمجية الخاصة بك.

ESLint مرن للغاية وقابل للتكوين ، ويمكنك اختيار القواعد التي تريد التحقق منها ، أو أي نوع من النمط الذي تريد فرضه. يتم تعطيل العديد من القواعد المتاحة ويمكنك تشغيلها في ملف.eslintrcملف التكوين ، والذي يمكن أن يكون عامًا أو خاصًا بمشروعك.

قم بتثبيت ESLint عالميًا

استخدامnpm.

npm install -g eslint

# create a .eslintrc configuration file eslint --init

# run ESLint against any file with eslint yourfile.js

قم بتثبيت ESLint محليًا

npm install eslint --save-dev

# create a .eslintrc configuration file ./node_modules/.bin/eslint --init

# run ESLint against any file with ./node_modules/.bin/eslint yourfile.js

استخدم ESLint في المحرر المفضل لديك

الاستخدام الأكثر شيوعًا لـ ESLint هو داخل محررك بالطبع.

تكوينات ESLint الشائعة

يمكن تكوين ESLint بعدة طرق مختلفة.

دليل أسلوب Airbnb

الإعداد الشائع هو استخدامأسلوب ترميز Airbnb JavaScriptلتنقيح التعليمات البرمجية الخاصة بك.

يركض

yarn add --dev eslint-config-airbnb

أو

npm install --save-dev eslint-config-airbnb

لتثبيت حزمة تكوين Airbnb ، وإضافة ملف.eslintrcملف في جذر مشروعك:

{
  "extends": "airbnb",
}

تتفاعل

كود Linting React سهل مع البرنامج المساعد React:

yarn add --dev eslint-plugin-react

أو

npm install --save-dev eslint-plugin-react

في الخاص بك.eslintrcإضافة ملف

{
  "extends": "airbnb",
  "plugins": [
      "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

استخدم إصدارًا محددًا من ECMAScript

ECMAScriptيغير الإصدار كل عام الآن.

تم تعيين الإعداد الافتراضي حاليًا على 5 ، مما يعني ما قبل 2015.

قم بتشغيل ES6 (أو أعلى) عن طريق تعيين هذه الخاصية في.eslintrc:

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

فرض الوضع المتشدد

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

قواعد أكثر تقدمًا

يمكن العثور على دليل مفصل حول القواعد على الموقع الرسمي علىhttps://eslint.org/docs/user-guide/configuring

تعطيل القواعد في سطور معينة

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

في هذه الحالة ، يمكنك تعطيل ESLint بالكامل في بضعة أسطر:

/* eslint-disable */
alert('test');
/* eslint-enable */

أو على سطر واحد:

alert('test'); // eslint-disable-line

أو فقط قم بتعطيل قاعدة محددة أو أكثر لأسطر متعددة:

/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

أو لخط واحد:

alert('test'); // eslint-disable-line no-alert, quotes, semi

المزيد من دروس devtools: