Lint and Git hooks Settings

Starting with React

Just by using Lint and git hooks at the start of the project, you can develop better

I’m going to start with the React project
Let’s make a project first!

Husky, add a lint-staged package

Install husky

Just in case
The version of the package you installed is as follows
Keep that in mind

Add a lint-stage configuration file

.lintstagedrc.json

You can register multiple files to scan in a pattern in Lint
It can be complicated if you set it too detailed, so I’ll just keep it simple 🙏🏻

It’s not difficult to register as a pattern, so you can find out right away if you search it!

Adding a Lint Settings File

.eslintrc

There are more explanations in the official document, so you can add more parts you need
I’ll leave you a link

• https://eslint.org/docs/rules

Let’s check the ESLint

There’s no error

You don’t know if it works or not..
I’ll make an error and check it out

Let’s modify App.js

I didn’t import React, so I added it to App.js
And there’s an ‘a’ variable, but we’re not using it right now

Let’s check it out again

I’ve only modified App.js, but other files are also getting lint errors

- App.test.js
- index.js
- reportWebVitals.js
I don’t want to modify these files, so I’ll make an exception so that Lint doesn’t check them

When you’re actually working on a project, there are times when you have to deal with exceptions

In case of this, I’ll show you how to exclude the files that are stuck in the Lint except for App.js as shown above

Add .eslintignore

I’ll do the lint test again

I got the results that I wanted

You can fix it automatically through fix on the ESLint
I didn’t change it using the `-no-fix` option
I’ll fix it using `-fix`

If you check the App.js again

A variable with quotations changed to singlequote

It would be troublesome to revise it one by one every time..

There is also a plug-in called Pretier that automatically format the code
Please refer to the link below

• https://prettier.io

Let’s check the Lint before committing using husky

Modify the App.js again

Added variable b
I’m going to commit!

I failed because I checked the Lint before committing and failed
It’s the result we want, right?

I’m going to erase the variables that aren’t being used in App.js

I’ll commit again

Commit successfully

We can now force a better code
I’ll show you a more comfortable way 😉

If you’re using vscode, you can also use the plugin to check

Search the plugin for ESLint and install it

After installation is complete

It looks like this

After it’s installed, you can see the error and the explanation comes out
you’ll be able to use it more easily

Enjoy! 🖐🏻

—

Reference:
https://github.com/ninezero90hy/human_error_prevention