Creating code-style rules with ESLint for the Next.js project

Having rules in a project I think is very important, because of that your project will be standard, tidy, easy to learn, and maintainable. One of the rules I always make is code-style using ESLint, in this show I will share my code style for the Next.js project.

Before we start if you don't have a Next.js project you can read it in the show Create Project using Next.js + TypeScript + Tailwind CSS

Let's continue...

ESLint will automatically analyze our code for potential bugs based on standards/rules we have set. The benefit is if your editor is already supported with ESLint it will get the feedback quickly, we don't need to manually check whether the code complies with the rules or not.

Rules in ESLint are configurable and customized rules can be defined and loaded. Below are some of the rules I usually use:

Enforce a specific function type for the function components

Enforce a convention in module import order

Disallows the use of variables before they are defined

Disallows unused variables

Use semicolons (;)

Tab size 2 space

Print width 80 character

Single quote

etc.

Here is my step to implement ESLint in the Next.js project:

Open your root directory project, and run the command below:

Create file .eslintrc.json in the root directory project, and paste the config below:

Open file prettier.config.js in the root directory project, and paste the config below:

Open file package.json from the root directory project, and add the script below:

to make the editor automatically analyze the code I usually install `VS Code ESLint Extension`

if you want to run ESLint manually, run the command below:

Open the file with the errors, and then adjust that error to the ESLint rules.

if you want to fix errors ESLint automatically, run the command below:

After reading this show I hope you can implement ESLint in your project and you can create your own rules.