ESLint + TypeScript प्लगइन्स: सेटअप, उदाहरण, ट्यूटोरियल |…

परिचय: ESLint + TypeScript प्लगइन्स क्या हैं और इनकी आवश्यकता क्यों है?

आधुनिक वेब डेवलपमेंट में, TypeScript बड़े और भरोसेमंद एप्लिकेशन बनाने के लिए एक मानक बन गया है। लेकिन TypeScript का सख्त कंपाइलर भी सभी लॉजिकल एरर, स्टाइल संबंधी असंगतियों या संभावित बग्स को नहीं पकड़ सकता जो कोड लिखते समय आ सकते हैं। यहाँ ESLint काम आता है — JavaScript के लिए एक शक्तिशाली लिंटर, जो विशेष प्लगइन्स की मदद से TypeScript के साथ काम करने के लिए अनुकूलित हो जाता है।

ESLint + TypeScript प्लगइन्स कोई अलग लाइब्रेरी (जैसे Lodash) नहीं है, बल्कि यह टूल्स का एक इकोसिस्टम है। मुख्य पैकेज eslint कोड विश्लेषण के लिए जिम्मेदार है, जबकि प्लगइन्स @typescript-eslint/eslint-plugin और @typescript-eslint/parser TypeScript सिंटैक्स के लिए सपोर्ट जोड़ते हैं और सैकड़ों TypeScript-विशिष्ट नियम प्रदान करते हैं।

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

शुरुआती चरण में एरर पकड़ना: लिंटर उन संभावित समस्याओं को ढूंढ सकता है जिन्हें TypeScript कंपाइलर अनदेखा कर देगा (जैसे अनुपयोगी वेरिएबल, प्रॉमिस का गलत उपयोग, टाइप से जुड़ी समस्याएं जो सिंटैक्स एरर नहीं हैं)।
एक समान कोड स्टाइल: डेवलपर्स की टीम में, लिंटर एक समान कोड-स्टाइल (इंडेंटेशन, कोट्स, सेमीकोलन) सुनिश्चित करता है, जिससे कोड अधिक पढ़ने योग्य और अनुमानित बनता है।
ऑटोमैटिक फिक्स: कई ESLint नियम ऑटो-फिक्स (--fix) को सपोर्ट करते हैं, जो कोड को स्वचालित रूप से फॉर्मेट करने और सामान्य एरर को ठीक करने में मदद करता है।
IDE के साथ इंटीग्रेशन: अधिकांश आधुनिक कोड एडिटर (VS Code, WebStorm) में ESLint के लिए बिल्ट-इन सपोर्ट होता है, जिससे कोड लिखते समय ही एरर और चेतावनियाँ दिखाई देती हैं।

pythonlib.ru पर हम सबसे उपयोगी गाइड प्रदान करने का प्रयास करते हैं। यह लेख ESLint को TypeScript के साथ सेटअप और उपयोग करने के लिए आपकी संपूर्ण संदर्भ मार्गदर्शिका होगी।

ESLint और TypeScript प्लगइन्स की इंस्टॉलेशन

इंस्टॉलेशन पैकेज मैनेजर npm (या yarn, pnpm) के माध्यम से की जाती है। मान लिया जाता है कि आपके पास पहले से package.json फ़ाइल वाला प्रोजेक्ट है और TypeScript (typescript) इंस्टॉल है।

अपने प्रोजेक्ट की रूट डायरेक्टरी में टर्मिनल में यह कमांड चलाएँ:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

हमने क्या इंस्टॉल किया, इसे समझते हैं:

eslint — लिंटर का मुख्य भाग।
@typescript-eslint/parser — पार्सर जो ESLint को TypeScript सिंटैक्स (जेनेरिक्स, डेकोरेटर, टाइप्स आदि सहित) समझने में सक्षम बनाता है।
@typescript-eslint/eslint-plugin — प्लगइन जिसमें TypeScript-विशिष्ट नियमों का सेट होता है (जैसे, मानक no-unused-vars के बजाय @typescript-eslint/no-unused-vars)।

अतिरिक्त (अनुशंसित):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

यह ESLint को Prettier (कोड फॉर्मेटर) के साथ इंटीग्रेट करने और उनके बीच टकराव से बचने में मदद करेगा।

त्वरित शुरुआत: कॉन्फ़िगरेशन और पहला रन

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

npx eslint --init

आपसे कुछ प्रश्न पूछे जाएँगे। निम्नलिखित चुनें:

आप ESLint का उपयोग कैसे करना चाहते हैं? — To check syntax, find problems, and enforce code style
आप किस मॉड्यूल फॉर्मेट का उपयोग कर रहे हैं? — JavaScript modules (import/export)
कौन सा फ्रेमवर्क? — None of these (या React/Vue/Angular, यदि उपयोग कर रहे हैं)