Git Hooks in Laravel with Husky

This article is about setting up your application with Husky, so you can run your linters, code formatters, static code analysis and tests all before you commit.

#Prerequisites

This article assumes that you already have some kind of project setup. As a reference, I used a Laravel application with Vue (via InertiaJS) as a frontend. Of course, you can also follow these steps without Laravel, running only the services you need.
You also need a Git Repository and a Package Manager (I'm using npm).

#Husky

Get started by installing Husky into your project. You can also follow the steps in the official Documentation.

1npm install husky --save-dev
2npx husky install

This will add the husky dependency to your package.json file and add the .husky folder where you will define all of your hooks.

#The Husky prepare script

Run this command to add the husky prepare script to your package.json.

1npm pkg set scripts.prepare="husky install"

1{
2  "scripts": {
3    "prepare": "husky install"
4  }
5}

Now, whenever you install your npm dependencies, Husky will add the required files to the .husky folder.

#The pre-commit hook

To add a pre-commit hook, run this command. You can of course call your hook whatever you like.

1npx husky add .husky/pre-commit "npm run pre-commit"

This will add a shell file named pre-commit to your .husky folder.

1#!/usr/bin/env sh
2. "$(dirname -- "$0")/_/husky.sh"
3 
4npm run pre-commit

#Add the script

Next, you need to add the script to our package.json file.

1{
2    "scripts": {
3        "pre-commit": "echo Hello World!"
4    }
5}

Now whenever, you run a git commit you should see "Hello World!" in your terminal as an output. This means your hook has worked!

1git commit -m "Test"
2 
3> pre-commit
4> echo Hello World!
5 
6Hello World!

#Running some code formatting

Running "Hello World!" every time before you commit is pretty useless. Let's try running Laravel Pint before you commit.
To do this, you could just edit your pre-commit script in the package.json file.

1{
2    "scripts": {
3        "pre-commit": "./vendor/bin/pint"
4    }
5}

This would of course work, but this runs Pint across all of your files, even ones you aren't making changes to and aren't trying to commit, which becomes annoying quick. This is where lint-staged comes in.

#Lint Staged

lint-staged provides a way of running your linters, code formatters or any other tools on staged files only. Install it by running the following command.

1npm install lint-staged --save-dev

#The pre-commit hook

Now you need to edit the pre-commit hook in our package.json file, to run lint-staged instead of running Pint directly.

1{
2    "scripts": {
3        "pre-commit": "lint-staged"
4    }
5}

You also have to add the lint-staged section to your package.json file. From now on, you will define all the commands you want in there.

1{
2    "lint-staged": {
3        "*.php": "./vendor/bin/pint",
4    }
5}

Now whenever you run a git commit you should see Pint only running across the files you staged. Of course, you need to stage some matching files first.
Run a git commit to try this, you have to be quick to catch the files, lint-staged runs across.

1git commit -m "Test"
2 
3> pre-commit
4> lint-staged
5 
6✔ Preparing lint-staged...
7✔ Running tasks for staged files...
8✔ Applying modifications from tasks...
9✔ Cleaning up temporary files...

This is how the command looks like while executing.

1❯ Running tasks for staged files...
2  ❯ package.json — 2 files
3    ❯ *.php — 1 file
4      ✔ ./vendor/bin/pint

You successfully implemented your first proper git commit hook!

#Adding services

To run specific services like ESLint, Larastan or PHPStan, Laravel Pint and Prettier on commit you need to follow the same basic process for each one.
Open your package.json file and edit your lint-staged section. Add the file matching pattern as a key and the command as a value.

#A single service

1{
2    "lint-staged": {
3        "*.php": "./vendor/bin/pint"
4    }
5}

Runs Laravel Pint for every staged file ending in .php.

#Multiple services

1{
2    "lint-staged": {
3        "*.php": [
4            "./vendor/bin/pint",
5            "./vendor/bin/phpstan analyze"
6        ]
7    }
8}

Runs Laravel Pint and PHPStan for every staged file ending in .php.

#Multiple file types

1{
2    "lint-staged": {
3        "*.{js,vue}": "eslint --cache --fix",
4    }
5}

Runs ESLint for every staged file ending in .php or .vue.

#My configuration as an example

This is my configuration for lint-staged. As you can see I am running Laravel Pint, PHPStan (with Larastan), ESLint and Prettier here.

 1{
 2    "lint-staged": {
 3        "*.php": [
 4            "./vendor/bin/phpstan analyze",
 5            "./vendor/bin/pint"
 6        ],
 7        "*.{js,vue}": [
 8            "eslint --cache",
 9            "prettier --list-different --write"
10        ]
11    }
12}

The code formatters Laravel Pint and Prettier are using their respective write options to fix the code issues automatically. ESLint and PHPStan are only listing their issues, so the commit cancels if any errors are found.

#Recap

This is a short recap of the files you should have in your projects.

Your package.json file (excerpt).

 1{
 2    "devDependencies": {
 3        "husky": "^8.0.3",
 4        "lint-staged": "^13.1.2",
 5    },
 6    "scripts": {
 7        "prepare": "husky install",
 8        "pre-commit": "lint-staged"
 9    },
10    "lint-staged": {
11        "*.php": [
12            "./vendor/bin/phpstan analyze",
13            "./vendor/bin/pint"
14        ],
15        "*.{js,vue}": [
16            "eslint --cache",
17            "prettier --list-different --write"
18        ]
19    }
20}

Your .husky/pre-commit file.

1#!/usr/bin/env sh
2. "$(dirname -- "$0")/_/husky.sh"
3 
4npm run pre-commit