DEV Community

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

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

Yash Kalaria on December 09, 2019

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...
Collapse
 
knyto2 profile image
Info Comment hidden by post author - thread only accessible via permalink
Kenny To

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.

Collapse
 
klaus profile image
Yash Kalaria

Updated for 2021 with all the fixes.

Collapse
 
prateekmaheshwari profile image
Info Comment hidden by post author - thread only accessible via permalink
Prateek Maheshwari

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?

Collapse
 
klaus profile image
Yash Kalaria

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

Collapse
 
prateekmaheshwari profile image
Prateek Maheshwari

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.

Thread Thread
 
klaus profile image
Yash Kalaria • Edited

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)$'"

Thread Thread
 
maaverik profile image
Nithin • Edited

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.

Thread Thread
 
klaus profile image
Yash Kalaria

Updated for 2021 with all the fixes

Collapse
 
adityatarale profile image
Aditya_Tarale

i am getting this error, did the same procedure

.husky/pre-commit: 4: npx: not found
husky - pre-commit hook exited with code 127 (error)

Collapse
 
klaus profile image
Yash Kalaria

Install npx first and then follow the same.

Collapse
 
adityatarale profile image
Aditya_Tarale

command to install npx ?

Thread Thread
 
klaus profile image
Yash Kalaria

npm i -g npx

Thread Thread
 
adityatarale profile image
Aditya_Tarale

Thanks

Some comments have been hidden by the post's author - find out more