Prettier 16 🎨 ESLint Integration — eslint-config-prettier to avoid conflicts - KandZ

⏱️ Estimated read: 11 min | |

Prettier and ESLint answer different questions. Prettier asks “how should this code look?” and reformats it. ESLint asks “is this code correct?” and reports problems. The two questions are independent, but the tools overlap: ESLint ships with formatting rules like indent, quotes, and semi that duplicate what Prettier does, and when both tools run, they disagree. Prettier reformats a line one way, ESLint reformats it another way, and the developer sees an error that cannot be fixed because fixing it for one tool breaks the other.

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 →

eslint-config-prettier exists to resolve that disagreement by disabling the ESLint rules that conflict with Prettier. It does not run Prettier, does not format files, and does not replace the Prettier CLI . It is a configuration object that turns off formatting rules in ESLint so that Prettier owns formatting and ESLint owns everything else. The package’s own documentation states the scope precisely: it “turns off all rules that are unnecessary or might conflict with Prettier” .

Key point: eslint-config-prettier disables ESLint’s formatting rules. It must be placed last in the ESLint configuration so that it overrides the formatting rules enabled by earlier configs. In flat config, import it from eslint-config-prettier/flat and place it at the end of the exported array. In legacy config, add "prettier" to the end of the extends array.

Why the conflict exists

The overlapping responsibility problem. ESLint was designed as a linter, but it accumulated formatting rules over time. Rules like indent, quotes, semi, and comma-dangle enforce style, not correctness. Prettier also enforces style. When both are enabled, they fight over the same lines of code. A developer who runs eslint --fix and then prettier --write sees the code change twice, in different directions. eslint-config-prettier removes ESLint’s side of the fight by disabling the style rules, leaving ESLint’s correctness rules—no-unused-vars, eqeqeq, no-undef—untouched .

The placement problem. The config 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 eslint-config-prettier is placed before a shared config that enables indent, the shared config’s rule wins and the conflict returns. The documentation is explicit: “Put eslint-config-prettier last” . In flat config, this means the last object in the exported array. In legacy config, this means the last string in extends.

The special rules problem. 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. curly works if the "multi-line" option is not used. These rules are disabled by default by eslint-config-prettier, but the CLI helper tool validates the options if a developer chooses to re-enable them . The default behavior is to disable them, which is the safe choice for most projects.

The trade-off. The config 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 two tools must be configured to agree on the style, and eslint-config-prettier makes that agreement possible by removing the duplicate enforcement. 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 eslint-config-prettier in flat config

ESLint 9+ uses flat config. The eslint-config-prettier/flat import is the correct entry point for flat config, 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 for type safety and automatic array flattening . 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. The documentation warns about this explicitly: “If another shared config or later config object turns formatting rules back on, Prettier conflicts can return” .

// 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 in the broken example 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, after every config that might enable formatting rules.

b. Configuring eslint-config-prettier in legacy config

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

// .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. The extends array is resolved in order, and later entries override earlier ones.

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!