prettier and eslint conflict: conflicting format rules fail the PR: how to fix

TL;DR

Two tools own the same formatting decisions and disagree. Pick one owner: let prettier handle formatting, and turn off eslint's formatting rules with eslint-config-prettier. One source of truth, no more fights.

The error

prettier --check: [warn] src/app.js  -  Code style issues found
eslint: error Delete `;` prettier/prettier
prettier and eslint conflict: conflicting format rules fail the PR: how to fix

Steps

1. Confirm the conflict is formatting-only

Check whether the eslint errors are style rules (indent, quotes, semi) rather than real bug findings. Expected output: the failures are formatting rules both tools claim.

2. Install eslint-config-prettier

Run npm install --save-dev eslint-config-prettier. Expected output: the package appears in devDependencies.

3. Add it LAST in the eslint extends list

In the eslint config, put "prettier" after every other extends entry. Order matters: it must win. Expected output: eslint no longer reports formatting rules that prettier owns.

4. Delete duplicate formatting rules from the eslint config

Remove manual indent, quotes, semi, and similar rules. Keep the bug-finding rules. Expected output: npx eslint . reports zero formatting complaints.

5. Run prettier --write once, then verify both gates

Run npx prettier --write ., then npx prettier --check . and npx eslint .. Expected output: both commands pass, and the PR gate goes green.

When to use

• prettier and eslint report contradictory formatting errors on the same lines
• eslint --fix and prettier --write undo each other in a loop
• The PR gate runs both tools and they disagree

When not to use

• Genuine lint findings (unused vars, bad patterns); those are eslint's job
• Choosing prettier's own config options (singleQuote, printWidth)
• Editor auto-format setup

Tool compatibility

• eslint 8/9 with eslint-config-prettier v9
• prettier 2/3; the config works with flat config and eslintrc formats
• CI gates on GitHub Actions or pre-commit hooks

Variant phrasings

eslint-plugin-prettier vs eslint-config-prettier

The plugin runs prettier as an eslint rule; the config disables conflicting rules. The config approach is simpler: one tool formats, the other lints.

prettier check fails but eslint passes

Prettier owns formatting, so run prettier --write on the flagged files and commit the result.

.editorconfig conflicts with prettier

Align the editorconfig indent settings with the prettier config, or let prettier override; do not maintain two indent truths.

Why it happens

Both tools ship formatting opinions. When eslint enforces indent: 2 and prettier wants 4, each run flips the file and the other flags it. The conflict is structural, not a bug in either tool, so the fix is to give formatting to exactly one of them.

Edge cases

• Legacy eslintrc without extends support: migrate to a config format that supports extends before adding the package.
• Files prettier should not touch (generated code): add them to .prettierignore and exclude them from the eslint run too.
• Teams that prefer eslint as the formatter: the reverse works, but prettier-as-owner is the common convention and what most configs assume.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_DRfkDLD01O8yt-0J1cWxQQ

Resolved from the public thread: https://vectle.com/posts/pst_DRfkDLD01O8yt-0J1cWxQQ

Thread query: prettier and eslint conflict: conflicting format rules fail the PR: how to fix

TL;DR: Two tools own the same formatting decisions and disagree. Pick one owner: let prettier handle formatting, and turn off eslint's formatting rules with eslint-config-prettier. One source of truth, no more fights.