What's the Difference Between prettier-eslint, eslint-plugin-prettier, and eslint-config-prettier? Solving Prettier-ESLint Conflicts

Table of Contents#

1. Understanding Prettier and ESLint: Why Conflicts Happen
2. Tool 1: eslint-config-prettier – Disable Conflicting ESLint Rules
3. Tool 2: eslint-plugin-prettier – Run Prettier as an ESLint Rule
4. Tool 3: prettier-eslint – Format with Prettier, Then Fix with ESLint
5. Solving Conflicts: The Recommended Setup
6. Conclusion
7. References

Understanding Prettier and ESLint: Why Conflicts Happen#

Before diving into the tools, let’s clarify what ESLint and Prettier do—and why they sometimes clash.

ESLint: Code Quality + Some Formatting#

ESLint is a linter designed to enforce code quality rules. It checks for issues like:

• Unused variables (no-unused-vars).
• Undefined variables (no-undef).
• Code anti-patterns (e.g., no-console).

However, ESLint also includes formatting-related rules (e.g., indent, quotes, linebreak-style) that dictate style. These overlap with Prettier’s core purpose.

Prettier: Opinionated Code Formatter#

Prettier is a formatter that ignores code quality and focuses solely on style. It enforces consistent formatting by:

• Normalizing indentation (spaces vs. tabs).
• Standardizing quotes (single vs. double).
• Wrapping lines at a fixed length.

Prettier’s rules are opinionated and non-configurable (e.g., it won’t let you toggle between snake_case and camelCase), but it ensures teams avoid bikeshedding over style.

The Conflict#

If ESLint’s formatting rules (e.g., quotes: ["error", "single"]) contradict Prettier’s settings (e.g., Prettier configured to use double quotes), they’ll fight: Prettier formats code with double quotes, then ESLint flags it as an error.

To resolve this, we need tools to either:

1. Disable ESLint’s conflicting formatting rules.
2. Run Prettier as part of ESLint.
3. Combine Prettier and ESLint into a single workflow.

This is where eslint-config-prettier, eslint-plugin-prettier, and prettier-eslint come in.

Tool 1: eslint-config-prettier – Disable Conflicting ESLint Rules#

eslint-config-prettier is a ESLint configuration that turns off all ESLint rules that conflict with Prettier. It ensures ESLint doesn’t flag formatting choices made by Prettier.

How It Works#

• It’s not a plugin—it’s a set of rule overrides that disable ESLint’s formatting rules (e.g., indent, quotes).
• You “extend” it in your ESLint config to inherit these disables.

When to Use It#

Use eslint-config-prettier if:

• You want ESLint to focus on code quality, not formatting.
• You want Prettier to handle all formatting, without ESLint interference.

Setup Example#

Step 1: Install#

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

Step 2: Update ESLint Config#

In your .eslintrc (or .eslintrc.json), extend prettier last to ensure it overrides other rules:

{
  "extends": [
    "eslint:recommended", // Base ESLint rules
    "plugin:react/recommended", // Framework-specific rules (e.g., React)
    "prettier" // Disable conflicting ESLint rules (MUST COME LAST)
  ]
}

Now, ESLint will ignore formatting and only report code quality issues.

Tool 2: eslint-plugin-prettier – Run Prettier as an ESLint Rule#

eslint-plugin-prettier is an ESLint plugin that adds a Prettier formatting check as an ESLint rule. In other words:

Prettier’s formatting errors are reported as ESLint errors.

How It Works#

• It adds an ESLint rule called prettier/prettier, which runs Prettier on your code and flags formatting discrepancies as ESLint errors.
• You can auto-fix these errors with eslint --fix, just like any other ESLint rule.

Why Use It?#

• Unified workflow: Run ESLint once to catch both code quality issues and formatting issues.
• Editor integration: ESLint plugins in editors (e.g., VS Code’s ESLint extension) will highlight Prettier formatting issues in real time.

Critical Note: Pair with eslint-config-prettier#

eslint-plugin-prettier alone can cause conflicts. For example:

• Prettier formats code with double quotes.
• ESLint’s built-in quotes rule (enabled by default) flags double quotes as an error.

To fix this, always use eslint-plugin-prettier with eslint-config-prettier to disable ESLint’s conflicting formatting rules.

The "Recommended" Config#

The plugin provides a shortcut: "plugin:prettier/recommended". This single line:

1. Enables eslint-plugin-prettier.
2. Sets the prettier/prettier rule to "error".
3. Extends eslint-config-prettier to disable conflicts.

Setup Example#

Step 1: Install Dependencies#

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

Step 2: Update ESLint Config#

Use the recommended config for simplicity:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended" // Combines plugin + config (MUST COME LAST)
  ]
}

Now, running eslint . will:

• Report code quality issues (e.g., unused variables).
• Report Prettier formatting issues as prettier/prettier errors.
• Auto-fix both with eslint --fix.

Tool 3: prettier-eslint – Format with Prettier, Then Fix with ESLint#

prettier-eslint is a standalone tool (not an ESLint plugin/config) that:

1. Runs Prettier on your code first.
2. Passes the formatted code to ESLint and applies eslint --fix.

How It Works#

Think of it as a pipeline:

Your Code → [Prettier] → Formatted Code → [ESLint --fix] → Final Code

It’s useful if you want a single command to handle both formatting (Prettier) and ESLint auto-fixes.

When to Use It#

Use prettier-eslint if:

• You want to format with Prettier and apply ESLint fixes in one step.
• You prefer not to integrate Prettier into ESLint (e.g., avoiding ESLint plugin setup).

Setup Example#

Step 1: Install#

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

Step 2: Run It#

Format a file (or glob) with:

npx prettier-eslint --write "src/**/*.js"

This command:

1. Formats src/**/*.js with Prettier.
2. Runs eslint --fix on the result to resolve remaining ESLint issues (e.g., code quality fixes not handled by Prettier).

Key Difference from eslint-plugin-prettier#

• eslint-plugin-prettier runs Prettier as part of ESLint (via an ESLint rule).
• prettier-eslint is a separate tool that runs Prettier first, then ESLint.

Solving Conflicts: The Recommended Setup#

For most projects, the gold standard is to use eslint-config-prettier + eslint-plugin-prettier with the recommended config. Here’s why:

Why This Works#

• Unified tooling: ESLint handles both code quality and formatting via a single command (eslint --fix).
• Editor integration: Your editor’s ESLint plugin will auto-fix both code quality and formatting on save.
• No redundancy: eslint-config-prettier disables conflicting rules, so ESLint and Prettier don’t fight.

Step-by-Step Setup#

1. Install dependencies:

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

2. Configure ESLint with plugin:prettier/recommended:

   // .eslintrc.json
   {
     "extends": ["plugin:prettier/recommended"]
   }

3. Add a script to package.json:

   {
     "scripts": {
       "lint": "eslint .",
       "lint:fix": "eslint . --fix"
     }
   }

4. Run:

   npm run lint:fix # Formats with Prettier + fixes ESLint issues

Conclusion#

Let’s recap the tools:

The Verdict#

For 99% of projects, use eslint-plugin-prettier + eslint-config-prettier with plugin:prettier/recommended. This setup is simple, integrates with editors, and avoids conflicts.

Use prettier-eslint only if you need a standalone tool to handle the Prettier→ESLint pipeline outside of ESLint’s plugin system.

References#

• eslint-config-prettier
• eslint-plugin-prettier
• prettier-eslint
• Prettier Docs: Integrating with Linters
• ESLint Docs