أعتقد أن الكثير من الناس يعرفون أنه من المعتاد في هذه الأيام استخدام أدوات خاصة للتحقق من الشفرة بحثًا عن الأخطاء ومطابقة النمط المعتمد في الفريق.
اليوم أريد أن أتطرق إلى ESLint ، وهي أداة رائعة للتحقق من أخطاء مشروعات JavaScript.
لن أكتب في هذه المقالة عن نقاط واضحة ، مثل إعداد eslint لمشروعك: آمل أن تتمكن من قراءة الوثائق في هذا الجزء بنفسك وربطها بنفسك. وهنا سنناقش ما هي "المجموعة" الإضافية التي يمكنك توصيلها بالأداة الأصلية وكيف يمكنك تكوينها لجعلها تعمل لصالحك.
الآن نستخدم التكوين المعد مع القواعد من فريق airbnb كأساس للقواعد. معيارهم لكتابة كود جافا سكريبت يحتوي الآن على أكثر من 73 ألف نجم على جيثب ويستخدمه العديد من المنظمات المعروفة . أعتقد أنه يمكنك الوثوق به.
يربط هذا التكوين بين العديد من الحزم المهمة للمشروع في آن واحد: eslint و eslint-plugin-import و eslint-plugin-react eslint-plugin-jsx-a11y و eslint-plugin-jsx-a11y ، والتي تحتوي على قواعد إضافية للتحقق من صحة التعليمات البرمجية الخاصة بك. تجدر الإشارة إلى أن ملف التكوين هذا يعني أنك تستخدم React.js في مشروعك. إذا لم يكن الأمر كذلك ، فيمكنك دائمًا تثبيت التكوين eslint-config-airbnb-base ، والذي يحتوي على كل نفس ، باستثناء تبعية المكون الإضافي لـ React.js.
دعونا نلقي نظرة فاحصة على حزم المكونات الإضافية ومعرفة الفحوصات التي ستضيفها إلى رمز المشروع الخاص بك:
سيضيف هذا المكون الإضافي التحقق من صحة جميع عمليات الاستيراد الخاصة بك إلى مشروعك وسيضمن وجود جميع التبعيات المستوردة في المشروع ، ومتصلة بترتيب مناسب للعمل اللاحق ، وما إلى ذلك.
يسمح لك المكون الإضافي بكتابة رمز أكثر صحة على React.js ويوفر لك من المضادات الشائعة ، كما يفرض عليك أن تنسب إلى جميع المكونات الخاصة بك أوصاف أنواع البيانات التي يقبلونها.
ينطبق هذا المكون الإضافي أيضًا على المشاريع على React.js كما أنه مفيد للغاية في العمل. ستفرض عليك كتابة HTML الذي سيكون أفضل بكثير بما يتماشى مع معايير إمكانية الوصول. ستصبح مشاريعك أكثر ملاءمة للأشخاص ذوي الإعاقة.
بشكل عام ، ستجعل هذه المجموعة من القواعد مشروعاتك أفضل بكثير ، بالإضافة إلى توسيع معرفتك بالمعايير الحديثة لكتابة التعليمات البرمجية.
ولكن في عالمنا لا توجد فقط هذه الإضافات لـ eslint ، ولكن هناك العديد من الإضافات الأخرى. هناك بالفعل مشروع رائع رائع على الأسوار حول هذا الموضوع. في الأيام الأخيرة ، قررت دراسة هذا الموضوع وأريد أن أقدم إلى محكمتك أهم الأشياء التي تم العثور عليها واختبارها شخصيًا وتنفيذها في مشروعي الحالي ، والذي أعمل عليه حاليًا.
ملحقات إضافية لـ ESLint
يمكنك دراسة المشروع أعلاه بمفردك والعثور على مكونات إضافية مثيرة للاهتمام لنفسك شخصيًا ، لكنني سأكتب هنا ما يثير اهتمامي.
مكون إضافي مصمم خصيصًا لمشاريع Node.js. أعتقد أن الكثير يمكن أن يكون مفيدًا إذا كانوا لا يزالون لا يستخدمونه في المنزل.
سيجعلك هذا البرنامج المساعد "تحب" Lodash ويعيد كتابة معظم طرق JS الأصلية إلى طرق من Lodash ، كما أنه يحتوي على العديد من التوصيات لكتابة التعليمات البرمجية التي تستخدم سلاسل Lodash. بشكل عام ، إنه مثير للاهتمام للغاية ، ولكن حتى الآن لم أقم بتنفيذ هذا لمجرد أنه علينا الآن إعادة كتابة الكثير من التعليمات البرمجية للامتثال لقواعد هذا المكون الإضافي. ولكن بالنسبة للمستقبل ، أخذتها بنفسي.
يسمح لك هذا البرنامج المساعد مباشرة أثناء التطوير للتحقق من توافق الكود الذي كتبته مع المتصفحات الحالية التي تستهدفها في مشروعك في الوقت الحالي. في الوقت الحالي ، لم أقم بتوصيله بمشروعي لأننا نستخدم الآن خدمة polyfill.io ، التي تربط تلقائيًا جميع الملفات المتعددة الضرورية بكل متصفح فردي ، وبالتالي فإن مشكلة توافق الشفرة ككل غير موجودة إلى حد ما. ولكن بالنسبة للمستقبل ، أود أيضًا أن أدون ملاحظة لنفسي: ماذا لو كنت بحاجة إليها؟
مكون إضافي يخبرك بكيفية تحسين تعبيراتك العادية. لماذا لا تثبت؟ اعتقدت أنه لن يكون غير ضروري.
واحدة من أكثر الاكتشافات إثارة للاهتمام من هذه القائمة من مجموعات الجسم الإضافية. يحتوي هذا البرنامج المساعد على مجموعة كاملة من الفحوصات ، والتي بفضلها تجد أقسامًا مكتوبة بشكل سيئ من التعليمات البرمجية ، والوظائف نفسها وبنيات بسيطة لا معنى لها ، ويقدم إعادة كتابتها (من المؤسف أنه لا يعرف هو نفسه كيفية إعادة كتابتها: D). إذا كنت لا ترغب في تحليل الشفرة الخاصة بك إلى كتل صغيرة واضحة وكتابة وظائف معقدة في أكثر من 100 سطر - انتظر التحذيرات من هذا البرنامج المساعد من أن التعقيد المعرفي لمثل هذه الأماكن في المشروع مرتفع للغاية بالنسبة للدعم على المدى الطويل ويجب إعادة كتابته.
سيقسم هذا البرنامج الإضافي عليك ببساطة عندما تريد كتابة حلقات قياسية أو أثناءها. في الوقت الحاضر ، لطالما كان من المعتاد استخدام forEach ، forEach ، forEach ، وما إلى ذلك. أنا أتفق بشكل عام مع المؤلف وأدخل المكوّن الإضافي في مشروعي.
مكون إضافي سيمنعك من توسيع النماذج الأولية لكائنات JavaScript القياسية. قل لا! بقع قرد. وهذا صحيح.
مكون إضافي يساعدك على كتابة الوعود الصحيحة ويحميك من الأخطاء الشائعة عند العمل معها. كما أنها مفيدة للغاية ، على ما أعتقد.
إليك قائمة بالمكونات الإضافية في النهاية. ماذا تستخدم في مشاريعك لاختبار الكود الخاص بك؟
في الختام ، سأترك مثالاً على تكوين ملف .eslintrc من المشروع الحالي:
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }