हम ESLint के लिए govnokod, या उपयोगी प्लग-इन को प्रतिबंधित करते हैं

मुझे लगता है कि कई लोग जानते हैं कि गंभीर परियोजनाओं में इन दिनों त्रुटियों के लिए कोड की जांच करने और टीम में अपनाई गई शैली से मेल खाने के लिए विशेष साधनों का उपयोग करने की प्रथा है।

आज मैं ESLint पर संपर्क करना चाहता हूं, त्रुटियों के लिए जावास्क्रिप्ट परियोजनाओं की जांच करने के लिए एक महान उपकरण।

मैं इस लेख में स्पष्ट बिंदुओं के बारे में नहीं लिखूंगा, जैसे कि आपके प्रोजेक्ट के लिए एस्लिन्ट सेट करना: मुझे उम्मीद है कि आप इस भाग पर प्रलेखन स्वयं पढ़ सकते हैं और इसे अपने आप से जोड़ सकते हैं। और यहां हम चर्चा करेंगे कि आप मूल टूल से क्या अतिरिक्त "किट" कनेक्ट कर सकते हैं और इसे अपने सबसे बड़े लाभ के लिए काम करने के लिए कैसे कॉन्फ़िगर कर सकते हैं।

eslint-config-Airbnb

अब हम एयरबीएनबी टीम के नियमों के आधार पर नियमों के साथ तैयार कॉन्फ़िगरेशन का उपयोग करते हैं। जावास्क्रिप्ट कोड लिखने के लिए उनके मानक अब जीथब पर 73 हजार से अधिक सितारे हैं और कई प्रसिद्ध संगठनों द्वारा उपयोग किया जाता है । मुझे लगता है कि आप उस पर भरोसा कर सकते हैं।

यह कॉन्फ़िगरेशन एक ही बार में प्रोजेक्ट के लिए कई महत्वपूर्ण पैकेजों को जोड़ता है: eslint , eslint-plugin-import , eslint-plugin-react eslint-plugin-jsx-a11y और eslint-plugin-jsx-a11y , जिसमें आपके कोड को मान्य करने के लिए अतिरिक्त नियम हैं। यह ध्यान दिया जाना चाहिए कि यह कॉन्फ़िगरेशन फ़ाइल का अर्थ है कि आप अपने प्रोजेक्ट में React.js का उपयोग करते हैं। यदि यह ऐसा नहीं है, तो आप हमेशा एस्क्लिंट-कॉन्फिग्रेशन-एयरबीएनबी-बेस कॉन्फ़िगरेशन को स्थापित कर सकते हैं, जिसमें सभी समान शामिल हैं, जो कि React.js के लिए प्लग-इन निर्भरता के अपवाद के साथ है।

आइए प्लग-इन पैकेजों पर करीब से नज़र डालें और जानें कि वे आपके प्रोजेक्ट कोड में क्या जाँच करेंगे:

eslint-प्लगइन-आयात

यह प्लगइन आपके सभी आयातों के लिए आपकी परियोजना के लिए सत्यापन जोड़ देगा और यह सुनिश्चित करेगा कि परियोजना में सभी आयातित निर्भरताएं मौजूद हैं, बाद के काम के लिए एक सुविधाजनक क्रम में जुड़ा हुआ है, और इसी तरह।

eslint-प्लगइन प्रतिक्रिया

प्लगइन आपको React.js पर अधिक सही कोड लिखने की अनुमति देता है और आपको सामान्य एंटीपैटर्न से बचाता है, और आपको डेटा प्रकारों के सभी घटकों के विवरणों को स्वीकार करने के लिए मजबूर करता है।

eslint-प्लगइन-jsx-a11y

यह प्लगइन React.js पर परियोजनाओं पर भी लागू होता है और यह काम में भी बेहद उपयोगी है। यह आपको HTML लिखने के लिए बाध्य करेगा जो एक्सेसिबिलिटी मानकों के अनुरूप बेहतर होगा। आपकी परियोजनाएं विकलांग लोगों के लिए बहुत अधिक सुविधाजनक हो जाएंगी।

सामान्य तौर पर, नियमों का यह सेट आपकी परियोजनाओं को बहुत बेहतर लिखा जाएगा, साथ ही कोड लिखने के लिए आधुनिक मानकों के अपने ज्ञान का विस्तार करेगा।

लेकिन हमारी दुनिया में एस्लिन्ट के लिए न केवल ये प्लगइन्स हैं, बल्कि कई अन्य भी हैं। इस विषय पर पहले से ही एक अद्भुत अद्भुत-गूढ़ परियोजना है। हाल के दिनों में, मैंने इस विषय का अध्ययन करने का फैसला किया और मैं आपके न्यायालय को सबसे दिलचस्प चीजें पेश करना चाहता हूं जो मेरे वर्तमान प्रोजेक्ट में व्यक्तिगत रूप से परीक्षण और कार्यान्वित की गईं, जो मैं वर्तमान में काम कर रहा हूं।

