ESLint 21 🛡️ Prettier Conflict Resolution — eslint-config-prettier - KandZ

⏱️ Estimated read: 10 min | |

The eslint-config-prettier package is not a formatter and does not run Prettier. Its job is narrower and more specific: it disables the ESLint rules that would conflict with Prettier’s formatting decisions . When both tools are enabled without this configuration, ESLint reports style violations that Prettier has already resolved differently, and the developer sees errors that cannot be fixed because fixing them for one tool breaks the other. The package removes ESLint’s side of the conflict by turning off the formatting rules, leaving the code-quality rules—no-unused-vars, eqeqeq, no-undef—untouched.

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

The placement rule is the entire mechanism. In flat config (ESLint 9+), the eslintConfigPrettier import from eslint-config-prettier/flat must be the last element in the exported array . In legacy .eslintrc config, the shareable config name is "prettier" (not "eslint-config-prettier"), and it must be the last string in the extends array . If another config object or shareable config enables a formatting rule after this package has disabled it, the conflict returns and the errors reappear.

Key point: eslint-config-prettier disables ESLint’s formatting rules so that Prettier owns formatting and ESLint owns correctness. It must be placed last in the configuration. It does not format files, does not replace the Prettier CLI, and does not disable code-quality rules.

Why the package exists

The overlapping responsibility problem. ESLint accumulated formatting rules—indent, quotes, semi, comma-dangle—that duplicate Prettier’s work. When both tools are active, they fight over the same lines of code. Prettier formats a line one way, ESLint reports it as an error, and eslint --fix reformats it another way. The package resolves the fight by disabling ESLint’s formatting rules, so the two tools no longer overlap .

The placement problem. The package only works if it is placed after every other config that enables formatting rules. ESLint’s configuration resolution is order-dependent: later configs override earlier ones. If the package is placed before a shared config that enables indent, the shared config’s rule wins and the conflict returns . The package’s documentation states this explicitly: put it last.

The special rules. A small number of rules can be used with Prettier under specific conditions. no-tabs works if allowIndentationTabs: true is set. quotes works if the singleQuote option matches Prettier’s configuration and avoidEscape is enabled. These rules are disabled by default, but the CLI helper validates the options if a developer chooses to re-enable them .

The trade-off. The package disables formatting rules, which means ESLint no longer reports style violations. A project that relied on ESLint to enforce a specific indentation style loses that enforcement unless Prettier is configured with the same style. The project must run Prettier as a separate step, either through a script or an editor integration, or the formatting rules are not enforced at all .

a. Configuring the package in flat config

ESLint 9+ uses flat config. The eslint-config-prettier/flat import is the correct entry point, and it must be placed at the end of the exported array.

// eslint.config.mjs — flat config with eslint-config-prettier
import { defineConfig } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default defineConfig([
  {
    files: ["**/*.js"],
    rules: {
      // Code-quality rules stay enabled.
      // These do not conflict with Prettier.
      "no-unused-vars": "error",
      eqeqeq: "error",
    },
  },
  // eslint-config-prettier must be last.
  // It disables formatting rules enabled by earlier configs.
  eslintConfigPrettier,
]);

The defineConfig helper is optional but recommended. The critical detail is the position: eslintConfigPrettier is the last element. If a later config object enables a formatting rule after it, that rule wins and the conflict returns .

// eslint.config.mjs — a broken configuration
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default [
  eslintConfigPrettier,
  {
    // ❌ This config re-enables a formatting rule
    // AFTER eslint-config-prettier disabled it.
    rules: { indent: ["error", 2] },
  },
];

The second configuration object overrides the indent rule that eslint-config-prettier disabled. The rule is active again, and it will conflict with Prettier’s indentation. The fix is to move eslintConfigPrettier to the end of the array .

b. Configuring the package in legacy config

Legacy .eslintrc configuration uses the extends array. The correct shareable-config name is "prettier", not "eslint-config-prettier".

