Solving ESLint and Prettier’s battle for supremacy.

Have you ever had some annoying issue in your editor where your linting just suddenly stops and you have to restart the text editor to get it kicking again? I have certainly had this issue in VSCode multiple times, i later figured it was a clash between ESLint and Prettier on who will format my code.

Unsurprisingly i am not alone, i stumbled upon a tweet from a friend Auwal airing his annoyance with the exact same thing. 👇🏿

Auwal’s angry tweet.

This post is to show you how I deal with this issue. I have seen some other other great ways of doing this too.

If you’re confused here:
* ESLint takes care of the code-quality and code formatting. It has rules that catch bugs and enforce best practices. For a deeper dive into the advantages, check out this post.
* Prettier is a code formatter, click save and boom, your code is formatted how you want it. I think this video explains it in-depth.

Quick example, You could have a function like this 👇🏿

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne(), noWayYouGottaBeKiddingMe());

… and then immediately you click on save you can have prettier format your code nicely to something like this 👇🏿

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
  noWayYouGottaBeKiddingMe()
);

By looking at my short definitions we can spot a problem, both ESLint and Prettier deal with code formatting. The thing is Prettier does it so much better while ESLint deals with code quality and patterns that prettier doesn’t care about. Because they both can format code they can occassionally have conflicting styles and then clash.

Our aim here is to set them up in a way that will have Prettier deal with code formatting and ESLint deal with code quality.

In my setup I do not have prettier installed as an editor plugin (I use VSCode), but i have ESLint installed in my editor. So you can go ahead and remove Prettier from yours too.

Install ESLint

If you don’t have ESLint installed already you can install ESLint globally or locally in your project. To learn how to install ESLint visit the docs.

After you have ESLint all set up, you’ll need to add Prettier as an ESLint rule using eslint-plugin-prettier.

yarn add --dev eslint-plugin-prettier

in your .eslintrc.json file add Prettier as a plugin and add prettier to your rules object, you can add your prettier rules in the “prettier/prettier” field as shown below in lines 7 to 9, You can see a full list of Prettier options here

Turn Off ESLint Formatting rules

We need to ensure that we turn off the formatting rules for ESLint and rely on Prettier for formatting related issues while we leave ESLint to handle code-quality related stuff.

So to disable the conflicting rules while keeping around other rules that Prettier doesn’t care about. We’ll add eslint-config-prettier as a dev dependency.

yarn add --dev eslint-config-prettier

then in our .eslintrc.json file add

{   
  extends: ['plugin:prettier/recommended'] 
}

Everything should be up and running well now.

Feel free to like and share this post if it was useful to you, comment about any questions, suggestions or corrections in the comment section below.