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

#javascript #productivity #git

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).

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!Â

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"
}

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!ðŸ˜‰