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:

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:

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.

{
	"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.