Blog

Our Blog

We help junior tech professionals, such as developers and designers, to grow.

Using Husky Pre-commit git hook with prettier

Cheryl M   2022-11-08

Husky allows scripts to run at various git lifecycle events. Here, we want to use the Husky pre-commit hook to run prettier to automatically format the files in the repository on commit.

project setup on gitlab: https://gitlab.com/test-projects47/husky-prettier-lintstaged-test

Setup Husky

We set up husky automatically with husky-init



npx husky-init && npm install       # npm
# or
npx husky-init && yarn              # Yarn 1


Enter fullscreen mode Exit fullscreen mode

A new folder, .husky is created in the root directory

Reference: https://typicode.github.io/husky/#/?id=automatic-recommended

Install Prettier



npm install prettier --save-dev
# or
yarn add prettier -D


Enter fullscreen mode Exit fullscreen mode

Add prettier format script (optional)

add the following to package.json, so we can use yarn format to format all files with prettier



 "scripts": {
    ...
    "format": "prettier --write ."
  }


Enter fullscreen mode Exit fullscreen mode

Configure Husky

In .husky/pre-commit, add yarn format



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

yarn format



Enter fullscreen mode Exit fullscreen mode

Now, yarn format will run every time we use git commit

Only format staged files (optional)

With above setup, all files will be formatted. If we only want to format staged files, we can use lint-staged

  1. Install lint-staged ```

npm install lint-staged --save-dev

or

yarn add lint-staged -D

2. Add the lint-staged configuration to `package.json`
Enter fullscreen mode Exit fullscreen mode

"scripts": {
...
},
"lint-staged": {
"*/.{js,jsx,ts,tsx}": [
"prettier --write"
]
},
"dependencies": {
...
},
...

3. Edit `.husky/pre-commit` file

Enter fullscreen mode Exit fullscreen mode
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
Enter fullscreen mode Exit fullscreen mode
Now, on git commit, prettier will only format, staged files, with specific file extension (js, jsx, ts, tsx) in this case. 

  but there's a [bug](https://github.com/typicode/husky/issues/968#issuecomment-1176848345) with lint-staged and husky which creates too many terminal messages like below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djeuvzfqb02ei7rq1334.png)


  The temporary fix is as follow (in `.husky/pre-commit`),

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

exec >/dev/tty 2>&1

npx lint-staged
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode

Author Bio

Author's profile

Cheryl is a Full-Stack web and mobile developer who loves learning and creating tools to make life easier and improve efficiency. She also enjoys problem-solving and helping new developers

Github LogoLinkedin account of Web Dev Path

Still got questions?

Feel free to contact us.
Contact us
Hashtag