Prettier और ESLint सेटअप
स्वचालित फ़ॉर्मैटिंग के लिए Prettier और त्रुटियाँ पकड़ने के लिए ESLint जोड़ें, दोनों उपकरण कॉन्फ़िगर करें और उन्हें सेव-पर-फ़ॉर्मैट कार्यप्रवाह में एकीकृत करें।
Prettier और ESLint सेटअप, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
कोड शैली को स्वचालित क्यों करें?
मैन्युअल कोड प्रारूपण पर बहस टीम का समय बर्बाद करती है। प्रीटियर कोड को एकसमान शैली में स्वतः प्रारूपित करता है। ईएसलिंट बग पकड़ता है और सर्वोत्तम प्रथाएँ लागू करता है। साथ मिलकर ये कोड समीक्षा की पूरी श्रेणियों की टिप्पणियाँ समाप्त कर देते हैं।
प्रीटियर इंस्टॉल करना
प्रीटियर को विकास निर्भरता के रूप में इंस्टॉल करें, एक config फ़ाइल बनाएँ और package.json में प्रारूप स्क्रिप्ट जोड़ें। प्रीटियर को काम करने के लिए किसी config की आवश्यकता नहीं होती — डिफ़ॉल्ट मान उचित होते हैं — लेकिन आप उन्हें अनुकूलित कर सकते हैं।
npm install --save-dev prettier
# .prettierrc (optional config)
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}वीएसकोड में प्रीटियर एकीकरण
प्रीटियर — कोड प्रारूपक एक्सटेंशन इंस्टॉल करें। फिर इसे डिफ़ॉल्ट प्रारूपक के रूप में सेट करें और सेटिंग्स में formatOnSave सक्षम करें। अब हर बार फ़ाइल सेव करने पर प्रीटियर चलेगा।
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}ईएसलिंट इंस्टॉल करना
ईएसलिंट इंस्टॉल करें और इसे npm init @eslint/config से आरंभ करें। यह विज़ार्ड आपका परिवेश (ब्राउज़र/नोड), मॉड्यूल प्रणाली और TypeScript समर्थन चुनने में सहायता करता है। यह eslint.config.js फ़ाइल बनाता है।
npm install --save-dev eslint
npx eslint --init
# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.jsईएसलिंट config का उदाहरण
ब्राउज़र JavaScript परियोजना के लिए एक सरल ईएसलिंट सपाट config। नियम 'त्रुटि', 'चेतावनी' या 'बंद' हो सकते हैं। मजबूत आधार के लिए @eslint/js अनुशंसित जैसे साझा config का विस्तार करें।
// eslint.config.js
import js from '@eslint/js';
export default [
js.configs.recommended,
{
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
'eqeqeq': 'error'
}
}
];TypeScript ईएसलिंट
TypeScript परियोजनाओं में TypeScript-विशिष्ट समस्याएँ पकड़ने के लिए typescript-eslint जोड़ें: असुरक्षित any का उपयोग, अनुपस्थित वापसी प्रकार और प्रॉमिस का गलत उपयोग।
npm install --save-dev typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
...tseslint.configs.recommended
);प्रीटियर और ईएसलिंट साथ-साथ
ईएसलिंट में कुछ प्रारूपण नियम हैं जो प्रीटियर से टकराते हैं। उन्हें बंद करने के लिए eslint-config-prettier का उपयोग करें, ताकि प्रीटियर सभी प्रारूपण सँभाले और ईएसलिंट केवल कोड गुणवत्ता सँभाले।
npm install --save-dev eslint-config-prettier
// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
js.configs.recommended,
prettierConfig // disables ESLint formatting rules
];.eslintignore और .prettierignore
टूल को बताएँ कि किन फ़ाइलों को छोड़ना है। .eslintignore फ़ाइल gitignore सिंटैक्स का उपयोग करती है। आम तौर पर आप node_modules, dist और जनरेट की गई फ़ाइलों को अनदेखा करना चाहेंगे।
# .eslintignore
node_modules
dist
.next
coverageलिंटिंग के लिए एनपीएम स्क्रिप्ट
package.json में दोष-जाँच और प्रारूपण स्क्रिप्ट जोड़ें, ताकि CI और सहकर्मी उन्हें एकसमान ढंग से चला सकें।
{
"scripts": {
"lint": "eslint src --ext .js,.ts,.tsx",
"lint:fix": "eslint src --fix",
"format": "prettier --write src",
"format:check": "prettier --check src"
}
}कमिट से पहले के हुक के लिए lint-staged और husky
हर Git कमिट से पहले केवल स्टेज की गई फ़ाइलों की स्वतः दोष-जाँच और प्रारूपण करने के लिए husky + lint-staged का उपयोग करें। इससे बिना प्रारूपित या खराब कोड रिपॉज़िटरी तक पहुँचने से रुकता है।
npm install --save-dev husky lint-staged
npx husky init
# package.json:
"lint-staged": {
"*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,json,md}": "prettier --write"
}आधारभूत एकरूपता के लिए EditorConfig
एक .editorconfig फ़ाइल प्लगइन की परवाह किए बिना सभी संपादकों और IDE में संपादक की मूल सेटिंग्स (इंडेंट शैली, पंक्ति अंत) लागू करती है। इसे प्रीटियर के साथ जोड़ें।
# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = trueत्वरित जाँच
प्रीटियर का उपयोग करने वाले ईएसलिंट config में eslint-config-prettier क्यों जोड़ा जाना चाहिए?
पुनरावलोकन: प्रीटियर और ईएसलिंट
वीएसकोड एक्सटेंशन के माध्यम से प्रीटियर सेव करते समय कोड को स्वतः प्रारूपित करता है। ईएसलिंट बग और शैली के उल्लंघन पकड़ता है। टकराव से बचने के लिए eslint-config-prettier का उपयोग करें। कमिट से पहले नियम लागू करने के लिए lint-staged + husky जोड़ें। एकसमान टूलिंग प्रारूपण पर बहस समाप्त करती है और कोड भेजे जाने से पहले बग पकड़ती है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Prettier और ESLint सेटअप” पाठ निःशुल्क है?
हाँ—“Prettier और ESLint सेटअप” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Prettier और ESLint सेटअप” में मैं क्या सीखूँगा?
स्वचालित फ़ॉर्मैटिंग के लिए Prettier और त्रुटियाँ पकड़ने के लिए ESLint जोड़ें, दोनों उपकरण कॉन्फ़िगर करें और उन्हें सेव-पर-फ़ॉर्मैट कार्यप्रवाह में एकीकृत करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“Prettier और ESLint सेटअप” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Chrome DevTools: Elements, Console, Network
- VSCode: एक्सटेंशन, Emmet, शॉर्टकट
- Prettier और ESLint सेटअप
- ब्राउज़र संगतता और caniuse.com