2026 में क्लीन कोडबेस के लिए ESLint और Prettier कैसे सेट करें

ईएसलिंट कोड समस्याओं को पकड़ता है और नियमों को लागू करता है; सुन्दर स्वचालित रूप से आपके कोड को लगातार प्रारूपित करता है। साथ में वे एक कोडबेस को साफ, सुसंगत और बग-मुक्त रखते हैं – टीमों के लिए आवश्यक और एकल के लिए भी सार्थक। यह मार्गदर्शिका उन्हें सही ढंग से स्थापित करती है और उनके बीच आम विवादों का समाधान करती है।

प्रत्येक उपकरण क्या करता है

प्रभाग: ESLint कोड गुणवत्ता (तर्क, संभावित बग) को संभालता है, प्रिटियर फ़ॉर्मेटिंग (यह कैसा दिखता है) को संभालता है। प्रीटीयर के पास फ़ॉर्मेटिंग होने के कारण, दोनों का उपयोग करने से टकराव से बचा जा सकता है।

इंस्टालेशन

# Install both plus the integration packages
npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier
# eslint-config-prettier turns off ESLint rules that conflict with Prettier

ESLint कॉन्फिगरेशन (फ्लैट कॉन्फिग, 2026)

// eslint.config.js (flat config - the modern standard)
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2025,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'prefer-const': 'error',
      'eqeqeq': 'error',   // require === over ==
    },
  },
  prettier,   // MUST be last - disables ESLint rules that conflict with Prettier
];

सुंदर विन्यास

// .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

# .prettierignore - files Prettier should skip
node_modules
dist
build
*.min.js
coverage

कुंजी: प्रीटीयर को फ़ॉर्मेटिंग का स्वामी बनने दें

क्लासिक गलती यह है कि ESLint और Prettier दोनों कोड को प्रारूपित करने का प्रयास करते हैं – वे उद्धरण, अर्धविराम और रिक्ति पर संघर्ष करते हैं। समाधान हैeslint-config-prettier, जो सभी ESLint फ़ॉर्मेटिंग नियमों को अक्षम कर देता है इसलिए Prettier फ़ॉर्मेटिंग को संभालता है और ESLint कोड गुणवत्ता को संभालता है। इसे अपने ESLint कॉन्फ़िगरेशन में अंतिम रूप से जोड़ें ताकि यह परस्पर विरोधी नियमों को ओवरराइड कर दे।

package.json स्क्रिप्ट्स

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

# Run them
npm run lint          # find problems
npm run lint:fix      # auto-fix fixable problems
npm run format        # format all files with Prettier
npm run format:check  # check formatting without changing (for CI)

सहेजें पर प्रारूप (वीएस कोड)

// .vscode/settings.json - commit this so the whole team gets it
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

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

हस्की और लिंट-स्टेज्ड के साथ प्रतिबद्धता लागू करें

npm install --save-dev husky lint-staged
npx husky init

// package.json - run linting/formatting only on staged files
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": "prettier --write"
  }
}

# .husky/pre-commit
npx lint-staged

अब प्रत्येक कमिट स्वचालित रूप से चरणबद्ध फ़ाइलों को लिंट और प्रारूपित करती है – कोई भी अस्वरूपित या लिंट-फ़ेलिंग कोड रेपो में प्रवेश नहीं करता है।

टाइपस्क्रिप्ट सेटअप

npm install --save-dev typescript-eslint

// eslint.config.js with TypeScript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  prettier,   // last
];

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: क्या मुझे ESLint और Prettier दोनों की आवश्यकता है?
उ: वे अलग-अलग उद्देश्यों को पूरा करते हैं – कोड गुणवत्ता/बग के लिए ईएसलिंट, फ़ॉर्मेटिंग के लिए प्रीटियर। दोनों का उपयोग करने से आपको साफ़, सुसंगत, बग पकड़ने वाला कोड मिलता है। आप अकेले ESLint का उपयोग कर सकते हैं, लेकिन Prettier का स्वचालित फ़ॉर्मेटिंग बहुत समय बचाता है और फ़ॉर्मेटिंग संबंधी बहसों को ख़त्म कर देता है।

