Lesson 5 / 25

Integrating ESLint and Prettier

Make ESLint and Prettier work together without conflicts.

The conflict problem

ESLint and Prettier can conflict: ESLint checks quotes, Prettier enforces them differently. Use eslint-config-prettier to disable ESLint's formatting rules.

Conflict-free setup

Install eslint-config-prettier and add it to your extends list last.

npm install --save-dev eslint-config-prettier
# Then in .eslintrc.json, add to extends array:
"extends": ["eslint:recommended", "prettier"]

Output:

eslint-config-prettier installed and configured

Order matters

Always put 'prettier' last in your extends array. This ensures Prettier config overrides ESLint formatting rules.

Quick check

Quick check: Why install eslint-config-prettier?

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

Answer

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