explaingit

prettier/eslint-config-prettier

5,883JavaScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

A tiny config package that disables all ESLint formatting rules that conflict with Prettier, so both tools can run on the same JavaScript project without flagging each other's output as an error.

Mindmap

mindmap
  root((eslint-config-prettier))
    What it does
      Disables format rules
      ESLint Prettier peace
      No new rules added
    Covers plugins
      React
      TypeScript
      Vue
    Setup
      Install package
      Add last in extends
      Flat config support
    CLI tool
      Conflict checker
      Per-file analysis
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Set up ESLint and Prettier together on a JavaScript or TypeScript project so they do not conflict over code formatting.

USE CASE 2

Check which ESLint rules in your project config conflict with Prettier using the included CLI tool.

USE CASE 3

Add ESLint and Prettier compatibility to a React, TypeScript, or Vue project in two steps.

Tech stack

JavaScriptESLintPrettierNode.js

Getting it running

Difficulty · easy Time to first run · 5min

Must be placed last in the ESLint extends array, otherwise other configs re-enable the formatting rules it disabled.

In plain English

eslint-config-prettier is a small configuration package that makes two popular JavaScript development tools, ESLint and Prettier, work together without fighting each other. ESLint checks JavaScript code for errors and style issues. Prettier automatically reformats code to a consistent style. The problem is that ESLint has its own formatting rules, and when Prettier reformats code, ESLint can flag the result as a violation. This package solves that by simply turning off all the ESLint rules that deal with code formatting, leaving Prettier to handle those decisions on its own. The package does not add any new rules. Its entire job is to disable rules that conflict with Prettier. It covers both ESLint's built-in formatting rules and rules from several popular ESLint plugins for React, TypeScript, Vue, and other ecosystems. Once you add it to your ESLint configuration, you no longer get warnings about indentation, semicolons, quote styles, or other formatting concerns that Prettier manages. Setup takes two steps: install the package, then add "prettier" to the end of the "extends" list in your ESLint config file. Putting it last is important, because later entries override earlier ones, so this ensures the formatting rules it disables stay disabled even if other configs try to enable them. The package also ships with a command-line helper tool. You run it against one of your project's files, and it reports if any rules in your current ESLint configuration conflict with Prettier. This is useful for catching situations where a rule defined directly in the "rules" section of your config overrides what this package turned off. The README is thorough and covers both the older eslintrc configuration format and the newer flat config format that ESLint introduced more recently, including known caveats around plugin naming in flat config mode.

Copy-paste prompts

Prompt 1
I am setting up ESLint and Prettier on a new TypeScript React project. Show me the eslint.config.js in flat config format that includes eslint-config-prettier so formatting rules do not conflict.
Prompt 2
Using the eslint-config-prettier CLI tool, check my current ESLint config for rules that conflict with Prettier and explain what each conflicting rule does.
Prompt 3
I have an existing .eslintrc.json with eslint-plugin-react and want to add Prettier. Show me exactly where to add eslint-config-prettier so it disables the right rules.
Prompt 4
Why must eslint-config-prettier come last in the ESLint extends array? Explain with an example showing what goes wrong if it is placed earlier.
Open on GitHub → Explain another repo

← prettier on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.