How to Set Up ESLint, Prettier, and Husky in Next.js ?

If you’re building a Next.js project, you already know how important clean, consistent, and error-free code is. This is where tools like ESLint, Prettier, and Husky come into picture.

These 3 together helps you with,

• Automatically format your code.
• Find bugs and syntax errors so early.
• Implement best coding practices.
• Conforms high-quality code before every commit.

In this blog, We’ll guide you through setting up ESLint, Prettier, and Husky in a Next.js project to take your developer workflow to the next level.

Let's discuss What are these tools?

1. ESLint
Website: https://eslint.org/
Eslint is a static code analysis tool that checks your JavaScript/TypeScript code for errors and applies coding standards. Think of it as a spell-checker for your code.

2. Prettier
Website : https://prettier.io/
Prettier is the opinionated code formatter that automatically formats your code to make it consistent and readable.it supports so many languages.

3. Husky
Website : https://typicode.github.io/husky/
Husky is a tool that adds Git hooks to your project, so you can run scripts like linting and formatting before making a commit or pushing code into your respective github.

Why Use Them Together?

• ESLint ensures code quality.
• Prettier keeps your code neat and tidy.
• Husky prevents messy or broken code from being committed.

By combining them, you’ll save time, avoid unnecessary bugs, and make life easier for your project team.

Step 1: Initialize a Next.js Project

If you don’t already have a Next.js project, let's create one,

npx create-next-app@latest my-next-app
cd my-next-app

Step 2: Install ESLint and Prettier

Next.js comes with ESLint support out of the box, but we’ll install Prettier and configure both.

First install dependencies,

Run the following command to install ESLint, Prettier, and some helpful plugins:

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

Why These Plugins?

• eslint-config-prettier: Turns off ESLint rules that might conflict with Prettier.
• eslint-plugin-prettier: Runs Prettier as an ESLint rule, so you see formatting issues directly in your editor.

Step 3: Configure ESLint and Prettier

Update the .eslintrc.json File

Edit your ESLint configuration file (.eslintrc.json) like this:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

Add a Prettier Configuration File,

Create a prettier.config.js file in the root of your project:

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  tabWidth: 2,
  printWidth: 80,
};

Step 4: Test Your Setup

Run ESLint to check your code:

npm run lint

To format your code with Prettier, add a script to your package.json:

"scripts": {
  "format": "prettier --write ."
}

Now, run:

npm run format

Your code should now be linted and formatted!

Step 5: Install Husky for Git Hooks

Now let’s set up Husky to enforce these checks before commits.

Install Husky : Run the following command:

npm install --save-dev husky

Initialize Husky : Enable Husky in your project:

npx husky install

This will create a .husky directory in your project.

Step 6: Add Pre-Commit Hook

Husky allows you to run scripts before commits. Let’s add a pre-commit hook to run ESLint and Prettier.

Create the Hook,

npx husky add .husky/pre-commit "npm run lint && npm run format"

This command will add a pre-commit file to your .husky folder with the following script:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
npm run format

Now, every time you commit code, Husky will run linting and formatting checks automatically.

Step 7: Test the Workflow

1. Make some changes to your code.

2. Stage the changes:
   

git add .

1. Commit the changes:

git commit -m "Test commit"

If there are any linting or formatting issues, the commit will be blocked until you fix them.

Final Directory Structure

After completing the setup, your project directory should look like this:

my-next-app/
├── .eslintrc.json
├── prettier.config.js
├── .husky/
│   └── pre-commit
├── package.json
├── node_modules/
├── pages/
├── public/
├── styles/
└── ...

Benefits of Using These 3 Tools Together

• Consistency: Everyone on your team writes code in the same style.
• Fewer Bugs: Catch errors early with ESLint.
• Streamlined Workflow: Husky enforces good practices automatically.
• Time-Saving: No more manual code formatting or debugging inconsistent styles.

Conclusion

Setting up ESLint, Prettier, and Husky in your Next.js project may feel like extra stuff at the starting point, but it’s an one time investment that pays off. Your code will be cleaner, your workflow will be smoother, and your team will be thankfull.

So, give it a try and let your code shine! may your commits always pass with flying colors!