ESLint के लिए अतिरिक्त प्लगइन्स

आप अपने दम पर उपरोक्त परियोजना का अध्ययन कर सकते हैं और व्यक्तिगत रूप से अपने लिए दिलचस्प प्लगइन्स पा सकते हैं, लेकिन मैं यहां लिखूंगा कि मुझे क्या रुचि है।

eslint-प्लगइन-नोड

विशेष रूप से Node.js परियोजनाओं के लिए डिज़ाइन किया गया एक प्लगइन। मुझे लगता है कि बहुत से काम आ सकते हैं यदि वे अभी भी घर पर इसका उपयोग नहीं करते हैं।

eslint-प्लगइन-lodash

यह प्लगइन आपको "लव" बनाएगा और लॉश से तरीकों के लिए जेएस के अधिकांश तरीकों को फिर से लिखेगा, और इसमें कोड लिखने के लिए कई सिफारिशें भी शामिल हैं, जो लॉश चेन्स का उपयोग करता है। सामान्य तौर पर, यह बहुत दिलचस्प है, लेकिन अभी तक मैंने इसे केवल इसलिए लागू नहीं किया है क्योंकि अब हमें इस प्लगइन के नियमों का पालन करने के लिए बहुत अधिक कोड को फिर से लिखना होगा। लेकिन भविष्य के लिए, मैंने इसे अपने लिए लिया।

eslint-प्लगइन-compat

यह प्लगइन आपको विकास के दौरान सीधे उस कोड की अनुकूलता की जांच करने की अनुमति देता है जिसे आपने वर्तमान ब्राउज़रों के साथ लिखा था जिसे आप इस समय अपने प्रोजेक्ट में लक्षित कर रहे हैं। फिलहाल, मैंने इसे अपने प्रोजेक्ट से नहीं जोड़ा है क्योंकि हम अब polyfill.io सेवा का उपयोग करते हैं, जो स्वचालित रूप से प्रत्येक व्यक्तिगत ब्राउज़र में सभी आवश्यक पॉलीफ़िल को जोड़ता है, इसलिए कोड संगतता की समस्या पूरी तरह से अनुपस्थित है। लेकिन भविष्य के लिए मैं खुद के लिए भी एक नोट बना रहा हूं: अगर मुझे इसकी आवश्यकता है तो क्या होगा?

eslint-प्लगइन-अनुकूलन-regex

एक प्लगइन जो आपको बताता है कि आपके नियमित अभिव्यक्तियों को कैसे अनुकूलित किया जाए। स्थापित क्यों नहीं? यह शानदार नहीं होगा, मैंने सोचा।

eslint-प्लगइन-sonarjs

अतिरिक्त बॉडी किट की इस सूची में से एक सबसे दिलचस्प खोज है। इस प्लगइन में चेक का एक पूरा सेट शामिल है, जिसकी बदौलत यह कोड के खराब लिखे गए खंडों, समान कार्यों और बस अर्थहीन निर्माणों को ढूंढता है, और उन्हें फिर से लिखने की पेशकश करता है (यह एक दया है कि वह खुद नहीं जानता कि उन्हें कैसे फिर से लिखना है: डी)। यदि आपको अपने कोड को छोटे स्पष्ट ब्लॉकों में विघटित करना और 100+ लाइनों में जटिल कार्य लिखना पसंद नहीं है - इस प्लगइन से चेतावनी की प्रतीक्षा करें कि परियोजना में ऐसी जगहों की संज्ञानात्मक जटिलता दीर्घकालिक समर्थन के लिए बहुत अधिक है और इसे फिर से लिखा जाना चाहिए।

eslint-प्लगइन-नो-छोरों

जब आप मानक लिखना चाहते हैं for या लूप while यह प्लगइन आपको शपथ दिलाएगा। आजकल, यह लंबे समय से प्रथागत है उपयोग करने के लिए, map , reduce , और इसी तरह। मैं आम तौर पर लेखक से सहमत हूं और मेरी परियोजना में प्लग इन को प्लग करता हूं।

eslint-प्लगइन-नो-use- विस्तार देशी

एक प्लगइन जो आपको मानक जावास्क्रिप्ट वस्तुओं के प्रोटोटाइप को विस्तारित करने से रोकेगा। कहो ना! बंदर पटकते हैं। और यह सही है।

eslint-प्लगइन-वादा

एक प्लगइन जो आपको सही वादे लिखने में मदद करता है और उनके साथ काम करते समय आपको सामान्य गलतियों से बचाता है। मेरे विचार से यह बहुत उपयोगी है।

यहाँ अंत में प्लगइन्स की एक सूची दी गई है। अपने कोड का परीक्षण करने के लिए आप अपनी परियोजनाओं में क्या उपयोग करते हैं?

अंत में, मैं वर्तमान परियोजना से हमारे .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" } }