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 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.

And run the script

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.

This modifies our package.json

After installing looks like we can run our lint.

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.

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.

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.

I use JS modules so...

I use React

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 it has a image of a table comparison that is very good.

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

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

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

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

Since the new config replaced the old one please remember to re-add Next.js validations.

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

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.