Next.js with ESLint
Tags: react, nextjs, javascript, webdev
Published: 2023-02-08 20:16:24

One of the things that really helps when working in teams is having some kind of standard or agreement regarding the code formatting, this way is so much easier for everyone to read the code and onboard new team members. For this ESLint in my opinion is essential.

That's why I want to see how does Next.js work with ESLint. 

> [ESLint](https://eslint.org/) is an open source project that helps you find and fix problems with your JavaScript code. 

Reading the documentation for Next.js you are going to find that

> Next.js provides an integrated ESLint experience out of the box.

We just need to add `next lint` as a script to the package.json. So that is what I'm going to do now.

![add package json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g61tro7uafnd13kex5vu.png)

And run the script

![run lint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q2enry9akqkfaty4equ.png)

Looks like it detected that I don't have ESLint and we have to configure it. I'm going to go with the recommended configuration.

![install ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5o2onej6cwkuq9xauhg.png)

This modifies our `package.json`

![modified package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg0n41d8zz0evvunaaph.png)

After installing looks like we can run our lint.

![npm run lint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cle6w5irzudl73kj9ind.png)

Looks like there is a Warning that we can improve in our code.

> By default, Next.js will run ESLint for all files in the pages/, components/, lib/, and src/ directories

This was really easy, so I kept reading what else we could do and found this 

> ESLint also contains code formatting rules, which can conflict with your existing Prettier setup. We recommend including eslint-config-prettier in your ESLint config to make ESLint and Prettier work together.

So I could install `eslint-config-prettier`. But I don't usually format my code with prettier and that made me think of another thing. I have my VSCode configured to format my code on save and this was not happening. I just added some extra tabs, saved and nothing happened.

![ugly index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7788bnnqfwv222icz73v.png)

So looks like I'm missing something. I don't see ESLint in my package.json but that's supposed to be OK. Still I want to check and make sure, so if I try to make an initial configuration it should warn me if it isn't installed.

![eslint init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9corp6zn4f9wp8ndod16.png)

But no error appeared, I'll try to do the whole configuration and see what happens. First I will select to enforce de code style.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr7gbcqn0ec6smnecjq2.png)

I use JS modules so...

![js modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d12qm7i2ywd1e4028ezb.png)

I use React

![react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94ki3xwrt2zs12ox7re6.png)

I am not using Typescript, I run my code in browser and just to test I will try a popular style guide, I like semicolons so I think I'm going to go with the AirBnB one but for a comparison you can check this [link](https://betterprogramming.pub/comparing-the-top-three-style-guides-and-setting-them-up-with-eslint-98ea0d2fc5b7) it has a image of a table comparison that is very good.

![airbnb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqxzm2ckfdc12elsbuct.png)

And I already have a json for configuration so I will go with that option

![json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xautbzwp2y1gxt2hkgxo.png)

Looks like I'm missing some things so I'll install them.

![last config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rncvhdkc5r5y0akkit9c.png)

And that is it, now I'm getting all kind of errors.

![eslint errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcmm1ep235pzsyilo7go.png)

If I save the file, ESLint fixes what it can.

![fixed index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hbjhwcfvxdftqjhdr90.png)

Since the new config replaced the old one please remember to re-add [Next.js validations](https://nextjs.org/docs/basic-features/eslint).

> The next configuration already handles setting default values for the parser, plugins and settings properties

If you run lint now you are going to see more errors

![eslint more errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6bnddp2chdtdx7c993r.png)

So I'm not really happy with ESLint basic configuration that comes with Next.js so you will have to tweak it a little bit the way that you or your team needs it.

That's it for now, hope it helps someone and any feedback is welcome.

Cheers.