كيفية إعداد ESLint في Atom حتى تتمكن من المساهمة في Open Source

هذا ليس عن الوبر الذي تحصل عليه من الصوف.

إذا كنت ترغب في المساهمة في مشاريع مفتوحة المصدر مثل Free Code Camp ، فسوف تحتاج أولاً إلى إعداد الوبر.

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

لنقم بإعداد ESLint للتشغيل في Atom ، أحد أكثر برامج تحرير الشفرة شهرة.

قبل أن نبدأ ، إليك نظرة سريعة لأقوم ببعض الافتراضات:

  • لقد اتبعت إرشادات المساهمة الخاصة بـ Free Code Camp حتى الجزء الذي يقرأ Setup Linting.
  • وهكذا قمت بتثبيت المتطلبات الأساسية اللازمة (خاصة Node.js و npm).
  • لديك على الأقل فهم أساسي لاستخدام سطر الأوامر والبوابة.
  • أنت تستخدم Atom كمحرر نصوص (على الرغم من أن هذه المقالة يجب أن تكون مفيدة حتى لو لم تكن كذلك ، فأنت بحاجة فقط إلى التحقق من وثائق محرر النصوص للحصول على إرشادات بخصوص ESLint)

ما هو بالضبط لينت؟

"Linting هي عملية تشغيل برنامج يقوم بتحليل التعليمات البرمجية للأخطاء المحتملة." - Oded on Stack Overflow

و ESLint هي أداة فحص خاصة برمز JavaScript. يمكنك استخدام ESLint للعثور على كود إشكالي ("أخطاء") مكتوب بلغة JavaScript.

بالمناسبة ، تأتي كلمة "ES" في اسم ESLint من "ECMAScript" ، وهو الاسم الرسمي للغة JavaScript الأساسية.

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

يمكن أن تكون هذه "الأخطاء" موضوعية ، مما يعني أنها ناتجة عن كود لا يتوافق مع ، على سبيل المثال ، بناء جملة جافا سكريبت JavaScript (أو أي لغة برمجة تقوم بترجمها). وبهذه الطريقة ، يمكنك القول أن linter يقوم باختيار أخطاء بناء الجملة.

أقول "أخطاء موضوعية" لأن هذه الأخطاء متأصلة في جافا سكريبت نفسها. إذا تركت فاصلًا منقوطًا في نهاية إعلان متغير ، فهذا خطأ موضوعي وفقًا لكتاب JavaScript - حتى لو لم يمنع البرنامج من التشغيل (انظر الإدراج التلقائي للفاصلة المنقوطة).

أو قد تكون هذه الأخطاء ذاتية ، مما يعني أنك (وليس اللجنة الفنية 39 ، هيئة المعايير في ECMAScript) حددت مجموعة من القواعد التي يجب أن يتبعها الرمز. يتم تلخيص قواعد الترميز هذه بشكل شائع في دليل أنماط JavaScript ، وهو عبارة عن وثيقة تعلن عن نوع من أفضل ممارسات الترميز. يستخدم Free Code Camp بين العديد من مشاريع البرامج الأخرى أدلة النمط.

يعد دليل أسلوب جافا سكريبت Airbnb أحد أكثر الأدلة شعبية لمطوري JavaScript ، كما أن دليل أنماط Free Code Camp يستند إليه.

الغرض من اتباع دليل الأنماط هو الحصول على "معيار للكتابة" يتبعه مطورو مشروعك للحفاظ على الشفرة نظيفة وبسيطة ومتسقة. هذا مشابه لمفهوم AP Stylebook الذي يتبعه الصحفيون. الفرق الوحيد هو أن AP Stylebook هو دليل للأسلوب لقواعد اللغة الإنجليزية ، بينما دليل Airbnb للأسلوب مخصص لجافا سكريبت.

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

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

