Published on

Easily configure Prettier with ESLint

Authors
eslintandprettier

In this article, we'll see how you can configure Prettier with ESLint easily

Should you use Prettier ? Should you use a code formatter in general ?

Yes. Code formatting tools are great because they generally provide easy to use tools to automatically format your code by following a set of rules that you can customize. By using them, we eliminate the need for manual formatting and therefore won't have to worry about coding style.

If you have Prettier set up, you can configure it to automatically format your file on save. That way, you will never need to worry about coding style anymore.

Add Prettier to ESLint configuration

You can configure Prettier in a way that ESLint takes it into consideration like a plugin. Prettier errors and warnings will appear in ESLint execution output. To do so, it's very simple :

  • Start by installing Prettier plugin for your editor / IDE.
  • Next, install the packages that makes the connection with ESLint and that turn off all ESLint rules that might conflict with Prettier
npm i eslint-config-prettier eslint-plugin-prettier --save-dev
  • Next, you just need to add plugin:prettier/recommended as the last extension in your .eslintrc file and you're done

Example ?

For the following simple JavaScript file

var name = 'Ismail Tlemcani';
console.log(name);

If you have Prettier configured to work with ESLint, running ESLint will give the following output :

  1:14  error    Replace `'Ismail·Tlemcani'` with `"Ismail·Tlemcani";`  prettier/prettier
  2:1   warning  Unexpected console statement                           no-console
  2:18  error    Insert `;`                                             prettier/prettier

Custom config for Prettier ?

You can add your own custom rules that Prettier will take into consideration when formatting by adding a file named .prettierrc and adding your rules there. As an example, if you want to keep single quotes in your file, you can add the following rule in your .prettierrc file

{
  "singleQuote": true
}

That's it. You can customize both Prettier and ESLint configuration files in order to fit your requirements.