[2021] Setting up Husky pre-commit hook with ESLint, Prettier and lint-staged for React and React Native.
Tags: react, reactnative, javascript, beginners
Published: 2019-12-09 09:55:52


Hello folks. I hope you all are doing well.
In this post, we will talk about how you can setup [Husky](https://github.com/typicode/husky) pre-commit hook with [ESLint](https://eslint.org/), [Prettier](https://github.com/prettier/prettier) and [lint-staged](https://github.com/okonet/lint-staged) to avoid bad commits and properly format code before committing. So let's get into it.

### What is Husky?
Husky lets us run commands or script before committing or pushing our code to git. There are a lot of other use cases of Husky too but we will only be using pre-commit hook for this article.

### What is ESLint?
ESLint is a tool that can analyze our code and find errors in that code using ESLint rules. It can also fix some errors on its own.

### What is Prettier?
Prettier is an opinionated code formatter that can format our code with the help of rules that you set or defaults are used.

### What is lint-staged?
lint-staged can run multiple linters against staged git files which in our case are ESLint and Pretttier.

### Setup new React or [React Native project](https://www.botreetechnologies.com/react-native-development).
For React use 
<code>npx create-react-app demo</code>
<code>cd demo</code>

For React Native use 
<code>npx react-native init demo</code>
<code>cd demo</code>

### Let's install some necessary libraries.
<code>npm i -D husky lint-staged eslint-config-airbnb prettier</code>

Here we are saving these modules as devDependencies to specify that these are only required in the development and not in runtime. I am using [Airbnb](https://github.com/airbnb/javascript)'s pre config file for ESLint. You can also go plain if you want to setup all ESLint rules by your self or you can also extend multiple pre configs like this.

### Setting up ESLint
Replace or create .eslintrc.js file with the following code. If you have created a React project then remove "eslintConfig" from the package.json file as we have created a separate configuration file for the ESLint.
{% gist https://gist.github.com/PRO-KlauS/af1f901ea3bee23b04fdad568ec88d43 file=.eslintrc.js %}
It is advisable to extend "react-app" for React projects and "@react-native-community" for React Native projects. These files are automatically installed so you don't need to worry about them. Just append this to the start of the array in the extend option in the file.

### Setting up Prettier
Replace or create .prettierrc.js file with the following code.
{% gist https://gist.github.com/PRO-KlauS/f73d80ba53831c730e92164a15b21f3a file=.prettierrc.js %}

### Setting up Husky pre-commit hook and lint-staged
In the latest versions of Husky we need to enable Git Hooks and then create and add the pre-commit hook. To do that run the following commands in the terminal.
<code>npx husky install</code>
<code>npx husky add .husky/pre-commit "npx --no-install lint-staged"</code>

**Make sure to commit the auto-generated husky folder to your Git repo.**

The above code will run lint-staged command against the staged files before committing. **Make sure to run <code>npx husky install</code> if you clone your Husky configured git repo.** 

So now let's add the lint-staged in our package.json file.

Open your package.json file and add the code that I have specified at the same level as dependencies.
{% gist https://gist.github.com/PRO-KlauS/358545eecc5172503617360751f89e79 file=package.json %}

The above code will run Prettier and ESLint rules against all js,jsx,ts,tsx staged files. You can also specify more file extensions or you can write a script for a specific folder you want.

### Read Also: [How React Native Improves Developer Productivity](https://www.botreetechnologies.com/blog/how-react-native-improves-developer-productivity)

So yeah that's it. Now when you will try to commit any changes, ESLint and Prettier rules will execute and it will format your code and give you errors if there are any and stop you from causing any bad commits.

**Note: If you get dependency errors for <code>eslint-plugin-jsx-a11y</code> or <code>eslint-plugin-import</code> while commiting, then also install them as devDependencies.**

At [BoTree Technologies](https://www.botreetechnologies.com/), we build web and mobile applications to add value to our client’s business. We align ourselves to ensure that our client benefits the most out of our engagement.

We work in [Ruby on Rails](https://www.botreetechnologies.com/ruby-on-rails), [Python](https://www.botreetechnologies.com/python), Java, [React](https://www.botreetechnologies.com/react-native-development), Android, iOS and [RPA](https://www.botreetechnologies.com/robotic-process-automation) as well.

Drop us a line to discuss how can we help take your business to the next level. Reach out to learn more about the [software development companies in NYC](https://www.botreetechnologies.com/usa/web-development-company-new-york) for the various ways to improve or build the quality of projects and across your company.