PreCommit Hooks!

Setup pre-commit hooks for an existing project

Photo by Efe Kurnaz on Unsplash

A Pre-commit hook is run just before a commit is added to a new revision. They are mainly used to point out issues in code such as a missing semicolon, trailing white spaces, and debug statements. Often a pre-commit hook can be used to run your test before a new commit is added, just in case there is a defined threshold limit for the test, and if the coverage is less than the threshold limit the test would fail — this, in particular, helps keep code coverage high throughout development.

To set up our Pre-commit hook we would be using Husky which describes itself as — ‘Git hooks made easy’.

Let’s get started by first installing husky

npm install husky
or
yarn add husky

The hooks can be added into your package.json file and can either be used to run your test or lint your code.

Linting your code (React + Tslint):

Using Pre-commit hook to lint your code is quite straightforward, for example when using Typescript in a React project you’d set up rules in your Tslint for linting your code. To ensure that your code follows the specified rule in your Tslint you can add the following to the scripts section of your package.json

"scripts": {
   "lint:ts": "tslint --project tsconfig.json --config tslint.json",
 }

Now to ensure that any new revision adheres to the standard you have to add this to your package.json so that it can be referenced by husky

"lint-staged": {
    "*.ts": "yarn lint:ts",
    "*.tsx": "yarn lint:ts",
 }

and then calling husky to lint your code before adding a new revision would be like this:

"husky": { 
   "hooks": {
      "pre-commit": "lint-staged"
   }
 }

Linting your code (Vue + Eslint):

This is quite similar and straight forward to the above method, especially if you bootstrapped your project with the vue-cli-3 you would already have a lint script in your package.json

"scripts": {
   "lint": "vue-cli-service lint",
}

So all that’s left to do, is to go ahead and install husky just like we did earlier and then we can add our husky command to the package.json just like this:

"lint-staged": {
   "*.js": [ "lint" ],
    "*.vue": [ "lint" ]
}

Husky command — lints file and runs the test afterward:

"husky": { 
   "hooks": {
      "pre-commit": "lint-staged && yarn run test:unit"
   }
 }

Screenshot of husky linting and running test before adding a revision if everything is fine — in a Vue project:

screenshot of Husky running in a Vue project

From the screenshot above you can see that husky runs the linters against staged files before it goes to add the new a revision.

Update:

Based on the responses to this article, if you get this error:

sh: lint-staged: command not found

all you need to do is install the lint stage package:

npm i lint-staged --save-dev or yarn add lint-staged

Conclusion:

This is just a way to make development easier while also making sure that everyone adheres to the project guidelines. I hope this has been able to help you get started with using Git hooks in your projects.

Thank you for reading. As always feedback, suggestions, etc are welcomed.

For more articles like this, visit: My Life As A Software Engineer Blog