Prettier, ESLint, कर्कश, लिंट-मंचित, और EditorConfig: लेखन कोड के लिए उपकरण

आप नीट कोड लिखने का प्रयास करते हैं, लेकिन यह नहीं जानते कि कहां से शुरू करें ... आपने स्टाइल गाइड पढ़े, जैसे Airbnb से, अग्रणी विशेषज्ञों की व्यावहारिक सिफारिशों का पालन करने का प्रयास करें ... क्या आपको अप्रयुक्त कोड को हटाना है? अनावश्यक चरों की तलाश करनी है? क्या आप अपने कार्यक्रमों में उपयोग किए जाने वाले खराब पैटर्न की पहचान करने की कोशिश कर रहे हैं? उदाहरण के लिए - आप समझना चाहते हैं, एक निश्चित फ़ंक्शन के कोड की जटिलताओं को पढ़ना, चाहे वह कुछ वापस करेगा या नहीं। परिचित लग रहा है? समस्या यह है कि एक प्रोग्रामर के लिए बहुत कुछ करना और बहुत कुछ सीखना बहुत मुश्किल है।

हो सकता है कि आप एक टीम लीडर हों जिनके नेतृत्व में विभिन्न स्तरों के डेवलपर्स की टीम काम कर रही है? क्या आपकी टीम में नए लोग हैं? क्या यह आपको परेशान करता है कि जो कोड वे लिखते हैं वह आपके मानकों को पूरा नहीं करेगा? क्या आपके दिन अन्य लोगों के कोड के परीक्षणों से गुजरते हैं, जब ये चेक मुख्य रूप से मानकों के अनुपालन की चिंता करते हैं, न कि प्रोग्राम लॉजिक के साथ?



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

अर्थात्, यहाँ हम Prettier, ESLint, Husky, Lint-Staged, EditorConfig जैसे उपकरणों के बारे में बात करेंगे, और स्वरूपण और कोड लाइनिंग के स्वचालन के बारे में। यह सामग्री मुख्य रूप से रिएक्ट विकास पर केंद्रित है, लेकिन यहां चर्चा किए गए सिद्धांतों को किसी भी वेब परियोजना में लागू किया जा सकता है। यहाँ एक रिपॉजिटरी है जहाँ, अन्य बातों के अलावा, यहाँ जो चर्चा की गई है वह संकलित है।

खूबसूरत

प्रेटियर एक कोड स्वरूपण उपकरण है जिसका उद्देश्य कार्यक्रमों को डिजाइन करने के लिए कठोर-कोडित नियमों का उपयोग करना है। यह कोड को स्वचालित रूप से प्रारूपित करता है। यहाँ है कि यह कैसा दिखता है।


प्रीटीयर नियमों का पालन करते हुए कोड को प्रारूपित करता है

Ier Prettier की ताकत

यहां प्रीटियर की विशेषताएं और विशेषताएं हैं जो हमें इस उपकरण की उपयोगिता के बारे में बात करने की अनुमति देती हैं:

• मौजूदा कोड आधार को बांधना। प्रीटीयर का उपयोग करते हुए, आप इसे केवल एक कमांड के साथ शाब्दिक रूप से कर सकते हैं। बड़ी मात्रा में कोड के मैनुअल प्रसंस्करण में अधिक समय लगेगा। उदाहरण के लिए, कोड की 20,000 पंक्तियों को मैन्युअल रूप से प्रारूपित करने के लिए आवश्यक श्रम की कल्पना करें।
• Prettier को लागू करना आसान है। प्रेटियर कोड का प्रारूपण करते समय शैली के लिए "औसत", कम से कम विवादास्पद दृष्टिकोण का उपयोग करता है। चूंकि परियोजना खुला स्रोत है, कई लोगों ने इसमें योगदान दिया है, इसे बेहतर बनाया है और तेज कोनों को सुचारू किया है।
• Prettier आपको कोड लिखने पर ध्यान केंद्रित करने देता है, न कि इसे प्रारूपित करने में। बहुत से लोगों को पता ही नहीं चलता कि कोड को फॉर्मेट करने में कितना समय और मेहनत लगती है। प्रीटीयर का उपयोग करने से आप प्रारूपण के बारे में नहीं सोचते हैं, बल्कि इसके बजाय प्रोग्रामिंग करने की अनुमति देते हैं। मेरे मामले में, उदाहरण के लिए, कार्य कुशलता, प्रीटीयर के लिए धन्यवाद, 10% की वृद्धि हुई।
• Prettier शुरुआती मदद करता है। यदि आप गंभीर पेशेवरों के साथ एक ही टीम में काम करने वाले शुरुआती प्रोग्रामर हैं, और आप उनकी पृष्ठभूमि के खिलाफ योग्य दिखना चाहते हैं, तो प्रिटियर आपकी इसमें मदद करेंगे।

