Skip to main content

How to Resolve "ESLint couldn't find the config 'prettier' to extend from" Error in JavaScript

The error ESLint couldn't find the config "prettier" to extend from is a common configuration issue that occurs when your ESLint setup is trying to use rules from the eslint-config-prettier package, but the package is not installed or not correctly referenced. This package is essential for making ESLint and Prettier work together without conflicts.

This guide will explain what this package does, why this error occurs, and how to fix it by correctly installing and configuring it in your project.

The Core Problem: Missing eslint-config-prettier​

ESLint is responsible for code quality (e.g., finding unused variables), while Prettier is responsible for code formatting (e.g., ensuring consistent indentation). Sometimes, their rules overlap and conflict.

eslint-config-prettier is a package that solves this problem by turning off all ESLint rules that are unnecessary or might conflict with Prettier.

The error message ESLint couldn't find the config "prettier" means your .eslintrc file has "extends": ["prettier"], but the eslint-config-prettier package itself is not installed in your node_modules directory.

The Solution: Install and Configure eslint-config-prettier​

The solution is a straightforward, two-step process.

Step 1: Install the Package​

Open your terminal in your project's root directory and install eslint-config-prettier as a development dependency.

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

# Using yarn
yarn add --dev eslint-config-prettier

Step 2: Add "prettier" to Your ESLint Config​

Open your ESLint configuration file (e.g., .eslintrc.js or .eslintrc.json) and add "prettier" to the end of your extends array. It must be last so it can override any conflicting rules from other configs.

In .eslintrc.js:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended', // Example of another config
    'prettier', // This MUST be the last item
  ],
  // ... other rules
};

In .eslintrc.json:

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

After saving the file, your ESLint errors should be resolved.

Solving the "prettier/@typescript-eslint" Variant​

In older versions of eslint-config-prettier, you also had to include a separate entry for TypeScript.

Old Error Message: ESLint couldn't find the config "prettier/@typescript-eslint"

This is now obsolete. As of eslint-config-prettier version 8.0.0, the main "prettier" config automatically handles TypeScript rules.

If you see "prettier/@typescript-eslint" in your extends array, simply remove it.

Old, Incorrect .eslintrc.js:

// ⛔️ This is the old, incorrect configuration
module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/@typescript-eslint', // This is now deprecated
  ],
};

New, Correct .eslintrc.js:

// ✅ This is the new, correct configuration
module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier', // This is all you need
  ],
};

Troubleshooting: A Clean Reinstall​

If you have followed the steps above and are still seeing the error, your node_modules directory might be in an inconsistent state. Performing a clean reinstall of your project's dependencies often resolves these issues.

As solution, run the following commands in your project's root directory:

# 1. Delete old modules and lock files
rm -rf node_modules package-lock.json yarn.lock

# 2. (Optional but recommended) Clear the npm cache
npm cache clean --force

# 3. Reinstall all packages from scratch
npm install

After the installation is complete, try running ESLint or restarting your development server.

Conclusion​

The "ESLint couldn't find the config 'prettier'" error is a simple configuration issue that is easy to fix.

  • The primary solution is to install the eslint-config-prettier package.
  • You must also ensure that "prettier" is the last entry in the extends array of your .eslintrc file.
  • If you see a reference to "prettier/@typescript-eslint", you should remove it, as it is deprecated in modern versions of the package.

By correctly configuring eslint-config-prettier, you can ensure that ESLint and Prettier work together harmoniously to keep your code both clean and consistent.

Table of Contents