# Real-world Project Examples — ESLint and Prettier: Code Quality and Formatting

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

> See complete ESLint flat config and Prettier setups for React and Node.js projects.

## Reference implementations

React projects, Node.js backends, TypeScript monorepos—each has unique linting needs. Review examples to adapt for your context.

## React project setup

A complete ESLint and Prettier setup for a modern React project.

```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
```

## Adapt, don't copy

Use examples as starting points, but customize them for your project's specific needs. Your team's standards matter more than following templates.

Quick check

**Quiz:** Should you use example configs as-is?

- [ ] Yes, always copy them exactly
- [x] No, adapt them to your project
- [ ] Only on Fridays
- [ ] It never matters

*Answer:* No, adapt them to your project. Examples are starting points. Your team's standards and project-specific needs should drive configuration choices.