▍Configuring Prettier

यहां बताया गया है कि नए प्रोजेक्ट में प्रीटियर का उपयोग कैसे किया जाए। app फ़ोल्डर बनाएं, और उसके पास जाकर, कमांड लाइन पर निम्न कमांड चलाएं:

 npm init -y 

इस कमांड के लिए धन्यवाद, npm package.json फ़ोल्डर में एक नया प्रोजेक्ट शुरू करता है।

मैं, इस सामग्री में, yarn का उपयोग करूंगा, लेकिन यहां आप npm उपयोग कर सकते हैं। Prettier को किसी मौजूदा प्रोजेक्ट से भी जोड़ा जा सकता है।

हमारी परियोजना की विकास निर्भरता के रूप में prettier पैकेज स्थापित करें:

 yarn add --dev prettier 

इस आदेश के लिए धन्यवाद, एक package.json निर्भरता प्रविष्टि package.json जोड़ा जाएगा जो इस तरह दिखता है:

 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "prettier": "prettier --write src/**/*.js" }, "devDependencies": {   "prettier": "^1.14.3" } } 

हम इस बारे में बात करेंगे कि "prettier": "prettier — write src/**/*.js" लाइन का क्या अर्थ है "prettier": "prettier — write src/**/*.js" थोड़ी देर बाद। इस बीच, app फ़ोल्डर में src फ़ोल्डर बनाएं। इस फ़ोल्डर में, index.js फ़ाइल बनाएँ, हालाँकि आप इसे जो चाहें नाम दे सकते हैं।

