सुंदर और साफ: उपकरण जो आपको सही-सही कोड प्राप्त करने में मदद करते हैं

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

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

इस लेख में हम जिन उदाहरणों को कवर करेंगे, वे प्रतिक्रिया के लिए प्रासंगिक हैं, हालांकि आपने जो पढ़ा है वह लगभग किसी भी वेब परियोजना पर लागू किया जा सकता है।

स्किलबॉक्स अनुशंसा करता है: व्यावहारिक पाठ्यक्रम "पेशे वेब डेवलपर" ।

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

लेख उपकरणों की पूरी सूची यहाँ है:

• खूबसूरत
• ESLint
• स्‍वचालित प्रारूप और बचत पर नियंत्रण
• कर्कश
• एक प्रकार का वृक्ष मंचन
• हस्की और लिंट-मंचित संयोजन के साथ
• EditorConfig

आइए Prettier से शुरू करते हैं

यह उपकरण एक विचारशील कोड अनुकूलक है।



इसकी आवश्यकता क्यों है?

तैयार कोड को साफ करता है। बस कल्पना करें कि आपको लगभग 20 हजार लाइनों को अनुकूलित करने की आवश्यकता है। Prettier यह सब अपने आप और तेज़ी से करेगा।

इसका उपयोग करना सरल है और अपने लिए अनुकूलित करना आसान है - प्रीटीयर को बेहतर बनाने के लिए कई टीमें काम करती हैं, इसलिए आप उस संस्करण को चुन सकते हैं जो आपको सूट करता है।

यदि आप एक शुरुआती प्रोग्रामर हैं, जो सुंदर कोड लिखना चाहते हैं, लेकिन पता नहीं है कि कहां से शुरू करना है, तो Prettier का प्रयास करें।

स्थापना

आपको एप्लिकेशन नामक एक फ़ोल्डर बनाने की आवश्यकता है, और कमांड लाइन पर फ़ोल्डर प्रकार के अंदर निम्नलिखित हैं:

npm init -y 

यह कमांड package.json फाइल बनाएगी।

अगला, हम निर्भरता से निपटते हैं।

 yarn add --dev prettier 

कमांड निष्पादित करने के बाद, नव निर्मित फ़ाइल के अंदर निम्नलिखित दिखाई देता है:

 { "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" } } 

इसके बाद, ऐप फ़ोल्डर के अंदर एक src / folder बनाएं। और 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 है।

आप इस पर निम्न कार्य कर सकते हैं:
- मैन्युअल रूप से प्रारूपित करें;
- स्वचालन का उपयोग करें;
- कुछ न करें (चीजों को जाने दें और आगे बढ़ें)।

तीसरा विकल्प चुनना बेहतर है, अन्यथा हमें कोड को अनुकूलित करने के लिए उपकरणों की आवश्यकता क्यों है? दूसरा विकल्प चुनें। हमारे पास एक निर्भरता है और हमारे पैकेज के अंदर एक Prettier स्क्रिप्ट है। json फ़ाइल।

अब ऐप फोल्डर में prettier.config.js बनाएं।

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

PrintWidth आपको यह सुनिश्चित करने की अनुमति देता है कि कोड 100 वर्णों से अधिक नहीं है;
SingleQuote सभी डबल कोट्स को सिंगल में कनवर्ट करता है;
trailingComma कोड में सभी झूलने वाले अल्पविरामों की जांच करेगा, विशेष रूप से ऑब्जेक्ट की अंतिम संपत्ति के अंत में। इसे यहाँ समझाया गया है।
कोष्ठक स्थान वस्तु शाब्दिक स्थानों का प्रबंधन करता है:

 If bracketSpacing is true - Example: { foo: bar } If bracketSpacing is false - Example: {foo: bar} jsxBracketSameLine    JSX- ">" // true example <button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button> // false example <button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button> 

