Blog series
This blog post is a series. You can see the other posts on the link below.
- [React] Prettier
- [React] ESLint
- [React] Husky, lint-staged
- [React] GitHub Actions
Outline
On the previous blog posts, we’ve seen how to configure Prettier and ESLint, and how to use them on the React project with create-react-app.
In this blog post, I will show you how to use husky and lint-staged to use Prettier and ESLint.
Prepare project
To use husky and lint-staged on React, we’ll create the simple project with create-react-app. If you want to know more details about create-react-app, see the link below.
Execute the command below to create a new React project that we’ll use for husky and lint-staged.
npx create-react-app husky_lint_example --template=typescript
I use TypeScript to develop React, so I use the --template=typescript option to create the React project. And then, you should configure Prettier and ESLint to this React project. If you don’t know how to configure Prettier and ESLint, see the links below.
husky
Git has the Hook feature. You can configure the Hook to the event, and execute the script by Hook when Git gets specific events(like commit, push, etc).
husky helps you use Git Hook simply.
- husky official site: https://typicode.github.io/husky/
Execute the command below to install husky.
npm install --save-dev husky
lint-staged
lint-staged, is normally used with husky, helps you execute specific commands to Staged files on Git.
- lint-staged official page: https://github.com/okonet/lint-staged
Staged files on Git means the files are modified and added by you execute the git add command. If you modify Staged files, you should execute git add again to add them.
lint-staged helps you not execute the gid add command when you modify Staged files.
Execute the command below to install lint-sgated to use it with husky.
npm install --save-dev lint-staged
configure husky and lint-staged
Next, let’s configure husky and lint-staged to execute the ESLint and Prettier when you commit to Git.
Open the package.json file and modify it like the below to configure husky and lint-staged.
{
...
"scripts": {
...
},
"lint-staged": {
"src/**/*.{ts,tsx}": [
"eslint --ext .tsx --ext .ts ./src --fix"
],
"./src/**": [
"prettier --write ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
...
}
After modifying, when you commit to Git, lit staged is executed by pre-commit of husky, and ESLint and Prettier are executed by lint-staged.
Completed
Done! we’ve seen how to configure husky and lint-staged to execute ESLint and Prettier on the React project. Please use husky and lint-staged to execute automatically ESLint and Prettier!
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
