loading...
Cover image for Setting up Husky pre-commit hook with ESLint, Prettier and lint-staged for React and React Native.
BoTreeTechnologies

Setting up Husky pre-commit hook with ESLint, Prettier and lint-staged for React and React Native.

klaus profile image Yash Kalaria Updated on ・3 min read

Hello folks. I hope you all are doing well.
In this post, we will talk about how you can setup Husky pre-commit hook with ESLint, Prettier and 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.

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.

For React use
npx create-react-app demo
cd demo

For React Native use
npx react-native init demo
cd demo

Let's install some necessary libraries.

Using npm
npm install --save-dev husky lint-staged eslint eslint-config-airbnb prettier

Using yarn
yarn add --dev husky lint-staged eslint eslint-config-airbnb prettier

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's pre config file for ESLint. You can also go plain if you want to setup all ESLint rules by your self.

Setting up ESLint

Replace or create .eslintrc.js file with the following code.

Setting up Prettier

Replace or create .prettierrc.js file with the following code.

Setting up Husky pre-commit hook and lint-staged

Open your package.json file and add the code that I have specified at the same level as dependencies.

The above code will run Prettier and ESLint rules against all js,jsx,ts,tsx files in the src directory. 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

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

At BoTree Technologies, 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, Python, Java, React, Android, iOS and RPA 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 for the various ways to improve or build the quality of projects and across your company.

Posted on by:

klaus profile

Yash Kalaria

@klaus

Just an ordinary React and React Native developer.

BoTreeTechnologies

We are in the business of offering expert software engineering and development services for bespoke applications.

Discussion

pic
Editor guide
 

Just a query, you said the above code will run Prettier and ESLint rules against all js,jsx,ts,tsx files in the src directory OR will it run for all the specified files in src which are STAGED?

 

It will run for all the js,jsx,ts,tsx files in the src directory whether they are staged or not.

 

How can we make it run for only staged files. I am stuck with this in my project because the eslint takes too much time as it runs on all files in the directory.

Try replacing your "lint" command in package.json with below command and if that works then you can do something similar for prettier too.

"lint": "eslint src/**/**/*.js --fix-dry-run git diff --diff-filter=d --cached --name-only | grep -E './**/*.(js|jsx|ts|tsx|css|scss|md)$'"

Thanks for the post Yash, it was very helpful. Just wanted to point out that I don't think this is necessary. Correct me if I'm wrong, but from the lint-staged documentation and from what I see from my own project after setting this up, linting runs for only the files which are staged and also match the specified glob pattern.

"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"npx prettier --write",
"eslint --ext .js,.jsx --fix-dry-run"
]
}

I used this setting and it only throws lint errors for staged changes while I commit even though there are other unstaged files with lint errors.

I think the line to note is
"eslint src/*.js --fix-dry-run" which you've mentioned.

I've used "eslint --ext .js,.jsx --fix-dry-run" without specifying a target, so that it doesn't run for all files in the src directory, only the staged files that are fed into this command by lint-staged.

 

I had dependencies issues with eslint as a devDependency, since React requires version 6.8.0. Not sure why it didn't resolve itself. Just incase anybody runs into this in the future., you can skip installing eslint and let the project manage the dependencies by itself.