Add Pre- Commit to your next.js web application [with Eslint, prettier, Husky] 2021 edition

Everyone can write code, but not everyone is able to write clean code. For this reason, we use pre-commits. In this tutorial we will learn how to keep our GitHub repository clean with the help of Husky, Eslint (AirBnb) and Prettier.

What is pre-commit in our case?

As we commit code in our IDE, the latest code is reviewed by using Husky. It checks EsLint and adjustes our code with Prettier. This way only clean code is pushed to Github, Gitlab etc and all developers work with the same code.

In this tutorial, I will show you how to use Eslint (especially with AirBnb), Prettier, Husky, lint-staged and commitlint to take your code to the Next.Js level. By the way, you can use this tutorial for other JavaScript frameworks as well.

Feel free to follow along or to fork, clone or download the entire boilerplate on Github for free.

addition:

• If you clone the Github repo, make sure to run the following command again.
• (This re-installation may prevent the pre-commits from not being executed.)

npm i --save-dev husky@4.3.8 eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @commitlint/cli lint-staged

Let’s get started

In your shell head to your favorite folder and run the following command to create a new Next.Js web application.

npx create-next-app

In our case, I called it next-boilerplate. Next automatically installed react and react-dom for us… awesome! Now run:

cd next-boilerplate
code .
npm run dev

This will open visual studio code and then run our webapplication on localhost.

In your shell make sure you are in the root folder of your project. Let’s get started and install our dependencies.

Husky has now a version ^5 which will not work right now (2021). Please install the stable version 4.3.4

npm i --save-dev husky@4.3.8

Now we need to install a couple more development dependencies:

npm i --save-dev eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @commitlint/cli lint-staged

Our package.json now looks like this.

In a next step we get eslint and prettier running (locally and only in our project). Therefore we create a .eslintrc.json file in the root folder of our project

We also need to create an .eslintignore and .prettierignore file. Simply create them and add:

node_modules

Since we don’t want to format the node_modules folder (as it will not be pushed to our online repository).

We also need a .prettierrc file: Feel free to add your own rules.

We almost did it

Now we just need to customize our package.json file. Under “scripts” simply copy and overwrite:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint --fix .",
  "format": "prettier ./**/*.{js,jsx,ts,tsx,css,scss,md,json} --config ./.prettierrc --write",
  "formatmd": "prettier --write",
  "success-message": "echo \n\n\n🚀  Everything is awesome. 🚀\n\n🖥️  Auto checking completed, ready to deploy.🖥️\n\n☁️  Run: git push ☁️"
},

At the end of “devDependencies”: {} Add a COMMA (this is very important!) and then add the following husky, lint-staged and commitlint rules.

},
  "husky": {
   "hooks": {
     "pre-commit": "lint-staged",
      post-commit": "npm run success-message",
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
   },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,html}": [
      "npm run lint",
      "npm run format",
      "git add ."
      ],
    "*.{md}": [
      "npm run formatmd",
      "git add"
      ]
    },
  "commitlint": {
    "rules": {
      "references-empty": [
        2,
        "always"
      ]
  },
    "parserPreset": {
      "parserOpts": {
        "issuePrefixes": [
          "ISSUE-"
        ]
      }
    }
  }

Your package.json file should look like:

EsLint Error handling

Our project will have several errors in the beginning. This is because we have not passed any React rules into our .erlintrc.json file. Copy and overwrite “rules”:{} with the following code: (feel free to check what the rules actually are doing and adjust the rules to your needs — for me this works just great)

What is going to happened?

First, we need to link our Next.Js app with github. Create a new repository for this purpose. Then execute the code git add . and git commit -m “my first pre-commit upload”.

You will notice that this process takes a few seconds. This is because our script first checks our project for Eslint errors by running npm run lint in the background. Here we actually just run the code eslint — fix.

In a second step the following files (js,jsx,ts,tsx,css,scss,md,json) are checked automatically and adjusted with prettier if necessary. During this process npm run format is executed in the background.

Let’s clean up our repository and add another commit:

In the console we will see something like this (you can ignore the warning messages LF…)

Congratulations

We are now able to automatically upload clean code to our repository. Thank you for your attention, for more information visit my github template or check out my website.