How to Fix Common ESLint and Prettier Configuration Conflicts

When configuring a frontend project, developers install ESLint (to detect code quality bugs) and Prettier (to format code style). However, without proper integration, these tools fight a formatting tug-of-war.

You press Save in your IDE, Prettier formats double quotes to single quotes, and then ESLint overrides it back, throwing red error squiggles.

This formatting conflict degrades the developer experience.

In this guide, we will analyze why ESLint and Prettier conflict, explain the difference between code quality and formatting rules, and configure a clean integration.

Understanding the Roles

To fix the conflicts, you must define what each tool is designed to do:

1. ESLint (Code Quality): It analyzes your Abstract Syntax Tree (AST) to detect logical errors and bad practices. Rules like no-unused-vars (flagging variables that are never read) or no-undef (detecting reference errors) require ESLint.
2. Prettier (Code Formatting): It parses your code and rewrites it according to a single consistent style (enforcing line lengths, semi-colons, brackets spacing, and quotes).

The conflict arises because ESLint also contains formatting rules (like semi, quotes, and indent). If ESLint is configured to mandate double quotes while Prettier is configured to mandate single quotes, they overwrite each other continuously.

The Solution: eslint-config-prettier

The industry standard way to resolve this conflict is to disable all formatting rules inside ESLint, letting Prettier handle code style exclusively, while ESLint focuses on code quality errors.

We achieve this using eslint-config-prettier.

Step 1: Install the Package

Run the following package install command in your project root directory:

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

Step 2: Configure ESLint

How you apply this depends on your ESLint configuration version.

Option A: Modern ESLint (v9+ Flat Config: eslint.config.js)

In modern ESLint setups, import the configuration and append it at the very end of your config array to override previous rules:

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

export default [
  js.configs.recommended,
  
  // Custom rules...
  {
    rules: {
      'no-unused-vars': 'error',
    }
  },

  // MUST BE AT THE END: Disables all styling rules conflicting with Prettier
  eslintConfigPrettier,
];

Option B: Legacy ESLint (.eslintrc.json)

If your project utilizes legacy configuration files, append prettier at the end of the extends array:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier" 
  ],
  "rules": {
    "no-unused-vars": "error"
  }
}

• Note: The "prettier" string must be the last item in the array. This guarantees it overrides formatting properties imported by preceding rulesets (like Airbnb or standard presets).

Avoid the Legacy Trap: eslint-plugin-prettier

In older tutorials, you will see instructions recommending eslint-plugin-prettier. This plugin runs Prettier inside the ESLint execution loop, throwing ESLint warnings for minor formatting gaps (like extra spaces).

Avoid this setup:

• It slows down editor save times significantly.
• It fills your IDE error panel with warning lines for style gaps that Prettier resolves automatically on save anyway.
• Enforcing formatting as compile-time lint errors is an anti-pattern.

Configure VS Code Auto-Save Settings

To make formatting seamless, configure your editor to execute Prettier on file saves, and let ESLint fix code quality issues. Add this block to your .vscode/settings.json:

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

With this configuration:

1. When you save, Prettier runs first, formatting the code file layout.
2. ESLint runs second, fixing easy quality errors (like auto-removing unused imports) and highlighting real logical bugs.

Conclusion

ESLint and Prettier conflicts happen when both tools attempt to control code style. By installing eslint-config-prettier to turn off ESLint's formatting rules, avoiding heavy plugins like eslint-plugin-prettier, and setting up VS Code to run Prettier formatting alongside ESLint quick-fixes, you create a fast, distraction-free environment.