Automate coding conventions for your project using Husky.

Source: pexels.com (@jhelmuth)

We're all working on different projects. We must follow many conventions while working on the project, such as linting, running tests, and writing suitable commit messages. Manually completing this task is very tedious. It's also a nightmare for new members who join the project but aren't used to this type of convention.

What if we can automate the task for everyone so that nothing to worry about it.

We can solve the problem using Husky. Husky makes Git hooks easy as well as helps to writing suitable commit messages and more like linting, running tests automatically. If you don't know about Git hooks you can read this.

There are many git hooks available. You can use depending on what your need is. I'll show you how to set up some basic hooks that you should use on every project.

Step - 0: Create a React project

Create a react project and navigate to the project.

1npx create-react-app husky-tutorial
2
3cd hausky-tutorial

Step - 1: Install and configure Husky

Install husky as a dev-dependency.

1npm i husky --save-dev

You can manually enable git hooks. I personaly prefer, automatically have Git hooks enabled after install.

1npm set-script prepare "husky install"

After running the previous command, you will see like below.

1// package.json
2{
3  "scripts": {
4    "prepare": "husky install"
5  }
6}

What it will do, when others npm i run in this project, they will get Husky enabled. Don't need to set thing manually. But at this point, we don't have Husky enabled. To enable Husky.

1npm run prepare

After running the command, you will get .husky directory on your project. Inside this directory, all of your git hooks will remain.

Step - 2: Install ESLint and Prettier

We want to fix any linting errors in our project before commiting change. To do that, we will use ESLint and Prettier. Lets intall ESLint, Prettier and other dependencies.

1npm i eslint eslint-config-airbnb eslint-config-node eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier --save-dev

After successfully adding the dependencies, we have to setup .eslintrc for linting rules.

1// .eslintrc
2{
3  "extends": ["react-app", "plugin:prettier/recommended"],
4  "rules": {
5    "prettier/prettier": ["error", { "singleQuote": true }],
6    "no-console": "warn"
7  }
8}

We are done with the ESLint and Prettier setup. Now we need setup npm script for linting.

1// package.json
2"scripts": {
3  ....,
4  ....,
5  "lint:fix": "eslint src/**/*.js --fix"
6}

We have setup a script for lint every .js files inside src directory.

Step - 3: Enable git hooks

Now we are ready enable git hooks.

1npx husky add .husky/pre-commit "npm run lint:fix" && git add .husky/pre-commit

Above command will add pre-commit file inside .husky directory. If you open the file you will see like this.

1#!/bin/sh
2. "$(dirname "$0")/_/husky.sh"
3
4npm run lint:fix

Now when you try to commit something will run this command npm run lint:fix. You never have do it manually.

Woohoo! We have automated our task. I just show you only one thing. You can you use multiple hooks and run multiple scripts based on your requirements. I am highly recommended this to use it to your every projects. It will save you a lot of time and help you be more productive. You can read the docs for further information.

Thank you for your time and effort to read this. I appreciate you.