Integrating ESLint and Prettier

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.

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

Quick check: Why install eslint-config-prettier?

• To make Prettier faster.
• To enable new ESLint rules.
• To make Prettier run first
• To prevent ESLint and Prettier from conflicting over formatting.