हम इस फ़ाइल में (इस भद्दे रूप में) निम्न कोड जोड़ेंगे:

 let person =                     { name: "Yoda",               designation: 'Jedi Master '               };             function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`)             } trainJedi(person)             trainJedi({ name: 'Adeel',             designation: 'padawan' }); 

तो, इस समय हमारे पास src/app/index.js , जिसमें एक खराब डिज़ाइन किया गया कोड है।

इसे कैसे ठीक करें? खराब स्वरूपित कोड के साथ काम करने के लिए तीन दृष्टिकोण हैं:

1. मैन्युअल रूप से इस कोड को प्रारूपित करें।
2. एक स्वचालित उपकरण का उपयोग करें।
3. इसे वैसे ही छोड़ दें और इस पर काम करें (मैं आपसे इस दृष्टिकोण को नहीं चुनने के लिए कहता हूं)।

मैं दूसरा विकल्प चुनने जा रहा हूं। अब हमारी परियोजना में एक समान निर्भरता है, और, इसके अलावा, package.json फ़ाइल के scripts अनुभाग में Prettier के बारे में एक रिकॉर्ड है। यह स्पष्ट है कि हम कोड को प्रारूपित करने के लिए इस उपकरण का उपयोग करेंगे। ऐसा करने के लिए, app फ़ोल्डर में prettier.config.js फ़ाइल बनाएं और प्रीयरियर के लिए नियम जोड़ें:

 module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, }; 

आइए इन नियमों का विश्लेषण करें:

• printWidth: 100 - लाइन की लंबाई 100 अक्षरों से अधिक नहीं होनी चाहिए।
• singleQuote: true - सभी दोहरे उद्धरण चिह्नों को एकल उद्धरण में बदल दिया जाएगा। अधिक विवरण के लिए Airbnb स्टाइल गाइड देखें। मुझे वास्तव में यह मार्गदर्शिका पसंद है, मैं इसका उपयोग अपने कोड की गुणवत्ता में सुधार करने के लिए करता हूं।
• trailingComma: 'all' - वस्तु की अंतिम संपत्ति के बाद अल्पविराम प्रदान करता है। यहाँ इस विषय पर एक अच्छा लेख है।
• bracketSpacing: true - वस्तु के शरीर के बीच रिक्त स्थान डालने के लिए जिम्मेदार और वस्तु शाब्दिक में घुंघराले ब्रेसिज़। यदि यह संपत्ति true , तो वस्तु शाब्दिक का उपयोग करके घोषित की गई वस्तुएं इस तरह दिखाई देंगी: { foo: bar } । यदि false सेट किया गया false , तो ऐसे निर्माण इस तरह दिखेंगे: {foo: bar} ।
• jsxBracketSameLine: false - इस नियम के लिए धन्यवाद, बहु-पंक्ति JSX तत्वों में प्रतीक को अंतिम पंक्ति पर रखा जाएगा। यदि यह नियम true है, तो कोड ऐसा दिखता true :

 <button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button> 

यहाँ है कि क्या होता है अगर यह false :

 <button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button> 

• tabWidth: 2 - संरेखण स्तर प्रति रिक्त स्थान की संख्या निर्धारित करता है।
• semi: true - यदि यह नियम सही पर सेट true , तो अभिव्यक्तियों के अंत में एक अर्धविराम जोड़ा जाता है।

यहां सभी प्रिटियर नियम खोजें।

अब जब नियम कॉन्फ़िगर किए गए हैं, तो इस स्क्रिप्ट के बारे में बात करते हैं:

 "prettier": "prettier  — write src/**/*.js" 

इस डिजाइन के लिए धन्यवाद, प्रीटीयर लॉन्च करता है और src फ़ोल्डर में सभी .js फाइलें ढूंढता है। - --write ध्वज उसे स्वरूपित फ़ाइलों को सहेजने के लिए कहता है क्योंकि वे संसाधित होते हैं और उनमें पाई गई त्रुटियों को स्वरूपित करने को सही करते हैं।

कमांड लाइन से स्क्रिप्ट चलाएँ:

 yarn prettier 

इसके बाद ऐसा हुआ है कि ऊपर दिखाए गए खराब फॉर्मेट कोड के साथ।


Prettier के साथ कोड स्वरूपण का परिणाम

इस पर हम मानेंगे कि प्रीटीयर के साथ हमने सोचा था। बात करते हैं लिंटर की।

ESLint

लाइनिंग एक प्रकार का स्टैटिक कोड विश्लेषण है जो अक्सर समस्याग्रस्त डिजाइन पैटर्न या कोड को खोजने के लिए उपयोग किया जाता है जो कुछ शैली दिशानिर्देशों का पालन नहीं करता है।

अधिकांश प्रोग्रामिंग भाषाओं के लिए डिज़ाइन किए गए लिंटर हैं, कभी-कभी कंपाइलर में कोडिंग की प्रक्रिया में लाइनिंग शामिल होती है। लाइनिंग की यह परिभाषा ओपन सोर्स जावास्क्रिप्ट पेज के लिए ओपन सोर्स इंफॉर्मेशन पेज से ली गई है, जिसके बारे में हम बात करेंगे।

▍ मुझे जावास्क्रिप्ट के लिए लाइनर की आवश्यकता क्यों है?

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

ESLint जैसे लिंटर , डेवलपर्स को इसे शुरू किए बिना कोड में समस्याएं खोजने की अनुमति देते हैं।

Int ESLint एक विशेष उपकरण क्यों है?

इस खंड के शीर्षक में एक अच्छा प्रश्न रखा गया है। यहाँ मुद्दा यह है कि ESLint प्लगइन्स का समर्थन करता है। तो, कोड सत्यापन नियम एक अखंड पैकेज नहीं होना चाहिए। आपकी जरूरत की हर चीज आवश्यकतानुसार जुड़ी हो सकती है। सिस्टम में जोड़ा गया प्रत्येक लिंट नियम स्वायत्त है, इसे दूसरों के स्वतंत्र रूप से चालू या बंद किया जा सकता है। प्रत्येक नियम को डेवलपर की इच्छा के अनुसार एक अलर्ट स्तर सौंपा जा सकता है - यह एक चेतावनी (चेतावनी) या एक त्रुटि (त्रुटि) हो सकती है।

ESLint का उपयोग करते समय, आप पूरी तरह से अनुकूलन प्रणाली के साथ काम कर रहे हैं जो आपकी समझ को प्रतिबिंबित कर सकता है कि सही कोड कैसा दिखना चाहिए और आपके द्वारा पालन किए जाने वाले नियमों के किस सेट को कैप्चर करना चाहिए।

मौजूदा जावास्क्रिप्ट शैली गाइडों में, निम्नलिखित बहुत लोकप्रिय हैं:

• Google जावास्क्रिप्ट स्टाइल गाइड
• Airbnb जावास्क्रिप्ट स्टाइल गाइड

मैं, जैसा कि पहले ही उल्लेख किया गया है, Airbnb शैली गाइड का उपयोग करें। मुझे इस दस्तावेज़ द्वारा कंपनी में मेरे प्रबंधक द्वारा सलाह दी गई, जहां मेरा पेशेवर करियर शुरू हुआ, और मैं इस शैली गाइड को अपनी सबसे मूल्यवान संपत्ति मानता हूं।

इस गाइड को सक्रिय रूप से बनाए रखा गया है - GitHub पर इसके भंडार पर एक नज़र डालें। यहां मैं इसके आधार पर नियमों के एक सेट का उपयोग करूंगा।

अब चलिए package.json फ़ाइल पर काम करते हैं, इसमें कुछ निर्भरताएँ जोड़ें:

 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "lint": "eslint --debug src/",   "lint:write": "eslint --debug src/ --fix",   "prettier": "prettier --write src/**/*.js" }, "husky": {   "hooks": {     "pre-commit": "lint-staged"   } }, "lint-staged": {   "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": {   "babel-eslint": "^8.2.3",   "eslint": "^4.19.1",   "eslint-config-airbnb": "^17.0.0",   "eslint-config-jest-enzyme": "^6.0.2",   "eslint-plugin-babel": "^5.1.0",   "eslint-plugin-import": "^2.12.0",   "eslint-plugin-jest": "^21.18.0",   "eslint-plugin-jsx-a11y": "^6.0.3",   "eslint-plugin-prettier": "^2.6.0",   "eslint-plugin-react": "^7.9.1",   "husky": "^1.1.2",   "lint-staged": "^7.3.0",   "prettier": "^1.14.3" } } 

इस कॉन्फ़िगरेशन के साथ काम करने के तरीके के बारे में बात करने से पहले, मैं उन प्रोजेक्ट निर्भरताओं पर ध्यान देना चाहता हूं जो package.json जोड़े गए हैं। package.json । मेरा मानना ​​है कि कुछ निर्भरता का उपयोग करने से पहले, आपको पता होना चाहिए कि वे क्या भूमिका निभाते हैं।

इसलिए, हम यहां प्रस्तुत पैकेजों की भूमिका पर चर्चा करेंगे:

• babel-eslint - आपको babel-eslint को दी जाने वाली हर चीज पर लागू होने के लिए babel-eslint का उपयोग करने की अनुमति देता है। आपको इस प्लगइन की आवश्यकता नहीं है यदि आप फ्लो या प्रायोगिक सुविधाओं का उपयोग नहीं कर रहे हैं जो कि ESLint अभी तक समर्थन नहीं करता है।
• eslint कोड कोड के लिए उपयोग किया जाने वाला मुख्य उपकरण है।
• eslint-config-airbnb - eslint-config-airbnb नियमों को एक कॉन्फ़िगरेशन के रूप में प्रदान करता है जिसे संशोधित किया जा सकता है।
• eslint-plugin-babel एक ESLint प्लगइन है, जो babel-eslint पूरक करता है। इसने उन नियमों को फिर से डिज़ाइन किया जो प्रायोगिक सुविधाओं को संसाधित करते समय babel-eslint का उपयोग करते समय समस्याएँ पैदा करते हैं।
• eslint-plugin-import - यह पैकेज ताजा import/export सिंटैक्स निर्माण को जोड़ने का समर्थन करता है और फ़ाइल पथों की गलत वर्तनी और आयातित मॉड्यूल के नामों से जुड़ी समस्याओं को रोकने में मदद करता है।
• eslint-plugin-jsx-a11y - विकलांग लोगों के लिए eslint-plugin-jsx-a11y तत्वों की उपलब्धता के बारे में नियम प्रदान करता है। वेब पहुँच बहुत महत्वपूर्ण है।
• eslint-plugin-prettier prettier - ESLint और Prettier को एक साथ काम करने में मदद करता है। यह इस तरह दिखता है: जब प्रीटीयर कोड को प्रारूपित करता है, तो यह ईएसएलआईटी नियमों को ध्यान में रखता है।
• eslint-plugin-react - इसमें एक्‍लिंट के नियम अभिक्रिया के लिए बनाए गए हैं

इस लेख में, हम कोड परीक्षण के बारे में बात नहीं कर रहे हैं, लेकिन ऊपर के package.json में। Jest / Enzyme का उपयोग करके यूनिट परीक्षण के लिए डिज़ाइन की गई निर्भरताएं हैं। अब, यदि आप परीक्षण के लिए इन उपकरणों का उपयोग करने का निर्णय लेते हैं, तो संबंधित पैकेजों का विवरण।

• eslint-config-jest-enzyme - यह पैकेज उन मामलों के लिए है जब आप jest-environment-enzyme उपयोग करते हैं, जो इस तथ्य की ओर जाता है कि प्रतिक्रिया और एंजाइम चर वैश्विक हैं। इसके लिए धन्यवाद, ESLint इस तरह के चर के बारे में चेतावनी जारी नहीं करेगा।
• eslint-plugin-jest — जेस्ट के लिए ESlint प्लगइन।

फ़ाइल में कुछ और पैकेज हैं जिन्हें हम बाद में चर्चा करेंगे, स्वचालन मुद्दों पर चर्चा करेंगे। यह husky और lint-staged ।

अब हमारे पास सामान्य शब्दों में, हमारे उपकरणों पर चर्चा की गई है, हम काम करना जारी रखेंगे।
app फ़ोल्डर में .eslintrc.js फ़ाइल बनाएं:

 module.exports = {   env: {       es6: true,       browser: true,       node: true,   },   extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],   plugins: [       'babel',       'import',       'jsx-a11y',       'react',       'prettier',   ],   parser: 'babel-eslint',   parserOptions: {       ecmaVersion: 6,       sourceType: 'module',       ecmaFeatures: {           jsx: true       }   },   rules: {       'linebreak-style': 'off', //    Windows.       'arrow-parens': 'off', //   prettier       'object-curly-newline': 'off', //   prettier       'no-mixed-operators': 'off', //   prettier       'arrow-body-style': 'off', //  -   ?       'function-paren-newline': 'off', //   prettier       'no-plusplus': 'off',       'space-before-function-paren': 0, //   prettier       'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb           'no-console': 'error', // airbnb         'no-alert': 'error', // airbnb         'no-param-reassign': 'off', //  -   ?       "radix": "off", // parseInt, parseFloat  radix .    .       'react/require-default-props': 'off', // airbnb           'react/forbid-prop-types': 'off', // airbnb           'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb  .jsx       'prefer-destructuring': 'off',       'react/no-find-dom-node': 'off', //           'react/no-did-mount-set-state': 'off',       'react/no-unused-prop-types': 'off', //            'react/jsx-one-expression-per-line': 'off',       "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],       "jsx-a11y/label-has-for": [2, {           "required": {               "every": ["id"]           }       }], //     htmlFor  label       'prettier/prettier': ['error'],   }, }; 

अब app फ़ोल्डर में .eslintignore फ़ाइल जोड़ें:

 /.git /.vscode node_modules 

अब बात करते हैं कि .eslintrc.js फ़ाइल कैसे .eslintrc.js , और इसमें प्रस्तुत निर्माणों के अर्थ के बारे में।

इस फ़ाइल में निम्न संरचना है:

 module.exports = {  env:{},  extends: {},  plugin: {},  parser: {},  parserOptions: {},  rules: {}, }; 

संबंधित नामों वाली वस्तुओं द्वारा दर्शाई गई इस फाइल के ब्लॉक पर विचार करें:

• env - आपको उन परिवेशों की सूची निर्दिष्ट करने की अनुमति देता है जिनके लिए आप कोड की जाँच करने की योजना बनाते हैं। हमारे मामले में, वहाँ es6 , browser और node गुण true करने के लिए सेट कर रहे true । es6 पैरामीटर में ES6 विशेषताएं शामिल हैं, मॉड्यूल के अपवाद के साथ (यह सुविधा स्वचालित रूप से सेट होती है, parserOptions ब्लॉक में, ecmaVersion पैरामीटर को 6 )। browser पैरामीटर Windows जैसे वैश्विक ब्राउज़र चर को browser करता है। node पैरामीटर वैश्विक Node.js पर्यावरण चर और स्कोप जोड़ता है, उदाहरण के लिए, global । पर्यावरण के बारे में विवरण यहां पाया जा सकता है ।
• extends - विन्यास के साथ लाइनों की एक सरणी है, प्रत्येक अतिरिक्त कॉन्फ़िगरेशन के साथ पिछले एक का विस्तार होता है। Airbnb airbnb नियमों का उपयोग airbnb किया जाता airbnb , जो कि jest विस्तारित होते हैं और फिर jest-enzyme विस्तारित होते हैं।
• plugins - यहाँ लाइनिंग नियम हैं जिनका हम उपयोग करना चाहते हैं। हम नियम को लागू करते हैं, import , jsx-a11y , react , jsx-a11y , जिसके बारे में हमने पहले ही बात की थी।
• parser - ESLint डिफ़ॉल्ट रूप से एस्प्री parser का उपयोग parser है, लेकिन चूंकि हम बैबेल के साथ काम करते हैं, इसलिए हमें बैबल-ईएसएलआईएनटी का उपयोग करने की आवश्यकता है।
• parserOptions - चूंकि हमने मानक पार्सर को babel-eslint बदल दिया है, इसलिए हमें इस ब्लॉक में गुण सेट करने की भी आवश्यकता है। 6 को सेट की गई ecmaVersion संपत्ति ecmaVersion को इंगित करती है कि ES6 कोड की जाँच की जाएगी। चूंकि हम EcmaScript मॉड्यूल में कोड लिख रहे हैं, sourceType गुण module सेट है। और अंत में, चूंकि हम रिएक्ट का उपयोग करते हैं, जिसका अर्थ है जेएसएक्स का उपयोग करना, जो कि ecmaFeatures कुंजी के साथ एक वस्तु true जो कि ecmaFeatures संपत्ति के लिए लिखा गया है।
• rules - मुझे .eslintrc.js का यह भाग सबसे अधिक पसंद है क्योंकि यह आपको ESLint नियमों को कॉन्फ़िगर करने की अनुमति देता है। प्लगइन्स का उपयोग करके हमारे द्वारा विस्तारित या जोड़े गए सभी नियमों को बदला या पुनर्परिभाषित किया जा सकता है, और यह rules ब्लॉक में किया जाता है। फ़ाइल के पाठ में नियमों पर टिप्पणियाँ हैं।

अब बात करते हैं .eslintignore फाइल की। यह फ़ाइल उन फ़ोल्डर का प्रतिनिधित्व करने वाले रास्तों की एक सूची को स्वीकार करती है, जिनकी सामग्री को ESLint का उपयोग करके संसाधित नहीं किया जाना चाहिए।

तीन फ़ोल्डर यहां परिभाषित किए गए हैं:

• /.git - मुझे Git से संबंधित फ़ाइलों की जाँच करने के लिए ESLint की आवश्यकता नहीं है।
• /.vscode - प्रोजेक्ट में यह फ़ोल्डर इस तथ्य के कारण है कि मैं वीएस कोड का उपयोग करता हूं। यहां संपादक कॉन्फ़िगरेशन जानकारी संग्रहीत करता है जिसे प्रत्येक प्रोजेक्ट के लिए सेट किया जा सकता है। इस डेटा को लिंटर द्वारा भी संसाधित नहीं किया जाना चाहिए।
• node-modules - निर्भरता फ़ाइलों को भी एक लिंटर के साथ जांचने की आवश्यकता नहीं है।

अब आइए package.json में कुछ नई लिपियों को देखें। यहाँ वे हैं:

 "lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix" 

यदि आप उनमें से पहले को कार्यान्वित करते हैं, yarn lint या npm run lint कमांड का उपयोग करते हैं, तो यह लिंटर को src डायरेक्टरी की सभी फाइलों को देखने और उन फाइलों पर एक विस्तृत रिपोर्ट प्रदर्शित करने का कारण बनेगा जिसमें यह त्रुटियां पाई गईं। इस रिपोर्ट का उपयोग करके, आप इन त्रुटियों को ठीक कर सकते हैं।


लिंट लिपि चल रही है

यदि आप दूसरी स्क्रिप्ट ( yarn lint:write ) पर अमल करते हैं, तो ईएसलिंट वही चेक करेगा जो पहले किया गया था। अंतर केवल इतना है कि इस मोड में, सिस्टम पता की गई त्रुटियों को ठीक करने की कोशिश करेगा, कोड को सबसे सभ्य रूप में लाने की कोशिश करेगा।

वीएस कोड के लिए ESLint एक्सटेंशन

हमारे पास पहले से ही Prettier और ESLint कॉन्फ़िगर हैं, लेकिन इन उपकरणों की क्षमताओं का उपयोग करने के लिए, हमें स्क्रिप्ट्स को चलाना होगा। यह बहुत सुविधाजनक नहीं है, इसलिए इसे ठीक करने का प्रयास करें। अर्थात्, हम यह सुनिश्चित करना चाहते हैं कि कोड का प्रारूपण और लाइनिंग संपादक द्वारा फाइल को बचाने के लिए कमांड द्वारा किया जाता है। इसके अलावा, हम कमिटिंग से पहले कोडिंग की लाइनिंग और फॉर्मेटिंग करना चाहते हैं।

हम, एक उदाहरण के रूप में, वीएस कोड संपादक का उपयोग करते हैं। हमें VS कोड के लिए ESLint एक्सटेंशन की आवश्यकता होगी। इसे स्थापित करने के लिए, आप VS कोड एक्सटेंशन पैनल ( ctrl+shift+x ) खोल सकते हैं। यहां, खोज फ़ील्ड में, eslint दर्ज eslint । एक्सटेंशन की एक सूची दिखाई देती है। हमें क्या रुचिकर है जिसकी डेवलपर जानकारी डिर्क बाएमर है। इस एक्सटेंशन को स्थापित करने के बाद, संपादक को पुनरारंभ करें।

अब, प्रोजेक्ट ( app ) के रूट फ़ोल्डर में .vscode फ़ोल्डर बनाएं (नाम की शुरुआत में डॉट पर ध्यान दें - यह महत्वपूर्ण है)। इस फ़ोल्डर में, निम्न सामग्री के साथ एक settings.json फ़ाइल बनाएँ:

 { "editor.formatOnSave": false, "eslint.autoFixOnSave": true, } 

इसकी सामग्री पर विचार करें।

• editor.formatOnSave प्रॉपर्टी false इंगित करती है कि हमें फ़ाइल स्वरूपण के लिए आवेदन करने के लिए मानक कॉन्फ़िगरेशन की आवश्यकता नहीं है, क्योंकि इससे ESLint और Prettier के साथ संघर्ष हो सकता है।
• eslint.autoFixOnSave गुण को true सेट किया गया true , क्योंकि यह आवश्यक है कि इंस्टॉल की गई प्लग-इन हर बार फ़ाइल सहेजने के बाद आग लग जाए। चूंकि ESLint और Prettier एक परियोजना में एक साथ काम करते हैं, फ़ाइल को सहेजने से स्वरूपण और कोड लाइनिंग दोनों हो जाते हैं।

यह ध्यान रखना महत्वपूर्ण है कि अब, जब lint:write स्क्रिप्ट चलाया जाता है, तो यह लाइनिंग और कोड स्वरूपण दोनों का प्रदर्शन करेगा।

अपनी भावनाओं की कल्पना करें यदि आपको 20,000 लाइनों का प्रोजेक्ट कोड मिला है जिसे आपको जांचना और सुधारना होगा। अब कल्पना करें कि आपको यह मैन्युअल रूप से करना होगा। ऐसे काम में शायद एक महीना लगेगा। और उपरोक्त स्वचालन उपकरण की मदद से, यह सब लगभग तीस सेकंड में किया जाता है।

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

कर्कश

कर्कश पैकेज आपको गिट हुक का उपयोग करने की अनुमति देता है। इसका मतलब यह है कि आपके पास कुछ कार्रवाई करने का अवसर है, जिसमें कमिट करने से पहले या रिपॉजिटरी कोड भेजने से पहले।

हस्की की सुविधाओं का लाभ उठाने के लिए, पहले इस पैकेज को स्थापित करें:

 yarn add --dev husky 

उसके बाद, package.json में निम्नलिखित जोड़ें:

 "husky": {     "hooks": {         "pre-commit": "YOUR_COMMAND_HERE",    "pre-push": "YOUR_COMMAND_HERE"    } }, 

यह इस तथ्य को जन्म देगा कि commit या push कमांड को निष्पादित करने से पहले, एक निश्चित स्क्रिप्ट को बुलाया जाएगा, जो उदाहरण के लिए, कोड परीक्षण या स्वरूपण करता है।

हुस्की के बारे में विवरण यहाँ पाया जा सकता है ।

एक प्रकार का वृक्ष मंचन

लिंट-स्टेज्ड पैकेज आपको लिंटर का उपयोग करके अनुक्रमित फ़ाइलों की जांच करने की अनुमति देता है, जो त्रुटियों को रिपॉजिटरी में भेजे जाने से रोकने में मदद करता है।

कोडिंग करने से पहले लाइनिंग समझ में आता है। इसके लिए धन्यवाद, आप यह सुनिश्चित कर सकते हैं कि त्रुटियां रिपॉजिटरी में प्रवेश नहीं करती हैं, और वहां होने वाले कोड की एकीकृत स्टाइल प्रदान करती हैं। हालाँकि, पूरी परियोजना को सत्यापित करने के लिए लाइनिंग बहुत लंबा काम हो सकता है, और इस तरह के सत्यापन के परिणाम अर्थहीन हो सकते हैं। आखिरकार, लिनिंग को उन फ़ाइलों को उजागर करने की आवश्यकता हो सकती है जिन्हें आप प्रतिबद्ध करने की योजना बनाते हैं।

लिंट-स्टेज्ड आपको खोज पैटर्न द्वारा फ़िल्टर की गई अनुक्रमित फ़ाइलों पर मनमाने कार्यों का एक सेट करने की अनुमति देता है। इसके बारे में विवरण यहां पाया जा सकता है ।

Lint-staged पैकेज स्थापित करें:

 yarn add --dev lint-staged 

फिर, package.json फ़ाइल में, निम्नलिखित जोड़ें:

 "lint-staged": {     "*.(js|jsx)": ["npm run lint:write", "git add"] }, 

इस निर्माण के लिए धन्यवाद, lint:write कमांड को पहले निष्पादित किया जाएगा, फ़ाइल की सामग्री की जांच करना और त्रुटियों को ठीक करना, जिसके बाद फाइल को git add कमांड के साथ इंडेक्स में जोड़ा जाएगा। अब यह कमांड .js और .jsx फाइलों के उद्देश्य से है, लेकिन अन्य प्रकार की फाइलों के साथ भी यही काम किया जा सकता है।

हस्की और लिंट-मंचित साझाकरण

एक एक्शन आरेख पर विचार करें जो आपको अगले वर्कफ़्लो को व्यवस्थित करने की अनुमति देता है। हर बार जब आप कोड के साथ फाइल करते हैं, तो इस ऑपरेशन को करने से पहले, सिस्टम lint-staged स्क्रिप्ट को चलाता है, जो बदले में, lint:write चलाता है lint:write स्क्रिप्ट lint:write , जो कोड की लाइनिंग और स्वरूपण करता है। उसके बाद, फ़ाइलों को सूचकांक में जोड़ा जाता है और फिर प्रतिबद्ध किया जाता है। यह मुझे लगता है कि यह बहुत सुविधाजनक है। वास्तव में, package.json फ़ाइल के पहले प्रस्तुत कोड में, यह पहले से ही लागू है, हमने पहले इस बारे में बात नहीं की थी।

यहाँ हमारे package.json की सामग्री फिर से है:

 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "lint": "eslint --debug src/",   "lint:write": "eslint --debug src/ --fix",   "prettier": "prettier --write src/**/*.js" }, "husky": {   "hooks": {     "pre-commit": "lint-staged"   } }, "lint-staged": {   "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": {   "babel-eslint": "^8.2.3",   "eslint": "^4.19.1",   "eslint-config-airbnb": "^17.0.0",   "eslint-config-jest-enzyme": "^6.0.2",   "eslint-plugin-babel": "^5.1.0",   "eslint-plugin-import": "^2.12.0",   "eslint-plugin-jest": "^21.18.0",   "eslint-plugin-jsx-a11y": "^6.0.3",   "eslint-plugin-prettier": "^2.6.0",   "eslint-plugin-react": "^7.9.1",   "husky": "^1.1.2",   "lint-staged": "^7.3.0",   "prettier": "^1.14.3" } } 

अब जब आप हस्की और लिंट-मंचन के बारे में जानते हैं, तो आप गिट के साथ काम करने पर उनके प्रभाव का मूल्यांकन कर सकते हैं। अर्थात्, मान लें कि निम्नलिखित आदेश निष्पादित किए गए थे:

 $ git add . $ git commit -m "some descriptive message here" 

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

अब आप जानते हैं कि अपने प्रोजेक्ट में प्रीटियर, ESLint, हस्की और लिंट-स्टेज को कैसे एकीकृत किया जाए।

मैं आपको याद दिला दूं कि हमने ऊपर कहा है कि आपकी टीम के सभी सदस्य मेरे पसंदीदा VS कोड का उपयोग नहीं करते हैं। उन सभी को आसानी से काम करने के लिए, हमें .editorconfig फ़ाइल से निपटने की आवश्यकता है।

.Editorconfig फ़ाइल

आपकी टीम के विभिन्न सदस्य अलग-अलग संपादकों का उपयोग कर सकते हैं। उन्हें किसी भी एक संपादक को किसी भी चीज़ का उपयोग करने के लिए मजबूर करना। हालांकि, सभी के लिए समान सेटिंग्स का उपयोग करने के लिए, उदाहरण के लिए, इंडेंट या लाइन फीड के संबंध में, हम फाइल का उपयोग करते हैं। editorconfig । .

, . , , WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit .

app .editorconfig :

 # EditorConfig -  : http://EditorConfig.org #  EditorConfig   root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true #     Unix       [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100 

, :

• trim_trailing_whitespace = false — .md - . .js - false .
• indent_style = space — .
• indent_size = 2 — .
• end_of_line = lf — lf . , , . .
• insert_final_newline = true — .
• max_line_length = 100 — 100 .

परिणाम

, , , . , , .

प्रिय पाठकों! ? ?