// .eslintrc.json — legacy config with eslint-config-prettier
{
  "extends": [
    "eslint:recommended",
    // "prettier" must be last in the extends array.
    // It disables formatting rules from eslint:recommended
    // and any other config listed before it.
    "prettier"
  ],
  "rules": {
    "no-unused-vars": "error",
    "eqeqeq": "error"
  }
}

The legacy syntax is shorter, but the placement rule is the same. If another shareable config is added after "prettier", the formatting rules from that config are active and the conflicts return .

Complete Example Session

// ============================================
// PART 1: THE INSTALLATION
// ============================================

// npm install --save-dev eslint prettier eslint-config-prettier
//
// The package is a config, not a plugin.
// It has no runtime dependencies and no API.
// It is consumed by ESLint's configuration system.

// ============================================
// PART 2: THE FLAT CONFIG
// ============================================

// eslint.config.mjs
import { defineConfig } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default defineConfig([
  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    rules: {
      // Code-quality rules.
      // These do not conflict with Prettier.
      "no-unused-vars": "error",
      "no-undef": "error",
      eqeqeq: "error",
    },
  },
  // eslint-config-prettier is last.
  // It disables indent, quotes, semi, comma-dangle, etc.
  eslintConfigPrettier,
]);

// ============================================
// PART 3: THE LEGACY CONFIG
// ============================================

// .eslintrc.json
// {
//   "extends": ["eslint:recommended", "prettier"],
//   "rules": {
//     "no-unused-vars": "error",
//     "eqeqeq": "error"
//   }
// }

// ============================================
// PART 4: THE CONFLICTING RULE (BEFORE)
// ============================================

// Without eslint-config-prettier:
// ESLint enables indent, quotes, semi.
// Prettier formats the code differently.
// The developer sees an error that cannot be fixed.

// src/app.js — before eslint-config-prettier
const greeting = "hello";
// ESLint: quotes error (single quotes required)
// Prettier: formats with double quotes (default)
// The two tools disagree.

// ============================================
// PART 5: THE CONFLICTING RULE (AFTER)
// ============================================

// With eslint-config-prettier:
// ESLint's quotes rule is disabled.
// Prettier owns the quote style.
// ESLint reports only code-quality issues.

// src/app.js — after eslint-config-prettier
const greeting = "hello";
// ESLint: no formatting error.
// Prettier: formats with double quotes.
// The tools agree because one is silent.

// ============================================
// PART 6: THE CLI HELPER
// ============================================

// The package includes a CLI helper that reports
// any rules that still conflict with Prettier.
//
// npx eslint-config-prettier src/index.js
//
// Exit codes:
// 0: no problems
// 1: unexpected error
// 2: conflicting rules found

// ============================================
// PART 7: THE SPECIAL RULES
// ============================================

// Some rules can be re-enabled with specific options.
// The CLI helper validates the options.
//
// Example: no-tabs with allowIndentationTabs
// "no-tabs": ["error", { "allowIndentationTabs": true }]
//
// This rule works with Prettier if Prettier handles indentation
// and the rule handles tabs elsewhere in the file.

// ============================================
// PART 8: THE SEPARATE TOOLS PATTERN
// ============================================

// eslint-config-prettier does not run Prettier.
// The project must run Prettier separately.
//
// package.json
// {
//   "scripts": {
//     "lint": "eslint .",
//     "format": "prettier --write ."
//   }
// }
//
// Run both. The lint command reports code-quality issues.
// The format command reformats the code.
// eslint-config-prettier keeps them from conflicting.

// ============================================
// PART 9: THE ESLINT-PLUGIN-PRETTIER ALTERNATIVE
// ============================================

// A different integration pattern runs Prettier inside ESLint.
// This uses eslint-plugin-prettier, which reports formatting
// differences as ESLint errors.
//
// The recommended config for eslint-plugin-prettier
// includes eslint-config-prettier automatically.
//
// import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
// export default [
//   // ... other config ...
//   eslintPluginPrettierRecommended, // last
// ];
//
// This pattern is optional.
// The separate-tools pattern is simpler and faster.

