Simple Git Hooks with Create React App, ESLint and Husky

Oskar
Oskar
Aug 14 · 4 min read

Git hooks are scripts that Git executes before or after events such as commit, push and many more. It’s a really cool and quick way of validating your code before git lets you check it in.

We will take a look at a simple example of implementing git hooks on react application using Husky library, we will make git hook that validates your changes by invoking ESLint against your code before every commit.

Only precondition is to have Node ( well, and Git ) installed on your machine. I will assume that you know how to create git repository, init your repository in the same directory where you plan to put react app.


Let’s start with react app, there are many templates online for creating applications in react, but the most popular is Facebook's very own create-react-app.

Create React app requires no configuration and it creates very simple react application in a single command:

Now you have a react application and just to verify that everything works you can run `npm run start` from your terminal and navigate to: http://localhost:3000


Alright, now a fun part, let’s set up ESLint and Husky.

Let’s install eslint globally on your machine by running “npm install -g eslint” from your terminal.

Next, navigate to root directory of your react app, it’s the place where package.json file is located and init eslint from your terminal.

Answer questions about your eslint usage, framework you are using, code style etc. Set of questions is changing over time as eslint evolves so I’m not going to post them here, since in a few months they might be outdated.

Just make sure to select React for your framework.

For How would you like to define a style for your project? Choose: Use a popular style guide

And for Which style guide do you want to follow? Choose: Standard (https://github.com/standard/standard)

If you run eslint now by runnig “eslint src/**/*.js” from your terminal, you will see quite a lot of errors and warning (probably more than 50).

Let’s fix them!

Most of the errors (90%) can be fixed by eslint itself, run eslint with fix flag:

You should only have handful of errors left and they should look like this:

To fix these errors we have to tell eslint to take into an account that our app is running on create-react-app and that we are using jest as test runner.

Open you eslint config file: .eslintrc.* (* depending on config format you chose, I recommend json format)

There are few customization we need to do in .eslintrc.* file

In “env”: section add jest , not adding jest will make eslint error out on jest specific functions like describe and it:

In “extends”: section add “plugin:react/recommended”:

And you are all set, if you try to run eslint now it will pass without errors.


You don’t really want to always run linter manually from terminal, add npm scripts that run linter:

Open package.json file, in “scripts”: section add new eslint scripts

You can run these scripts with npm by calling:

You should be all set on ESLint at this point, right now it’s really easy to set up Git Hooks using Husky.


For the last part let’s finally setup Husky!

Install Husky by navigating to root directory ( it’s the one where package.json is located ), open terminal and run

When it’s successfully installed, add “husky”: section in package.json

Now we have Git Hooks for commit and push actions.

Every time you run git commit Husky will run “pre-commit” script so it will run: “npm run lint:fix” and it will only let you commit your changes if validation passes. Similar for git push.


What if we want to run both test and lint scripts pre commit and pre push?

( Or any other more complex script. )

We can do that by adding new script in package.json:

Setting CI=true is for making sure jest runs tests only ones and not run them in watch mode, since watch mode does not make sense for git hooks. Syntax above is for windows, on mac it should be something like:

Now all we need to do is use new script for pre-commit or pre-push hook:

Congratulations! Now you have Git hooks that will run your tests and lint your code automatically each time you commit your code.

Pretty handy, huh?

Oskar

Written by

Oskar

linkedin.com/in/oskarvat

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade