# Real-world प्रोजेक्ट उदाहरण — ESLint और Prettier: Code Quality और Formatting

Source: https://www.skillbyai.com/hi/eslint-prettier/eslint-prettier-22

> React और Node.js projects के लिए पूर्ण ESLint flat config और Prettier setups देखें।

## Reference implementations

React projects, Node.js backends, TypeScript monorepos—प्रत्येक के unique linting needs हैं। अपने context के लिए adapt करने के लिए उदाहरणों को review करें।

## React project setup

एक modern React project के लिए complete ESLint और Prettier setup।

```json
// eslint.config.js for a React project
import js from '@eslint/js';
import globals from 'globals';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  react.configs.flat.recommended,
  react.configs.flat['jsx-runtime'],
  {
    files: ['**/*.{js,jsx}'],
    plugins: { 'react-hooks': reactHooks },
    languageOptions: { globals: globals.browser },
    settings: { react: { version: 'detect' } },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'no-unused-vars': 'warn',
    },
  },
  prettier,
];

// .prettierrc
{ "singleQuote": true, "trailingComma": "es5", "semi": true }
```

Output:

```
React project ready for linting and formatting
```

## Copy न करें, adapt करें

उदाहरणों को starting points के रूप में उपयोग करें, लेकिन अपनी project की specific needs के लिए उन्हें customize करें। आपकी टीम के standards templates को follow करने से अधिक मायने रखते हैं।

त्वरित जाँच

**Quiz:** क्या उदाहरण configs को जस का तस उपयोग करना चाहिए?

- [ ] हाँ, हमेशा बिल्कुल वैसे ही
- [x] नहीं, उन्हें अपने project के अनुसार ढालें
- [ ] केवल शुक्रवार को
- [ ] इससे कभी फर्क नहीं पड़ता

*Answer:* नहीं, उन्हें अपने project के अनुसार ढालें. उदाहरण starting points हैं। आपकी टीम के standards और project-specific needs configuration choices को drive करने चाहिए।