DEV Community

Cover image for How to actually use ESLint + Prettier
João Vitor
João Vitor

Posted on

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!

Red squiggly lines in vs code
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
Enter fullscreen mode Exit fullscreen mode

Then run the configuration script:

npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

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`)
Enter fullscreen mode Exit fullscreen mode

Setting up Prettier

First, install Prettier

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

Then, create your Prettier configuration file

echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

{
  "extends": [
    "eslint:recommended",
+   "prettier"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Editor Integration

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

Visual Studio Code extensions

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"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Nice-to-have ESLint plugins

Installation,

npm install eslint-plugin-react-hooks --save-dev
Enter fullscreen mode Exit fullscreen mode

Configuration,

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

Installation,

npm install eslint-plugin-jsx-a11y --save-dev
Enter fullscreen mode Exit fullscreen mode

Configuration,

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

Conclusion

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

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

Discussion (0)