Set up git hook in a multi-package monorepo

What’s a git hook and how we can manage them? Let’s assume that you already know what git hook is, where they must be placed and how they can be managed. In case you don’t I would try to fill you in. Git hook is a script that’s run when we perform specific git operations in our repository. Here’s a list of some git hooks: pre-merge-commit; prepare-commit-msg; commit-msg; post-commit.  The full list of hooks can be found here. Git hooks must be placed in your repository in .git/hooks folder. So, if you want to set up, e.g., a pre-commit hook, you should create pre-commit file in that folder. For instance, I might have a pre-commit git hook with the following script: echo "My favourite band is Red Hot Chili Peppers". And once I commit it's going to be triggered: There are many libraries that help developers manage git hooks: Husky, Simple git hooks, Lefthook, etc.. The problem Recently I needed to set up a pre-commit hook to lint staged files within the following git repository: Git repo contains of 100+ Node.js apps, the repository itself is not an app. Each project already contained its own eslint config, given different code owners all existing configs must be preserved. Files must be linted even if changes are made to multiple projects. I bet you got the idea, but here's how its structure looked like: project/ src/ project-1/ package.json project-2/ package.json project-3/ package.json ... .gitingnore README.md I am not going to create 100 of demo apps just to show you my pain, a couple of demo projects should be enough, I believe. This is our starting point, the project now looks like this: project/ src/ demo-project-1/ package.json demo-project-2/ package.json .gitingnore README.md To solve the problem we are going to use: npm workspaces eslint lint-staged husky Let’s get job done! Npm workspaces According to documentation: Workspaces is a generic term that refers to the set of features in the npm cli that provides support to managing multiple packages from your local file system from within a singular top-level, root package. Given that I want to have all listed packages installed only once, having workspaces set up in repository’s root with eslint, lint-staged & husky as dev dependencies would do the job. In order to quickly create package.json run npm init in the root. Add workspaces property to the newly created package.json file, saying that all apps inside the src folder are now parts of workspaces. At this point the file looks as follows: { "name": "monorepo-with-pre-commit-git-hook", "version": "1.0.0", "main": "index.js", "workspaces": ["src/*"], "author": "eduard mavliutov", "license": "ISC", "description": "" } Inner packages won’t even notice that each of them now is a part of workspaces. Eslint Let’s ensure all packages use the same version of eslint by installing eslint & eslint-config-airbnb-base dependencies in the root package.json. Lint-staged To lint staged files we’re going to use the lint-staged package: it’s easy to configure and supports different configurations per each project. We are going to install it in the root project: npm install --save-dev lint-staged Ok, now let’s configure it for linting js files. There are multiple ways to do that, you can check it out yourself. We will go with lintstagedrc.json file per project. That option suits our needs the most: lintstagedrc.json can be updated separately per project; lintstagedrc.json can have different sets of tasks per project. For demo purposes each project will use the same config: { "**/*.{js,ts}": [ "eslint --fix" ] } To run the package we need to use npx lint-staged command, we’re going to use the command in the pre-commit hook, but we can give it a go now: Husky

Feb 24, 2025 - 11:12

Set up git hook in a multi-package monorepo

What’s a git hook and how we can manage them?

Let’s assume that you already know what git hook is, where they must be placed and how they can be managed. In case you don’t I would try to fill you in.

Git hook is a script that’s run when we perform specific git operations in our repository. Here’s a list of some git hooks:

pre-merge-commit;
prepare-commit-msg;
commit-msg;
post-commit.

The full list of hooks can be found here.

Git hooks must be placed in your repository in .git/hooks folder. So, if you want to set up, e.g., a pre-commit hook, you should create pre-commit file in that folder.

For instance, I might have a pre-commit git hook with the following script: echo "My favourite band is Red Hot Chili Peppers". And once I commit it's going to be triggered:

There are many libraries that help developers manage git hooks: Husky, Simple git hooks, Lefthook, etc..

The problem

Recently I needed to set up a pre-commit hook to lint staged files within the following git repository:

Git repo contains of 100+ Node.js apps, the repository itself is not an app.
Each project already contained its own eslint config, given different code owners all existing configs must be preserved.
Files must be linted even if changes are made to multiple projects.

I bet you got the idea, but here's how its structure looked like:

project/
 src/
  project-1/
   package.json
  project-2/
   package.json
  project-3/
   package.json
...
.gitingnore
README.md

I am not going to create 100 of demo apps just to show you my pain, a couple of demo projects should be enough, I believe.

This is our starting point, the project now looks like this:

project/
 src/
  demo-project-1/
   package.json
  demo-project-2/
   package.json
.gitingnore
README.md

To solve the problem we are going to use:

npm workspaces
eslint
lint-staged
husky

Let’s get job done!

Npm workspaces

According to documentation:

Workspaces is a generic term that refers to the set of features in the npm cli that provides support to managing multiple packages from your local file system from within a singular top-level, root package.

Given that I want to have all listed packages installed only once, having workspaces set up in repository’s root with eslint, lint-staged & husky as dev dependencies would do the job.

In order to quickly create package.json run npm init in the root.
Add workspaces property to the newly created package.json file, saying that all apps inside the src folder are now parts of workspaces.

At this point the file looks as follows:

{
  "name": "monorepo-with-pre-commit-git-hook",
  "version": "1.0.0",
  "main": "index.js",
  "workspaces": ["src/*"],
  "author": "eduard mavliutov",
  "license": "ISC",
  "description": ""
}

Inner packages won’t even notice that each of them now is a part of workspaces.

Eslint

Let’s ensure all packages use the same version of eslint by installing eslint & eslint-config-airbnb-base dependencies in the root package.json.

Lint-staged

To lint staged files we’re going to use the lint-staged package: it’s easy to configure and supports different configurations per each project.

We are going to install it in the root project:

npm install --save-dev lint-staged

Ok, now let’s configure it for linting js files. There are multiple ways to do that, you can check it out yourself. We will go with lintstagedrc.json file per project. That option suits our needs the most:

lintstagedrc.json can be updated separately per project;
lintstagedrc.json can have different sets of tasks per project.

For demo purposes each project will use the same config:

{
  "**/*.{js,ts}": [
    "eslint --fix"
  ]
}

To run the package we need to use npx lint-staged command, we’re going to use the command in the pre-commit hook, but we can give it a go now: