How to Configure ESlint with Nextjs in 3 Minutes

If you look for ESLint tutorials for Nextjs, you will either find configurations that are too strict, too lenient, and zero that are just right.

In this article, I will show you how to setup ESLint in 3 minutes, and provide the best ESLint configuration to help you write clean code faster, and ensure consistency throughout your application code.

So without further ado… Let’s dive right in!

Install Dependencies

For the best ESLint configuration, there are a lot of dependencies you need to install.

But don't be intimidated by this, the dependencies themselves aren't too large, and they are dev dependencies so they will not increase your app bundle size:

The ESLint Configuration

Before we create the configuration file, create a file called .eslintignore and make sure to ignore the following directories from being linted:

Now lets create the configuration file.

Create a file called .eslintrc.json in the root of your Nextjs project and copy the following settings.

NOTE: I have added comments for each line to give a basic explanation of what each rule does.

Lastly, we should add a script in our package.json file to automatically lint our Nextjs project and format our code globally.

To do this, go into your package.json file and add the following script:

This script will test your code against the rules specified in our eslint configuration.

The script will also apply prettier to any json and yaml files to make them look "prettier".

VSCode Configuration

If you are using vscode you can receive eslint warnings and errors for individual files while coding.

Also, you will be able to lint your file on save, which is my favorite feature and supercharges productivity.

To get started, create a .vscode folder in the root of your project and add a settings.json file inside it with the following settings:

And if you haven't already, type ctrl+shift+x in your vscode editor and search for the "prettier" and "eslint" plugins and download them.

Conclusion

That's all there is to it!

Now if you run pnpm format in your terminal, all of your codebase should be linted, and you will potentially see a lot of errors that you must fix.

But after fixing all these errors, your codebase will be clean, consistent, and make you code faster in the future.

If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐

Want to ship code like a hacker? Visit Next Inject today!