---
title: "Adding prettier to eslint "
description: "ESLint and Prettier fight over formatting until you extend eslint-config-prettier. Includes the fix for ESLint couldn't find the config prettier to extend from."
canonical: https://omiid.me/notebook/44/adding-prettier-to-eslint
author: Omid Sayfun
published: 2025-04-10
updated: 2026-08-09
---

# Adding prettier to eslint 

ESLint and Prettier do different jobs. ESLint finds problematic patterns in your JS/TS code. Prettier formats it. Run both without wiring them together and they disagree about spacing, quotes, and line breaks, because ESLint ships stylistic rules of its own.

The fix is to extend your ESLint config from Prettier, which switches those stylistic rules off. Adding `prettier` to the `extends` array on its own usually fails first.

### Install eslint-config-prettier before you extend from it

If you encounter the error:

```shell
ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.
```

The `eslint-config-prettier` package is missing from your project. That package turns off all ESLint rules that are unnecessary or might conflict with Prettier. Install it with your package manager:

```shell
pnpm add -D eslint-config-prettier
```

### Put prettier last in the extends array

Once installed, update your ESLint configuration file (usually `.eslintrc.js` or `.eslintrc.json`) to include `prettier` in the `extends` array. Order matters: it has to come after the configs whose stylistic rules you want disabled.

```json
{
	"extends": ["eslint:recommended", "plugin:prettier/recommended"]
}
```

`plugin:prettier/recommended` comes from `eslint-plugin-prettier`, so install that package too. It extends `eslint-config-prettier` for you and also reports formatting differences as ESLint errors. If you only want the conflicts gone and prefer to run Prettier on its own, extend from `"prettier"` instead and skip the plugin.

### tl;dr

To integrate Prettier with ESLint, install `eslint-config-prettier` and add it to your ESLint configuration. This resolves conflicts between ESLint and Prettier, ensuring your code is both high-quality and consistently styled.