// ============================================
// PART 10: THE VERIFICATION
// ============================================

// [ ] eslint-config-prettier is installed.
// [ ] The config is placed last in the ESLint configuration.
// [ ] The CLI helper reports no conflicts.
// [ ] Prettier runs as a separate step (or via the plugin).
// [ ] Code-quality rules are still enabled in ESLint.

The ten parts covered the installation, the flat config, the legacy config, the conflict before and after, the CLI helper, the special rules, the separate-tools pattern, the plugin alternative, and the verification checklist. The through-line is that eslint-config-prettier is a positioning fix, not a formatting tool.

Quick Reference

Installation

Command	Purpose
`npm install -D eslint prettier eslint-config-prettier`	Install the config alongside ESLint and Prettier

Configuration placement

Config format	Import / extend	Position
Flat config	`import eslintConfigPrettier from "eslint-config-prettier/flat"`	Last in the exported array
Legacy config	`"prettier"` in `extends`	Last in the `extends` array

The CLI helper

Command	Exit code 2
`npx eslint-config-prettier src/index.js`	Conflicting rules found

Related packages

Package	Purpose
`eslint-config-prettier`	Disables conflicting rules
`eslint-plugin-prettier`	Runs Prettier inside ESLint
`eslint-plugin-prettier/recommended`	Includes both

Best Practices

✅ Do This:

// Place eslint-config-prettier last in flat config
export default [ /* rules */, eslintConfigPrettier];              // ✅

// Place "prettier" last in legacy extends
"extends": ["eslint:recommended", "prettier"]                    // ✅

// Run Prettier as a separate step
"format": "prettier --write ."                                   // ✅

// Use the CLI helper to verify
npx eslint-config-prettier src/index.js                          // ✅

❌ Don’t Do This:

// Place eslint-config-prettier before other configs
export default [eslintConfigPrettier, { rules: { indent: 2 } }];  // ❌

// Re-enable formatting rules after the config
{ rules: { quotes: ["error", "single"] } } // after prettier      // ❌

// Expect eslint-config-prettier to format files
// It disables rules; it does not run Prettier.                  // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
Conflicts persist after adding the config	Config placed before a rule-enabling config	Move it to the last position
ESLint still reports formatting errors	Formatting rule re-enabled after the config	Remove the later rule or move the config
Prettier is not applied	The config does not run Prettier	Add a `format` script or editor integration
CLI helper reports no conflicts but errors persist	Helper checked a different file	Run the helper on the file that shows the error

Real-World Examples

1. Flat config import

import eslintConfigPrettier from "eslint-config-prettier/flat";

2. Flat config placement

export default defineConfig([{ rules: {} }, eslintConfigPrettier]);

3. Legacy extends

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

4. CLI helper

npx eslint-config-prettier src/index.js

5. Separate format script

"format": "prettier --write ."

6. Code-quality rule

"no-unused-vars": "error" // stays enabled

7. Disabled formatting rule

// "indent", "quotes", "semi" are disabled by the config

8. Special rule validation

"no-tabs": ["error", { "allowIndentationTabs": true }]

9. Plugin alternative

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

10. Legacy config name

"prettier" // not "eslint-config-prettier"

Visual

The Placement Rule

┌──────────────────────────────────────────────────────────────┐
│  WHERE eslint-config-prettier GOES                            │
│                                                              │
│  ✅ Correct order:                                            │
│  ┌─────────────────────┐                                    │
│  │ eslint:recommended  │  Enables indent, quotes, semi      │
│  │ (formatting rules)  │                                    │
│  └──────────┬──────────┘                                    │
│             │                                                │
│             ▼                                                │
│  ┌─────────────────────┐                                    │
│  │ eslint-config-      │  Disables indent, quotes, semi     │
│  │ prettier (last)     │  (overrides the config above)      │
│  └─────────────────────┘                                    │
│                                                              │
│  ❌ Wrong order:                                              │
│  ┌─────────────────────┐                                    │
│  │ eslint-config-      │  Disables indent, quotes, semi     │
│  │ prettier            │                                    │
│  └──────────┬──────────┘                                    │
│             │                                                │
│             ▼                                                │
│  ┌─────────────────────┐                                    │
│  │ Custom config       │  Re-enables indent                 │
│  │ (after prettier)    │  (conflict returns)                │
│  └─────────────────────┘                                    │
└──────────────────────────────────────────────────────────────┘

