Skip to content

Horacio Herrera

Setup lint-staged on a Monorepo

english, tutorial1 min read

TLDR: Here's the repo I setup where is everything for you to check out.

For my new project (more news soon) I need it to setup a monorepo (M O N O R E P O) and I wanted to check some tooling in order to validate and check multiple things before pushing to Github.

What I found out was that in order to setup lint-staged and husky correctly, it needs to be installed only in teh root of the project. If you have both tools installed on each package, it will not run when you commit. Thanks to yarn workspaces, I can still run my pre commit scripts on each package from the root, al automated using husky and lint-stages. Here's how:

  • go to your monorepo root
  • yarn add lint-staged husky --ignore-workspace-root-check (you need the --ignore-workspace-root-check flag so the packages will be installed in the root of the project)
  • Setup lint-staged and husky the way you prefer (either in the package.json file or with separate rc files: .huskyrc and .lintstagedrc). You can see more about these tools on their own repos
  • setup your pre-commit script on every package. the script name needs to be the same. In this example I'm using lint as my pre commit script.
  • setup a lint script in the root's package.json with yarn workspaces run lint.

and that's it!.

lint-staged will run the root's lint script, and Yarn workspaces will run each package lint script using the yarn workspaces run lint command.

In the repo you'll find also other tools setup (like prettier, npm-run-all, eslint, tsdx and more). Please feel free to ask me any questions about it on Twitter and hope this will help you!

Big kudos to @kentcdodds because most of the pre commit scripts you'll see in the repo comes from his testing javascript course!. Also the party corgi crew (Join us!) which are always big supporters of my work :love:

© 2020 by Horacio Herrera. All rights reserved.