How to actually use ESLint + Prettier
Tags: javascript, webdev, programming, tutorial
Published: 2022-08-01 14:38:00

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://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea6ey5bmeesnlgj31a7z.png) 
> 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

```bash
npm install eslint --save-dev
```

Then run the configuration script:

```bash
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

```bash
npm install --save-dev --save-exact prettier
```

Then, create your Prettier configuration file
```bash
echo {}> .prettierrc.json
```

You can configure it however you like using the [available options here.](https://prettier.io/docs/en/options.html)

### Integrating Prettier with ESLint

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

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

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

```diff
{
  "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](https://eslint.org/docs/latest/user-guide/integrations#editors)
- [Prettier Editor integration](https://prettier.io/docs/en/editors.html)

**Visual Studio Code extensions**

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### 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](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), this is very useful:

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

### Nice-to-have ESLint plugins

- [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)

Installation,
```bash
npm install eslint-plugin-react-hooks --save-dev
```

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

- [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)

Installation,
```bash
npm install eslint-plugin-jsx-a11y --save-dev
```

Configuration,
```diff
{
  "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)