tabWidth इंडेंट स्तर पर रिक्त स्थान की संख्या को परिभाषित करता है।
अर्ध - अगर सच्चे प्रिंट; बयान के अंत में।
यहां उन विकल्पों की पूरी सूची दी गई है, जो प्रिटियर साथ काम कर सकते हैं।

प्रारंभिक कॉन्फ़िगरेशन तैयार होने के बाद, आप स्क्रिप्ट कर सकते हैं।

"Prettier": "prettier - src / ** / * लिखें। Js"

उपरोक्त उदाहरण में, स्क्रिप्ट src / फ़ोल्डर में सभी .js फ़ाइलों के लिए दिखती है।
-लेखित अनुकूलित कोड फ़ाइलों को सहेजने की आवश्यकता को इंगित करता है।

स्क्रिप्ट निष्पादित करें:

यार्न प्रीटीयर



यदि आपको उदाहरण के साथ कोई समस्या है, तो यहां रिपॉजिटरी है जहां आप तैयार सब कुछ पा सकते हैं।

ESLint

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

जावास्क्रिप्ट पर लागू होने पर इसकी आवश्यकता क्यों है?

क्योंकि जावास्क्रिप्ट एक काफी स्वतंत्र भाषा है, डेवलपर्स अक्सर गलतियाँ करते हैं। ESLint आपको लिखित प्रोग्राम चलाने के बिना समस्याओं को खोजने में मदद करता है।

ESLint कैसे अपनी तरह का है?

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

अब दो शैली गाइड सबसे अधिक प्रासंगिक हैं:

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

मेरे लिए, मैं दूसरा विकल्प सुझाता हूं। वह बहुत लोकप्रिय है, आप उसके GitHub पर जाकर इसे सत्यापित कर सकते हैं।

सबसे पहले, चलिए हमारे पैकेज को अपडेट करें। 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" } } 

प्रत्येक विकल्प का क्या अर्थ है:

एस्लिंट : यह देशी कोड के साथ काम करने का मुख्य उपकरण है।
बैबल-एस्लिंट : उपयोगी यदि आप फ्लो या प्रायोगिक सुविधाओं के साथ काम करते हैं जो अभी तक ESLint द्वारा समर्थित नहीं हैं।
eslint-config-airbnb : यह पैकेज डेवलपर को Airbnb के ESLint कॉन्फ़िगरेशन के साथ प्रदान करता है।
eslint-plugin-babel: babel-eslint के लिए साथी प्लगइन।
अनुलग्‍नक-प्‍लग-प्रतिक्रिया: प्रतिक्रिया के लिए अनुकूलन करता है।
एस्लिंट-प्लगइन-आयात: ES2015 + (ES6 +) आयात / निर्यात सिंटैक्स के साथ काम करने की क्षमता प्रदान करता है।
एस्लिंट-प्लगइन- प्रीटीयर : प्रेटियर के साथ ESLint की बातचीत को सुव्यवस्थित करता है।

बुनियादी सामान खत्म होने के साथ, चलिए शुरू करते हैं। उदाहरण के लिए, एप्लिकेशन / फ़ोल्डर में .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', // Don't play nicely with Windows. 'arrow-parens': 'off', // Incompatible with prettier 'object-curly-newline': 'off', // Incompatible with prettier 'no-mixed-operators': 'off', // Incompatible with prettier 'arrow-body-style': 'off', // Not our taste? 'function-paren-newline': 'off', // Incompatible with prettier 'no-plusplus': 'off', 'space-before-function-paren': 0, // Incompatible with prettier 'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases 'no-console': 'error', // airbnb is using warn 'no-alert': 'error', // airbnb is using warn 'no-param-reassign': 'off', // Not our taste? "radix": "off", // parseInt, parseFloat radix turned off. Not my taste. 'react/require-default-props': 'off', // airbnb use error 'react/forbid-prop-types': 'off', // airbnb use error 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx 'prefer-destructuring': 'off', 'react/no-find-dom-node': 'off', // I don't know 'react/no-did-mount-set-state': 'off', 'react/no-unused-prop-types': 'off', // Is still buggy '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"] } }], // for nested label htmlFor error 'prettier/prettier': ['error'], }, }; 

