# Integrating ESLint and Prettier — ESLint and Prettier: Code Quality and Formatting

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

> Stop ESLint and Prettier from conflicting by adding eslint-config-prettier last in your flat config.

## The conflict problem

ESLint and Prettier can conflict when ESLint also checks formatting. `eslint-config-prettier` turns off ESLint rules that clash with Prettier. Run Prettier itself as a separate step.

## Conflict-free setup

Install eslint-config-prettier and put it last in your flat config array.

```bash
npm install --save-dev eslint-config-prettier

// eslint.config.js
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  // ...other configs
  prettier, // last: turns off conflicting formatting rules
];
```

Output:

```
eslint-config-prettier installed and configured
```

## Order matters

Always put `prettier` last in the config array so it can turn off conflicting rules from earlier entries.

Quick check

**Quiz:** Why install eslint-config-prettier?

- [ ] To make Prettier faster.
- [ ] To enable new ESLint rules.
- [ ] To make Prettier run first
- [x] To prevent ESLint and Prettier from conflicting over formatting.

*Answer:* To prevent ESLint and Prettier from conflicting over formatting.. eslint-config-prettier disables ESLint rules that conflict with Prettier, ensuring they work harmoniously.