Pre-Commit Hooks. Why do you need this?

This way of using pre-commit hooks I use for each kind of project which I develop Java, Kotlin, and TypeScript. If you need to provide some pre-commit scripts you could follow this short guide and do the same for your projects.

Prerequisites

Before, you need to do install Node.js and some additional tools.

First of all, let’s install the nvm tool that allows managing Node versions easily.

> curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
> source ~/.bashrc

Now, create .nvmrc file in the root folder of your project, and add the following line:

lts/gallium

where, lts/gallium is a version of Node.js which is Active LTS for that moment. You could check versions of Node.js here.

Then run the following command in the root folder of your project, which will install and apply the specified version of Node.js in the .nvmrc file.

nvm use

This way allows don’t care about Node.js for each development environment. Just execute nvm use on the new machine.

I’m using Java, why should I install Node.js?

Using Node.js we will provide a comfortable way of executing scripts or/and some needed development tools. In our case, it is a pre-commit hook tool.

Configure NPM project

Let’s initialize the NPM project. NPM is already installed on your machine in the scope of Node.js installation.

npm init

It creates a package.json. I deleted the extra fields in this file and use the following:

{
  "name": "[project name here]",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"test\""
  }
}

Create a first Git Hook

Before, let’s install NPX tool as a global dependency for Node.js. It helps to use Node.js tools without installing them locally.

npm install -g npx 

Now, we are ready to create our first hook. Let’s say that I want to format *.ts,tsx files before commit operation. We need to install the following npm development dependencies:

npm install -D husky lint-staged

where, husky allows to manage git hooks and lint-staged helps to apply specific script for changed files only.

Now, we have to initialize husky, which will create a folder named as .husky with future hooks.

npx husky install

And, let’s create a first pre-commit hook:

npx husky add .husky/pre-commit "npx lint-staged"

You will see the file .husky/pre-commit contains:

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

npx lint-staged

After, these steps we can add configuration to package.json for the lint-staged and define for husky a hook.

{
  "name": "[project name here]",
  "version": "1.0.0",
  "scripts": {},
  "devDependencies": {
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3"
  },

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{ts,tsx}": "prettier --write" // this script will execute as a pre-commit hook
  }
}

As a lint-staged script, I’m using the prettier tool to format *.ts, *.tsx files. You could use any script you want.

Using pre-commit hook

Each time when you will commit changed files which defined as a pattern in lint-staged git will use pre-commit hook specified in husky > hooks > pre-commit.

> git add .
> git commit -m 'Test pre-commit hook.'

✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[master 61115dc] Added pre-commit hook for using pretier
 38 files changed, 1007 insertions(+), 526 deletions(-)
 create mode 100755 .husky/pre-commit

Enjoy!