Setting Up Eslint, Prettier, Husky, Lintstage and commitlint for Nextjs Project

Committing your codes to your GitHub sometimes will not be acceptable by Vercel or a platform that you are hosting the website due to some errors that exists inside your code, so you want your project to be checked with everything including types, styles of the codes, any errors or etc.… before committing to your repository (GitHub).

Eslint, Prettier, Husky, Lintstage are the best option for checking before committing.

Commitlint is a package where you can write a good and understandable commit message. Ex: “feat(home-page): message”

So this blog might help you to have a good and stable project while working with your teams.

And one more thing, imagine that you are working with a team, so everyone is not going to write the code in your way, so the method that I am going to tell you, is going to save you from various code writing, so stay with me and learn something cool if your project is open source or not, does not matter.

Why I choose this method?

When I was working for a client project, I did not have access to vercel to check what the problem is with my code, so I had to make another vercel project and push the codes to 2 several project to see the errors.

I knew that there is an easier way to do this but I had a bad experience with it because every time I installed it, it was not working as expected, so the problem forced me to go and learn the eslint setup, now It is so easy to fix any errors before committing to production.

What are they?

Eslint

In my current knowledge, eslint is a technology that is going to check if there are any errors in your code, if there is a single error, then you are not able to commit anything unless you fix that error.

Prettier

If you are looking to style your code writing and to have a readable and clean code, then prettier is the best option for that.

If you are working with a team, then I am sure that all of you are going to write the codes in different ways, so prettier is going to handle that so that you are going to have the same code written.

Husky

Eslint and prettier are nothing without husky, because this is husky that is going to run Eslint and prettier when committing, we will learn it more when installing huksy.

Lintstage

Before committing, you will run git add . command for sending your changes to stage, this package will help you to run eslint, prettier … only on those files that are on stage.

This will save you lots of time, without this you need to run eslint, … for your whole files so it takes time.

We will see why it is important when installing it.

Commitlint

It is not going to do anything to your codes, this is a bonus tip for you, so stay with me, you will love it.

How to set them up?

Install Nextjs

by using your faviourte package manager, follow this step:

npx create-next-app@latest <project-name>

you will get this question to set up your Next.js project:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Install Eslint

Run the following command:

npx eslint --init

You will be asked several questions, you can choose any options (options that you want your project to looks like).

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
√ How would you like to use ESLint? · style
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
? Which framework does your project use? ...
> React
  Vue.js
  None of these
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
? Does your project use TypeScript? » No / Yes

If you are using TypeScript, choose Option "Yes"

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
  Node
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
? Which style guide do you want to follow? ...
> Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

You are done, now You need to give permission and choose your package manager to install the them.

You will see a new file after installing:

└── app
└── node_modules
└── public
└── .eslint.js
└── .eslint.json
└── .gitignore
└── ...

You need to update something in that file:

module.exports = {
  // Other codes...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
  settings: {
    react: {
      version: "detect",
    },
  },
};

Installing Prettier

npm install prettier prettier-plugin-tailwindcss eslint-config-prettier

and then create a new file:

└── app
└── node_modules
└── public
└── .eslint.js
└── .eslint.json
└── .gitignore
└── .prettierrc
└── ...

Copy and paste the following in that file:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "singleAttributePerLine": false
}

Remove the plugins if you are not using Tailwind CSS.

You need to add 2 new lines in .eslint.js file:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "standard-with-typescript",
    "plugin:react/recommended",
    "plugin:@next/next/recommended",
    "prettier",
  ],
  // Other codes...
};

Husky

npx husky-init

New folder will be add:

└── .husky
  ├── _
  └── pre-commit
└── app
└── node_modules
└── public
└── ...

There will be a devDependencies which will be added after running "npx husky-init", you need to install by running:

npm install

Let's keep installing other tools, we will come back to the husky later...

Lint-staged

As we talked about it, it is going to test those codes that are staged, not the whole codes. imagine you are having a massive codebase, and you want to test all your code before committing, so it will take time which we don't want, right?

npm install lint-staged

after that you need to make a folder, it is not going to create one for you:

└── .husky
  ├── _
  └── pre-commit
└── app
└── node_modules
└── public
└── .lintstagedrc
└── ...

Make sure that the spell of each files and folders must be same.

Add the code below in the file:

{
  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix", "eslint"]
}

Basically, it is going to run whatever we add there before committing.

Now let's go back to Husky to add something:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
 
- npm test
+ npx lint-staged --concurrent false

Now, everything must be working fine.

Let's go and setup the last part which is...

Committlint

If you want your commit messages to look professional or sounds like an expreince developer, install it:

npm install --save-dev @commitlint/cli @commitlint/config-conventional

Make a file:

└── .husky
  ├── _
  └── pre-commit
└── app
└── node_modules
└── public
└── .lintstagedrc
└── commitlint.config.js
└── ...

Add the following code:

const Configuration = {
  extends: ["@commitlint/config-conventional"],
  roles: {},
};
 
module.exports = Configuration;

You need to make another file in the Husky folder:

└── .husky
  ├── _
  ├── commit-msg
  └── pre-commit
└── app
└── node_modules
└── public
└── .lintstagedrc
└── commitlint.config.js
└── ...

Add the following code:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
 
npx --no -- commitlint --edit

That is all you need to do to set up those tools that are really going to help if you are collaborating or for writing a clean code.

I am very happy that was able to write a blog that help others to setup these things easily, It was so hard and confusing for me back then but now here you go, you can use it :)

Peace

NextMaking Website

Table of Contents