Conflicting rules between Prettier and ESLint

What causes this

Prettier and ESLint both want to control your code formatting, and they disagree. ESLint has formatting rules (like indent, quotes, semi) that conflict with Prettier’s output. You save a file, Prettier formats it, then ESLint complains — or vice versa.

This is one of the most common DX annoyances in JavaScript projects. The solution is to let Prettier handle formatting and ESLint handle code quality — don’t let them overlap.

Fix 1: Use eslint-config-prettier (recommended)

This package disables all ESLint rules that conflict with Prettier:

npm install -D eslint-config-prettier

Add it as the last item in your ESLint config:

// eslint.config.js (flat config — ESLint 9+)
import prettier from 'eslint-config-prettier';

export default [
  // ... your other configs
  prettier, // must be last
];

For the older .eslintrc format:

{
  "extends": [
    "eslint:recommended",
    "prettier"
  ]
}

The key is that prettier must be last — it overrides conflicting rules from configs above it.

Fix 2: Remove formatting rules from ESLint

If you don’t want to add another package, manually disable the conflicting rules:

export default [
  {
    rules: {
      indent: 'off',
      quotes: 'off',
      semi: 'off',
      'comma-dangle': 'off',
      'arrow-parens': 'off',
      'max-len': 'off',
    },
  },
];

This is tedious — eslint-config-prettier does this automatically for 30+ rules.

Fix 3: Don’t use eslint-plugin-prettier

The old approach was to run Prettier as an ESLint rule via eslint-plugin-prettier. This works but is slow and creates confusing error messages:

// ❌ Old approach — avoid this
{
  "plugins": ["prettier"],
  "rules": { "prettier/prettier": "error" }
}

Instead, run them separately:

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

Fix 4: Configure your editor correctly

Make sure VS Code runs Prettier for formatting and ESLint for linting — not both for formatting:

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Fix 5: Check for conflicting Prettier configs

Make sure you don’t have multiple Prettier configs:

# Check for conflicting config files
ls -la .prettierrc* prettier.config.* .editorconfig

Prettier reads from .prettierrc, prettier.config.js, package.json ("prettier" key), and .editorconfig. Multiple configs can cause unexpected behavior.

How to prevent it

• Always install eslint-config-prettier and put it last in your ESLint extends
• Let Prettier own formatting, let ESLint own code quality — never overlap
• Run both tools in CI: prettier --check . and eslint .
• Use a shared config package for team consistency