DEV Community

Cover image for How to make ESLint work with Prettier avoiding conflicts and problems
Raffaele Pizzari for SinnerSchrader Engineers

Posted on • Updated on

How to make ESLint work with Prettier avoiding conflicts and problems

(check out my blog)

Having prettier and ESLint up and running on your project can be very useful and can save us a lot of time by identifying static errors as we introduce them into the code and assure a consistent style to your files.

Prettier is a famous "code formatter" which ensures that all outputted code conforms to a consistent style.

ESLint is a JavaScript linting utility which performs static analysis in order to find problematic patterns or code that doesn't adhere to certain style guidelines.

Prettier and ESlint, two hearths one love

It is very common nowadays to use them both at the same time.
Unfortunately, it is very easy to have configuration errors that often generate really annoying conflicts.

In this post I try to give a couple of indications to configure VSCode properly and avoid problems and conflicts.

Prerequisites

-Visual Studio Code
-VS Code ESLint plugin

What to do

  1. First of all you have to install ESLint plugin in VS Code. Either you can use the extension tab in VS Code or just the links provided in the “Prerequisites” section of this post.
  2. Then you have to install in your project Prettier and ESLint as node modules:
npm install --save-dev eslint prettier
Enter fullscreen mode Exit fullscreen mode
  1. Now it’s time to create a config file for ESLInt:
./node_modules/eslint/bin/eslint.js --init
Enter fullscreen mode Exit fullscreen mode

Or if you installed it globally you can use:

eslint --init 
Enter fullscreen mode Exit fullscreen mode

Pick the following options:

  • To check syntax, find problems, and enforce code style
  • JavaScript modules (import/export)
  • None of these
  • TypeScript: No
  • Browser or Node, as you prefer
  • Use a popular style guide
  • Airbnb (personally I really like this style guide)
  • JavaScript
  • Yes (install all dependencies)

After this process, you’ll find a new file in your root folder: .eslintrc.js

My file looks like this:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    airbnb-base,
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: module,
  },
  rules: {
  },
};
Enter fullscreen mode Exit fullscreen mode

This is the config file for ESLint.

  1. Now it’s time to create a config file for prettier:
// .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

Enter fullscreen mode Exit fullscreen mode

One of the most common problem people are experiencing with Prettier/ESLint is having conflicting warnings and lot of red lining errors.

A good way to avoid this problem is using Prettier as a ESLint plugin.

That’s why you have to install a special plugin called “eslint-plugin-prettier” ad dev dependency:

npm install --save-dev eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

Once it’s installed, you have to tell ESLint to use Prettier as a plugin:

module.exports = {
  env: {
    es6: true,
    browser: true,
    es2021: true,
  },
  extends: [airbnb-base],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: module,
  },
  rules: {
    prettier/prettier: error,
  },
  plugins: [prettier],
};

Enter fullscreen mode Exit fullscreen mode

At this point, you have both Prettier and ESLint up and running on your code.

Even if it’s working, it could be that some rules will conflict.
To avoid this problem, you have to turns off all rules that are unnecessary or might conflict with Prettier.

npm install --save-dev eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Once it’s installed, you have to update your .eslintrc.js file:

module.exports = {
  env: {
    es6: true,
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': 'error',
  },
  plugins: ['prettier'],
};

Enter fullscreen mode Exit fullscreen mode

Yeah! You did it!

In your project now you have ESLint and Prettier working perfectly at the same time.
Prettier runs as a plugin of ESLint and thanks to the special configuration it won’t conflict with it.

You can check a working example on this repo: GitHub - codejourneys-org/eslint-prettier

If you have any questions please do not hesitate to leave a comment or join a great community of Front-End developers 😃 : CodeJourneys.org

Discussion (8)

Collapse
fyfirman profile image
Firmansyah Yanuar

You saved me! I was annoyed when i format my code with ALT+SHIFT+F in my vscode that formatting to Prettier rules and when saving my files it execute ESLint and prettier give me a warning. Now i just set my ALT+SHIFT+F to ESLint cause it will formatting to Prettier too.

ANW, if anyone occurred this problem in ESLint console:

Request textDocument/formatting failed with message: Cannot find module 'prettier'
Require stack:
...
Enter fullscreen mode Exit fullscreen mode

Dont forget to install prettier ( yarn add -D prettier )

Collapse
amatana profile image
Ana Amat

Loved it, it was very easy to follow and friendly.
I just had a problem when adding the "prettier/prettier" : "error", inside the rules at the .eslintrc file. It caused many errors that wouldnt allow the app to compile.
I took it and all went again smoothly. Any comments?
Questions are:

  • What does the "prettier/prettier" rule means?
  • The most secure way to ensure a proper work among ESlint & Prettier is to install both eslint-plugin-prettier and eslint-config-prettier dev dependencies? Right?

Appreciatte your answer!
Thank you!

Collapse
zodman profile image
Andres 🐍 in 🇨🇦

you missing the eslint --fix <file>

Collapse
ravgeetdhillon profile image
Ravgeet Dhillon

Well Written and to the point.

Collapse
jvarness profile image
Jake Varness

Super helpful for folks using two really popular dev tools. Good write-up!

Collapse
pixari profile image
Raffaele Pizzari Author

Thank you very much! :)

Collapse
jilvanx profile image
Jilvan Cândido

Very helpful this article. Congratulations buddy!

Collapse
theagols profile image
Thiago Lourenço

Really helpful post. I was having a hard time with these two. Thank you!