The Two Tools

┌──────────────────────────────────────────────────────────────┐
│  ESLINT AND PRETTIER, SEPARATED                              │
│                                                              │
│  ESLint                         Prettier                    │
│  ┌─────────────────────┐       ┌─────────────────────┐     │
│  │ Code quality        │       │ Formatting          │     │
│  │                     │       │                     │     │
│  │ no-unused-vars      │       │ indent              │     │
│  │ eqeqeq              │       │ quotes              │     │
│  │ no-undef            │       │ semi                │     │
│  │                     │       │ comma-dangle        │     │
│  └─────────────────────┘       └─────────────────────┘     │
│                                                              │
│  eslint-config-prettier disables the Prettier column         │
│  in ESLint, so the two tools do not overlap.                │
│                                                              │
│  Run ESLint for correctness. Run Prettier for style.        │
└──────────────────────────────────────────────────────────────┘

The Config’s Scope

┌──────────────────────────────────────────────────────────────┐
│  WHAT eslint-config-prettier DOES AND DOES NOT DO             │
│                                                              │
│  ✅ Does:                                                     │
│  ┌─────────────────────┐                                    │
│  │ Disables ESLint     │                                    │
│  │ formatting rules    │                                    │
│  └─────────────────────┘                                    │
│                                                              │
│  ❌ Does not:                                                 │
│  ┌─────────────────────┐                                    │
│  │ Run Prettier        │                                    │
│  │ Format files        │                                    │
│  │ Replace the CLI     │                                    │
│  │ Disable code-quality│                                    │
│  │ rules               │                                    │
│  └─────────────────────┘                                    │
│                                                              │
│  It is a configuration object, not a tool.                  │
│  The project still needs Prettier.                          │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Purpose	Disables ESLint formatting rules that conflict with Prettier
Flat config import	`eslint-config-prettier/flat`
Flat config placement	Last in the exported array
Legacy config name	`"prettier"`
Legacy config placement	Last in `extends`
CLI helper	`npx eslint-config-prettier <file>`
Does not	Run Prettier or format files

Key takeaways:

The config disables formatting rules, not code-quality rules. ESLint’s no-unused-vars, eqeqeq, and no-undef remain active. The formatting rules that duplicate Prettier’s work—indent, quotes, semi, comma-dangle—are turned off .
Placement is the entire mechanism. The config only works if it is placed after every other config that enables formatting rules. In flat config, it is the last object in the exported array. In legacy config, it is the last string in extends. A later config can re-enable the rules and restore the conflict .
The config does not run Prettier. It removes ESLint’s side of the conflict, but Prettier must still be run as a separate step. A project that adds the config and does not run Prettier has no formatting enforcement at all .
The CLI helper validates the configuration. The helper inspects the resolved ESLint config and reports any formatting rules that still conflict with Prettier. It is the diagnostic for a misplaced config or a re-enabled rule .
The plugin alternative exists but is optional. eslint-plugin-prettier runs Prettier inside ESLint and reports formatting differences as lint errors. Its recommended config includes eslint-config-prettier automatically. The separate-tools pattern is simpler and faster, but the plugin pattern is available for projects that want a single command .

Remember: eslint-config-prettier is a positioning fix, not a formatting tool. It resolves the conflict between ESLint and Prettier by disabling ESLint’s formatting rules, but it only works if it is placed last. A config that is placed correctly and combined with a separate Prettier step produces a clean separation: ESLint reports code-quality issues, Prettier formats the code, and the two tools never disagree. A config that is placed incorrectly or not paired with Prettier produces either the original conflict or no formatting enforcement at all. The position is the mechanism.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!