How to actually use ESLint + Prettier

In this article, you'll learn how to set up an excellent linting solution with ESLint and Prettier in your project.

Issue

Using Prettier as an ESLint rule has its downsides:

• You end up with many red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting — and not be in your face about it!

https://stackoverflow.com/questions/63419399/red-squiggly-lines-in-vs-code

• They are slower than running Prettier directly.

• They're yet one layer of indirection where things may break.

https://prettier.io/docs/en/integrating-with-linters.html#notes

Prettier takes care of your styling for you.

How should I use it then?

Setting up ESLint

First, install ESLint

npm install eslint --save-dev

Then run the configuration script:

npm init @eslint/config

Now let's configure it:

How would you like to use ESLint?
> To check syntax and find problems

What type of modules does your project use?
> Choose what is best for you (i.e. `esm`)

Which framework does your project use?
> Choose your framework (i.e. `react`)

Does your project use TypeScript?
> If it does not, you probably should.

Where does your code run?
> Choose `Browser` if you are using Client-Side, `Node` for Server-Side, or both if you are using something like Next.js or Remix

What format do you want your config file to be in?
> Choose what is best for you. I prefer JSON as it gives you IntelliSense.

Would you like to install them now?
> Yes

Which package manager do you want to use?
> Choose your package manager (i.e. `yarn`)

Setting up Prettier

First, install Prettier

npm install --save-dev --save-exact prettier

Then, create your Prettier configuration file

echo {}> .prettierrc.json

You can configure it however you like using the available options here.

Integrating Prettier with ESLint

To integrate Prettier with ESLint, we need to install the eslint-config-prettier dependency:

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

Then you need to add "prettier" to your .eslintrc.* file.

{
  "extends": [
    "eslint:recommended",
+   "prettier"
  ]
}

Editor Integration

I'm just going to cover the VSCode integration, but you can find more about editor integrations for both tools

• ESLint integrations
• Prettier Editor integration

Visual Studio Code extensions

• ESLint
• Prettier - Code formatter

React Integration with ESLint

If you followed the ESLint configuration script and chose React as your framework, this is already set up.

But, if you are using the new JSX transform from React 17, this is very useful:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
+   "plugin:react/jsx-runtime",
    "prettier"
  ]
}

Nice-to-have ESLint plugins

• eslint-plugin-react-hooks

Installation,

npm install eslint-plugin-react-hooks --save-dev

Configuration,

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
+   "plugin:react-hooks/recommended"
    "prettier"
  ]
}

• eslint-plugin-jsx-a11y

Installation,

npm install eslint-plugin-jsx-a11y --save-dev

Configuration,

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
+   "plugin:jsx-a11y/recommended"
    "prettier"
  ]
}

Conclusion

And there you have it. An excellent and clean ESLint + Prettier integration!

Cover image by [James Harrison](https://unsplash.com/photos/vpOeXr5wmR4)