Pre-commit hooks in Node.js are scripts that are executed automatically before a Git commit is made. These hooks provide an extra layer of quality assurance for your code and can enforce coding standards, perform automated tests, and catch potential problems before they are committed to the codebase.

Here is a step by step guide to setting up pre-commit hooks in Node.js:

Setup

Initialize a Git

Hooks work in conjunction with git. Use the following command to initialize git in your project. You most probably are already using git, so you can skip this step.

$ git init

Update scripts in the package.json

For the hook to work, we will add the pretty-quick and husky packages in your project. Add the following three scripts in the package.json.

"scripts": {
    ...
    "lint": "eslint ./src --fix",
    "pretty-quick": "pretty-quick",
    "postinstall": "husky install",
    "build": "rimraf dist && tsc",
    "prelint": "tsc --noemit"

  },

Installing the dependencies

Run the following command to install the required dependencies

$ npm install husky pretty-quick eslint prettier rimraf

Husky Setup

Onec everything is installed, you can run the following command to start the setup for husky.

$ ./node_modules/.bin/husky install

If the command runs successfully, you will see the message husky - Git hooks installed. Now, we can create hooks using the scripts.

Use the following command in the terminal:

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

The husky pre-commit command will create a file in your project root directory at the path <PROJECT_ROOT>/.husky/pre-commit

The file pre-commit is just a bash script with the following code.

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

npm run lint
# add more custom commands 👇
npm run pretty-quick

pretty-quick runs prettier in your project to fix the formatting and ensures consistent code across the whole projects. The good thing about this tool is that you can configure it to touch modified files only.

For that, add the following in your package.json

{
    ...
    "husky": {
        "hooks": {
            "pre-commit": "pretty-quick --staged"
        }
    },
    "devDependencies": {
        ...
    }
}

The --staged option runs prettier only on the files staged on git.

Use git to commit any change in the code. Husky will intercept that command and will run the pre-commit bash script before allowing the commit.

With all this done, the basic setup is ready.

There’s one caveat. This will only work with Javascript and not Typescript.

With Typescript, you have no .js files. And, eslint, by default only checks for .js files.

To handle that, you can add the --ext option in the scripts object in your package.json file.

"scripts": {
    ...
    "lint": "eslint ./src --fix --ext .ts",
    ...
  },

The prelint command automatically runs whenever you run npm run lint. Here, we are using tsc which is the Typescript compiler with the --noemit flag.

With this flag, the Typescript skips outputting any output files in your build directory and just validates your code.

https://www.typescriptlang.org/tsconfig#noEmit

You can format, build and do different sorts of things with setup like hitting any webhooks, priting to the console, or running any bash script.