دليل تعلم EsLint

مقدمة

ESLint تم كتابته من قبل مؤلف كتاب JavaScript Red Book Nicholas C. Zakas، تم إصدار الإصدار الأول في عام 2013. لم يكن الهدف من NCZ هو إعادة اختراع العجلة، بل كان الخيار الذي اتخذته عندما لم يتم استجابة الفريق JSHint لتلبية الحاجة الفعلية: كتابة أداة lint بناءً على المبادئ القابلة للتوسع، كل قاعدة مستقلة، وليس مدمجًا في أسلوب الت编码.

الموقع الرسمي: http://eslint.org/

يساعدنا ESLint في التحقق من أخطاء النحوية أثناء كتابة JavaScript. على سبيل المثال: من الصعب العثور على المتغيرات المفقودة أو الطرق في تطبيقات JavaScript. يمكن أن يساعدنا ESLint في تحليل كود JS، العثور على الأخطاء وتأمين درجة معينة من كتابة JavaScript الصحيحة.

يتم بناء ESLint على أساس Esprima (مجمع ECMAScript). يدعم Esprima ES5.1، ويتم كتابته أيضًا باستخدام ECMAScript، ويستخدم لأغراض متعددة التحليل. يقدم ESLint بعض القواعد الافتراضية (قابلة للتوسيع) ويقدم أيضًا قواعد مخصصة لقيود كتابة كود JavaScript.

يقدم ESLint الدعم التالي:

• ES6
• AngularJS
• JSX
• تحقق من النمط
• تحديد الأخطاء والتنبيهات
  

يقدم ESLint أنواعًا من التحقق التالية:

• تحقق من الأخطاء النحوية
• النقاط العلامات غير المهمة أو المفقودة، مثل النقاط
• الكود المفقود (استخدموا WebStorm)
• تنبيهات المعلمات غير المستخدمة
• العلامات النهائية المفقودة، مثل}
• تأكد من قواعد التنسيق المتناسقة، مثل sass أو less
• تحقق من تسمية المتغيرات
  

استخدام

أولاً، التثبيت

تثبيت npm gulp-eslint –save-dev

في مجلد مشروعك، أعد تشغيل: eslint –init لإنتاج ملف .eslintrc يحتوي على بعض القواعد التحقق

{
 "rules": {
  "semi": ["error", "always"],
  "quotes": ["error", "double"]
 }
}

فيها "semi" و "quotes" هي أسماء القواعد. يقدم ESLint أيضًا مستوى الخطأ، الذي يتطابق مع الرقم، حيث يكون الرقم الأعلى هو مستوى الخطأ الذي يظهر تنبيهًا عاليًا، مثل عدم عرض خطأ الكود 0، و1 يمثل تنبيهًا وليس له تأثير على التجميع الحالي، و2 الخطأ يرفع خطأ.

"extends": "eslint:recommended"

Extends هي التحقق الموصى به افتراضيًا لـ ESLint، يمكنك استخدام التكوين لاختيار الأعمدة التي تحتاج إليها، يمكنك الاشتراكnpmjs.comعرض

ثانيًا، تكوين ESLint المخصص

السابق ذكرت يمكنك إلغاء تشغيل جميع التحققات الافتراضية لـ ESLint، وإضافة القواعد التي تحتاج إليها بالضبط. لتحقيق ذلك، يقدم ESLint 2 طرقًا للإعداد:

1. تعليقات التكوين: يمكنك استخدام تعليقات JavaScript مباشرة في ملفات التحقق لتضمين معلومات التكوين
2. ملفات التكوين: يمكنك استخدام ملفات JavaScript أو JSON أو YAML، مثل ملف .eslintrc المذكور سابقًا، يمكنك أيضًا إضافة حقل eslintConfig في ملف package.json، وسيقوم EsLint بقراءته وتحققه تلقائيًا.
   

بدء شرح استخدام EsLint

parserOptions

يسمح EsLint باستخدام parserOptions لتعيين إصدار ecma الذي سيتم التحقق منه، وتعيين بعض خصائص ecma

{
 "parserOptions": {
  "ecmaVersion": 6, //تحديد إصدار ECMAScript الذي يدعمه، 6 يعني ES6
  "sourceType": "module", //تحديد نوع المصدر، هناك نوعان "script" أو "module"
  "ecmaFeatures": {
   "jsx": true//تشغيل JSX
  }
 }
}

المساعد

يستخدم EsLint esprima كمساعد في تحليل السكربت، يمكنك تغييره أيضًا، مثل تغييره إلى babel-eslint كمساعد في التحليل

{
 "parser": "esprima" //افتراضي، يمكنك تعديله إلى babel-eslint، يدعم JSX
}

بيئات

يمكن للبيئات المعدة مسبقًا تعريف المتغيرات العالمية لبيئات أخرى، مثل متغيرات بيئة brower، متغيرات بيئة node، متغيرات بيئة es6، متغيرات بيئة mocha، إلخ

{
 "env": {
  "browser": true,
  "node": true
 }
}

إذا كنت ترغب في استخدام متغيرات بيئة الإضافة، يمكنك استخدام "plugins" لتحديد، مثل

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

العالمية

تحديد المتغيرات العالمية التي ترغب في استخدامها، true تعني السماح بالتداخل، false تعني عدم السماح بالتداخل

{
 "globals": {
  "var1": true,
  "var2": false
 }
}

إضافات

EsLint يسمح باستخدام إضافات الطرف الثالث

{
 "plugins": [
  "react" 
  ]
}

القواعد

القواعد المخصصة، نموذج عام: "اسم القاعدة":معامل مستوى الخطأ. المعامل 0 يعني عدم عرض الرسالة (off)、1 يعني تحذير (warn)、2 يعني عرض رسالة خطأ (error)، يمكن تحديد نطاق، مثل [1,4]

يمكن أن يشمل الوضع الصارم أو طريقة التذكير بالكود، مثل الرموز. يمكن أن يكون أيضًا التحقق الخاص بالطرف الثالث، مثل react.

عنوان التحقق الافتراضي http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //تحقق الكود الجافاسكربت بشكل افتراضي
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //استخدام قواعد التحقق الخاصة بالطرف الثالث
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/package/eslint-plugin-react، هذا الرابط هو استخدام eslint لـ react

ثالثاً، استخدام Gulp

var eslint = require('gulp-eslint');
gulp.task('validate-eslint',function(){
 return gulp.src(['app/**/*.js']) //مسار التحقق المحدد
  .pipe(eslint({configFile:"./.eslintrc"})) //استخدام ملف التحقق الخاص بك لـ eslint
  .pipe(eslint.format())
});

الخلاصة

هذا هو نهاية محتوى هذا المقال، آمل أن تكون محتويات هذا المقال قد ساعدتكم في التعلم أو العمل. إذا كان لديكم أي استفسارات، يمكنكم ترك تعليقات للتواصل.