DEV Community

Sal Hernandez
Sal Hernandez

Posted on

Git Hooks aren't so Ruff! I'll tail you all about it!

Yo dog! I’m going to tail you how to use git hooks (with yarn/npm) to help maintain code quality across your team before stuff gets pushed to a remote repository (ex. Github).

Picture of doge wearing glasses and code words around him

If you aren’t familiar with Git Hooks, they’re a way to execute scripts before committing, after committing, before pushing, after pushing, etc. In the past when I looked into this, it was kind of a pain to set up locally, and then even more of a pain setting it up across a team. 😣

I came across a library on GitHub called husky, that makes it super easy to implement Git Hooks in your project using npm!Â

Screen shot of husky Github title

Heres’s a super quick walkthrough of husky.
yarn add husky --dev or npm install husky --save-dev
In your package.json add husky hooks in the scripts object.

{
  "name": "husky-demo",
  "version": "1.0.0",
  "description": "Husky demo, woof woof.",
  "main": "index.js",
  "scripts": {
    "precommit": "yarn lint",
    "prepush": "yarn test",
    "test": "jest",
    "lint": "eslint . --cache",
  },
  "author": "🐶",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

precommit

With this hook, whenever I commit (ex. git commit -m “woof, woof"), the script precommit will be executed before git commit runs. In this scenario, we have eslint run, so if any linting errors occur then git commit will not run and those errors would need to be addressed before trying to commit again.

prepush

With this hook, whenever I attempt to push new commits (ex. git push origin master) to Github, the script prepush will be executed before git push runs. In this scenario, we have the script run our test suite, so if any tests fail, it would prevent the code that broke the tests from making it's way up to Github.


Summary

Doing things like this is really cool because it can prevent stuff like linting errors &/or broken tests from getting to master if you're like me who's working on a project by yourself 😛, but this is also beneficial when working in a pull request flow because it helps really focus on reviewing the actual code & not having to go back & forth on things that the linting tool could have caught.

I've always wanted to do stuff like this in previous projects but never did because it wasn't a quick simple thing to do, but then if I did set it up, would it still work consistently across the team regardless of their operating system? 🤔 Then when I stumbled across husky & saw how simple it was to implement into my npm project I was hooked! I've been using it for a couple weeks now & it's saved me a bunch of times already! Including almost accidentally pushing broken tests to master! 😅


Special thanks to typicode for creating this awesome open source tool! Thanks dog!😉

Discussion (4)

Collapse
ben profile image
Ben Halpern

I literally LOL's at this. Great punnage.

Collapse
clickclickonsal profile image
Sal Hernandez Author

haha, thanks! I love puns! 😊

Collapse
nickytonline profile image
Nick Taylor (he/him)

I find lint-staged compliments husky really well, e.g. github.com/nickytonline/minobo/blo...

Collapse
clickclickonsal profile image
Sal Hernandez Author

Yes! I agree! I found out about lint-staged about a month after writing this blog post.