Oftentimes, when the pressure is too high and the deadlines are approaching fasts, We sometimes miss following the best practices, running our tests, removing unused imports, or checking if the build is correct. We can avoid or reduce these by setting up automated tasks in our react project with husky.

pre-commit hook

Git provides us with a number of hooks, that we can use to run some tasks, before/after certain actions are performed, for eg to run certain tasks before or after the code is committed or pushed to the server. For our use case pre-commit is the perfect candidate as we want to run tasks before the code is committed.

husky

Husky is a lightweight package that will help us to define what tasks to run and for what hooks, adding husky to your react project is easy

npx husky-init && yarn              

or

npx husky-init && npm install

It will install husky and create .husky folder with required files for the hook, by default, it will automatically create pre-commit hook file

Replace npm test with inside the pre-commit hook file with

yarn test  --watchAll=false

--watchAll=false flag will run the tests without the watch mode.

That's it, trying making a new commit, now and you will see all the tests ran automatically, and only if all the tests pass the commit is made, on failing the code is not committed.

hooray, we have successfully set up husky in our react application with a pre-commit hook, now let's take it a step forward and harness the power of eslint to automatically fix our code, as much as possible.

ESLint

ESLint can analyze our code and identify patterns, bugs and help us to write more consistent code, If you've created your application with create-react-app it's already set up and installed in your application. To output warnings & fix whatever is possible we can the following command, we need to add the following command to scripts in our package.json

"eslint-fix": "eslint --fix",

eslint --fix will fix every rule violation it is capable of fixing, actually overwrite the code, and print out any warnings or errors it was incapable of fixing.

Now let's add the above script inside our pre-commit hook file, before running the tests to fix or output any errors in the code.

File: .husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn eslint-fix
yarn test  --watchAll=false

pre-push hook

As the name suggests, it runs before the code is pushed. Before, pushing it's always wise to check whether the app is still able to create build or not. To add the hook it's easy, as follows

npx husky add .husky/pre-push 'yarn build'

We can take this forward, and update the .eslint rules as per our requirements, add lint-staged to only lint staged files or remove unused variables but that's a separate topic for another time. Do let me know below your strategies, for maintaining the coding standard or avoiding bugs.

Thanks.