एप्लिकेशन / फ़ोल्डर में .eslintignore फ़ाइल जोड़ें।

/.git
/.vscode
node_modules

.Eslintrc.js फ़ाइल क्या करती है?

आइए देखें:

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

env: पर्यावरण वैश्विक चर को परिभाषित करता है जो पहले से ही पूर्वनिर्धारित हैं। हमारे मामले में उपलब्ध वातावरण es6, एक ब्राउज़र और एक नोड हैं। ES6 मॉड्यूल को छोड़कर ECMAScript 6 को उपलब्ध कराएगा। ब्राउज़र विंडोज जैसे सभी वैश्विक चर जोड़ देगा। तदनुसार, नोड सभी वैश्विक नोड चर जोड़ देगा।

फैली हुई है: तार की सरणी - प्रत्येक अतिरिक्त कॉन्फ़िगरेशन पिछले वाले को बढ़ाता है। अभी हम एयरबीएनबी के साथ लाइनिंग नियमों का उपयोग कर रहे हैं जो कि जस्ट और एंजाइम तक विस्तारित होते हैं।

प्लगइन्स: ये मूल लाइनिंग नियम हैं जिनका हम उपयोग करना चाहते हैं। हम babel, import, jsx-a11y, रिएक्ट, प्रीटीयर और उन सभी चीजों के साथ काम करते हैं जो मैंने ऊपर निर्दिष्ट किया था।

पार्सर: ESLint डिफ़ॉल्ट रूप से एस्प्री का उपयोग करता है, लेकिन चूंकि हम बैबेल के साथ काम कर रहे हैं, इसलिए आपको बैबल-ईएसएलआईएनटी का उपयोग करने की आवश्यकता है।

parserOptions: जब हम एस्प्रेस के लिए डिफ़ॉल्ट पार्सर को babel-eslint में बदलते हैं, तो हमें parserOptions को स्पष्ट करना होगा।

नियम: किसी भी नियम को हम यहां बदल या बदल सकते हैं।

यदि सब कुछ स्पष्ट है, तो आइए .llintignore के बारे में बात करते हैं। यह विकल्प उन सभी रास्तों को इंगित करने में मदद करता है जिन्हें ESLint का उपयोग करके संसाधित करने की आवश्यकता नहीं है। मैं केवल तीन ऐसे रास्तों का उपयोग करता हूं:
/.it - ​​जब मैं अपनी गिट फ़ाइलों को प्रभावित नहीं करना चाहता
/.vscode, चूंकि मैं वीएस कोड के साथ काम करता हूं, और इस संपादक का अपना कॉन्फ़िगरेशन है, जिसे प्रत्येक प्रोजेक्ट के लिए निर्दिष्ट करने की आवश्यकता है और मैं इसमें शामिल नहीं होना चाहता।
नोड_मॉड्यूल्स - मैं या तो निर्भरता को नहीं छूता, इसलिए मैंने उन्हें सूची में जोड़ा।

यह सब है, चलो हमारे package.json के लिए नई गयी स्क्रिप्ट्स के बारे में बात करते हैं।

"लिंट": "एस्लिंट - डेबग src /"
"लिंट: राइट": "एस्लिंट - डिबग src / --fix"

$ यार्न लिंट - इस कमांड को चलाने के लिए, आप src / में अपनी सभी फाइलों की जांच करते हैं, जिसके परिणामस्वरूप आपको प्रत्येक फ़ाइल में समस्या वाले स्थानों के विवरण के साथ एक विस्तृत लॉग मिलता है, जहां त्रुटियां मिलेंगी, जिन्हें आप तब मैन्युअल रूप से शुरू कर सकते हैं और ठीक कर सकते हैं।



