ESLint + React नियम; Prettier एकीकरण
React नियमों के साथ ESLint सेट करें और एकसमान फ़ॉर्मैटिंग के लिए Prettier जोड़ें; लिंट और सुधार कमांड चलाएँ।
ESLint + React नियम; Prettier एकीकरण, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
ESLint और Prettier क्यों
लक्ष्य: ESLint से कोड की समस्याएँ पकड़ना और Prettier से शैली को सुसंगत रखना।
- ESLint: नियम, प्लगइन, सुधार
- Prettier: निर्धारित शैली वाला फ़ॉर्मैटर
- विकास और CI में चलाएँ
स्थापना और प्लगइन
- ESLint: eslint, @typescript-eslint/* (यदि TS हो), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- स्क्रिप्ट: "lint", "lint:fix", "format"
डेमो: लिंट आउटपुट और सुधार
ESLint समस्याएँ चिन्हित करता है; Prettier शैली सुधारता है। खराब और अच्छे उदाहरणों की तुलना करें और नमूना आउटपुट देखें।
<div id="root"></div>
डेमो: Prettier फ़ॉर्मैटिंग का अनुकरण
Prettier चलने का अनुकरण करने के लिए टॉगल करें; कोड की फ़ॉर्मैटिंग एकसमान हो जाती है।
<div id="root"></div>
सुझाव और पैकेज स्क्रिप्ट
- स्क्रिप्ट: "lint", "lint:fix", "format"
- शैली संबंधी नियमों को बंद करने के लिए eslint-config-prettier का उपयोग करें
- react-hooks नियम सक्षम करें: exhaustive-deps और rules-of-hooks
जानने योग्य React नियम
React नियम:
- react/jsx-key — सूचियों में कुंजी जोड़ें
- react-hooks/rules-of-hooks — हुक को केवल शीर्ष स्तर पर कॉल करें
- react-hooks/exhaustive-deps — इफ़ेक्ट की निर्भरताएँ सही रखें
ESLint और Prettier की भूमिकाएँ
पुनरावलोकन
पुनरावलोकन: ESLint समस्याएँ खोजता है; Prettier फ़ॉर्मैटिंग करता है। React प्लगइन और हुक नियम जोड़ें तथा लिंट, सुधार और फ़ॉर्मैटिंग के लिए स्क्रिप्ट जोड़ें।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “ESLint + React नियम; Prettier एकीकरण” पाठ निःशुल्क है?
हाँ—“ESLint + React नियम; Prettier एकीकरण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“ESLint + React नियम; Prettier एकीकरण” में मैं क्या सीखूँगा?
React नियमों के साथ ESLint सेट करें और एकसमान फ़ॉर्मैटिंग के लिए Prettier जोड़ें; लिंट और सुधार कमांड चलाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।
“ESLint + React नियम; Prettier एकीकरण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- ESLint + React नियम; Prettier एकीकरण
- फ़ाइल नामकरण, घटक सीमाएँ और प्रॉप नामकरण
- एनवायरनमेंट वेरिएबल और कॉन्फ़िगरेशन संगठन