प्रश्न: ईएसलिंट और प्रीटियर में टकराव क्यों होता है?
उ: दोनों स्वरूपण नियम (उद्धरण, अर्धविराम, रिक्ति) लागू कर सकते हैं, और वे असहमत हैं। समाधान हैeslint-config-prettier, जो ESLint के फ़ॉर्मेटिंग नियमों को अक्षम कर देता है इसलिए Prettier फ़ॉर्मेटिंग का स्वामी है और ESLint कोड गुणवत्ता का स्वामी है। इसे अपने ESLint कॉन्फ़िगरेशन में अंतिम रूप से जोड़ें।

प्रश्न: क्या मुझे ESLint (eslint-plugin-prettier) के माध्यम से Prettier चलाना चाहिए?
उ: आम तौर पर नहीं – ESLint नियम के रूप में Prettier चलाना धीमा है और फ़ॉर्मेटिंग के लिए लाल स्क्विगल्स जोड़ता है। अनुशंसित सेटअप उन्हें अलग से चला रहा है: फ़ॉर्मेटिंग के लिए प्रीटियर (सेव पर फॉर्मेट), गुणवत्ता के लिए ईएसलिंट, टकराव को रोकने के लिए eslint-config-prettier के साथ।

प्रश्न: मैं इसे अपनी टीम में कैसे लागू करूं?
ए: कॉन्फिग फाइल्स (eslint.config.js, .prettierrc, .vscode/settings.json) को कमिट करें और हस्की + लिंट-स्टेज को सेट करें ताकि ऑटो-फॉर्मेट हो। जोड़ेंformat:check औरlint CI में इसलिए बिना स्वरूपित या विफल कोड मर्ज नहीं किया जा सकता। यह अलग-अलग संपादक सेटअप की परवाह किए बिना निरंतरता सुनिश्चित करता है।

प्रश्न: फ़्लैट कॉन्फ़िगरेशन क्या है और क्या मुझे इसका उपयोग करना चाहिए?
उ: फ्लैट कॉन्फिगरेशन (eslint.config.js) आधुनिक ESLint कॉन्फिगरेशन प्रारूप है जिसने पुराने .eslintrc को प्रतिस्थापित कर दिया है। यह डिफ़ॉल्ट है और 2026 में अनुशंसित है – साफ़, अधिक स्पष्ट, और संरचना के लिए बेहतर। नई परियोजनाओं के लिए इसका उपयोग करें.

निष्कर्ष

ESLint और Prettier मिलकर आपके कोडबेस को साफ़ और सुसंगत रखते हैं। सेटअप:दोनों प्लस स्थापित करेंeslint-config-prettier, प्रिटियर को फ़ॉर्मेटिंग और ESLint को कोड गुणवत्ता का स्वामी बनने दें, टकराव को रोकने के लिए अंतिम में eslint-config-prettier जोड़ें, VS कोड में फ़ॉर्मेट-ऑन-सेव को सक्षम करें, और हस्की और लिंट-स्टेज्ड के साथ कमिट लागू करें. मुख्य अंतर्दृष्टि चिंताओं को अलग करना है – प्रीटियर प्रारूप, ईएसलिंट समस्याओं को पकड़ता है – और एस्लिंट-कॉन्फिग-प्रीटियर का उपयोग करना ताकि वे लड़ें नहीं। एक बार सेट हो जाने पर, आपका कोड स्वचालित रूप से सुसंगत होता है और शून्य मैन्युअल प्रयास के साथ लिंट-क्लीन हो जाता है, फ़ॉर्मेटिंग संबंधी बहसें समाप्त हो जाती हैं और शिप होने से पहले बग पकड़ लेते हैं। यह एक छोटा सेटअप निवेश है जो आपके द्वारा लिखी गई प्रत्येक फ़ाइल पर भुगतान करता है।