$ यार्न लिंट: लिखें - यह कमांड पिछले वाले के समान है। अंतर केवल इतना है कि यार्न के पास पहले से ही लिखित अनुमति है - कमांड कोड से उन्हें हटाकर त्रुटियों को ठीक करता है।

तो, ठीक है, अगर आप इस क्षण तक आयोजित किए गए हैं, तो सम्मान और प्रशंसा आपके लिए है।

कर्कश

ठीक है, यहाँ आप एक शाखा के लिए एक प्रतिबद्ध या धक्का कोड के दौरान कुछ क्रियाएं कर सकते हैं।

आपको बस हस्की स्थापित करना है:

यार्न जोड़ - देव कर्कश

इसके बाद, स्निपेट को पैकेज में जोड़ें। Json फ़ाइल:

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

अब हर बार एक कमिट या पुश के दौरान, स्निपेट एक निश्चित स्क्रिप्ट या कमांड का निष्पादन शुरू करेगा, उदाहरण के लिए, एक कोड फॉर्मेटिंग कमांड।

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

खराब कोड को आपकी गिट शाखा में जाने से रोकने में मदद करता है।

लिंटर-मंचन क्यों?

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

आपको केवल प्रोजेक्ट स्थापित करने की आवश्यकता है:

यार्न जोड़ - देव लिंट-मंचन

इसके बाद, इसे package.json फ़ाइल में जोड़ें:

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

तो आप एक प्रकार का वृक्ष चलाते हैं: लिखें, फिर इसे चरण क्षेत्र में जोड़ दें। कमांड .js और .jsx फ़ाइलों के लिए काम करता है, लेकिन आप चाहें तो अन्य फ़ाइलों के लिए भी ऐसा कर सकते हैं।

हस्की और लिंट-मंचन का संयोजन

हर बार जब आप अपना कोड बनाते हैं, तो लिंट-स्टेज्ड नामक एक स्क्रिप्ट चलाई जाती है। यह npm रन लिंट के निष्पादन को आरंभ करता है: लिखें, जो आपको कोड को जांचने और प्रारूपित करने की अनुमति देता है। फिर पहले से ही सत्यापित कोड चरण के चरण में आता है और प्रतिबद्ध निष्पादित होता है।

अंतिम 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 कमिट -m "कुछ वर्णनात्मक संदेश यहाँ"

कोड स्वचालित रूप से .eslintrc.js फ़ाइल से नियमों के आधार पर स्वरूपित किया जाएगा।

EditorConfig के बारे में बात करें

सबसे पहले ऐप / डायरेक्टरी में .editorconfig फाइल बनाएं। इसमें निम्न कोड डालें:

 # EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100 

यहां संपादकों की एक सूची दी गई है जो EditorCondig का समर्थन करते हैं । सूची में निम्नलिखित शामिल हैं - वेब तूफान, ऐप कोड, एटम, ग्रहण, ईमैक्स, बेबिट।

उपरोक्त कोड यह करता है:

• .Md और .js फ़ाइलों से व्हाट्सएप को स्ट्रिप करें।
• रिक्त स्थान के बजाय इंडेंटेशन शैली को निर्दिष्ट करता है।
• इंडेंट आकार को 2 पर सेट करता है।
• एक मानक के लिए लाइन के अंत की ओर जाता है।
• फ़ाइल के अंत में एक नई पंक्ति जोड़ता है।
• स्ट्रिंग की लंबाई 100 वर्णों तक निर्धारित करता है।

दरअसल, अब सब कुछ तैयार है। यदि आपको स्रोत कोड की आवश्यकता है, तो यह है ।

स्किलबॉक्स अनुशंसा करता है:

• ऑनलाइन कोर्स "प्रोफेशन फ्रंटेंड-डेवलपर"
• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।
• व्यावहारिक वार्षिक पाठ्यक्रम "पीएचपी-डेवलपर खरोंच से प्रो तक" ।