لتخبر ESLint عن قواعد الفحص الخاصة بك ، يمكنك تكوينها في ملف تهيئة يسمى. eslintrc أو eslintConfig أو package.json ، وهو ما سوف تبحث عنه ESLint وتقرأه تلقائيًا. وبينما تقوم بتطويره ، ستحذرك ESLint من رمز المشكلة الذي لا يطيع هذه القواعد حتى تتمكن من إجراء المراجعات - كما ترميز. وهو مثل وجود برنامج زوج الجدة معك.

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

لديك خيارات عندما يتعلق الأمر بأدوات فحص JavaScript ، ولكن في هذه المقالة نركز على ESLint لأن Free Code Camp يحددها في إرشادات المساهمة الخاصة بها. ويستخدم على نطاق واسع في مكان آخر.

لديك أيضًا خيارات عندما يتعلق الأمر بأدلة نمط JavaScript. Airbnb’s هي فكرة جيدة للتعرف عليها لأنها تضم ​​أكثر من 45000 نجم على GitHub في وقت كتابة هذا التقرير ، وتتزايد استخدامها.

الإعداد لينت لمعسكر رمز الحرة

هناك طريقتان لتثبيت ESLint: عالميًا ومحليًا. سنركز على تثبيته محليًا ، مما يعني بالنسبة إلى دليل العمل المحلي الخاص بك ، على سبيل المثال ، مستودع استنساخ Free Code Camp.

1: افتح استنساخ Free Code Camp في محرر النصوص الخاص بك (هذا يفترض أنك استنسخت بالفعل Free Code Camp على الكمبيوتر الخاص بك)

2: في المحطة الطرفية ، cd (تغيير الدليل) إلى دليل Free Code Camp الخاص بك

3: اكتب npm install eslint --save-dev في Terminal

4: في محرر النصوص Atom ، انتقل إلى التفضيلات >> تثبيت >> واكتب linter-eslint في مربع البحث "حزم البحث"

ملاحظة: يمكنك أيضًا تثبيت حزم Atom من سطر الأوامر باستخدام الأمر apm. انظر هذه التعليمات للحصول على مثال.

5: تثبيت linter-eslint و linter.

6: في دليل Free Code Camp ، أغلق أي ملف .js ، ثم أعد فتحه

والآن في المرة القادمة التي تكتب فيها JavaScript ، سترى أن ESLint يعمل

ملاحظة: لقد استبعدت خطوة مهمة: تكوين ESLint ، أي الجزء الذي تقوم بتخصيص ESLint وإخباره عن قواعد الفحص الخاصة بك. لقد قمت بذلك لأنه عندما تقوم بنسخ مستودع Free Code Camp ، فإنه يأتي بالفعل مع ملفات تهيئة ESLint ، على سبيل المثال ، راجع eslintrc و package.json. وبالتالي لا تحتاج إلى القيام بأي تكوين خاص بك.

في حال كنت تعمل في مشروع تحتاج إلى تكوين ESLint فيه ، فأشيرك إلى الروابط التالية:

  • تكوين ESLint.
  • ابدأ مع ESLint v1.0
  • npm ، eslint
  • تهيئة ESLint المشتركة القابلة للتوسيع من Airbnb

للختام:

  1. Linting هي عملية التحقق من وجود رمز إشكالي.
  2. ESLint هي إحدى الأدوات التي تقوم بتنفيذ الفحص.
  3. يمكن أن تكون ESLint أداة تعليمية رائعة لأنها تجبرك على كتابة تعليمات برمجية نظيفة ومتسقة وتطوير عادات ترميز جيدة.
  4. تطلب منك العديد من مشاريع المصادر المفتوحة تشغيل ESLint.
  5. يجب أن يكون لديك ESLint معد في محرر النصوص الخاص بك للمساهمة في Free Code Camp.
  6. إذا كنت لا تستخدم Atom ، فتحقق من مستندات محرر النصوص لمعرفة كيفية تثبيت ESLint.
  7. ابقى في المسار.

إذا كانت لديك أسئلة ، فيمكنك أن تغردني علىgilbertginsberg أو تجدني في GilbertIndex.