세미콜론과 같은 스타일 불일치, 작은따옴표와 큰따옴표가 혼합된 문자열 선언 또는 잘못된 들여쓰기 때문에 코드를 읽기 어렵게 된 적이 있습니까?

코드를 작성하는 것은 쉽지만 훌륭한 코드를 작성하는 것은 쉽지 않습니다.
Linting 및 서식 지정을 통해 불량 코드가 저장소에 푸시되는 것을 방지할 수 있습니다.

Git 후크는 Git이 커밋, 푸시와 같은 이벤트 전후에 실행하는 스크립트입니다. 코드를 검증하는 정말 멋지고 빠른 방법입니다.



GitHub 저장소Here를 찾을 수 있습니다.

훅이란 무엇입니까?

후크는 Git 리포지토리에서 특정 이벤트가 발생할 때 자동으로 실행되는 스크립트입니다. 여기서는 pre-commit 를 사용합니다.

pre-commit: 이 후크는 커밋 메시지를 입력하기 전에도 먼저 트리거됩니다.

다른 많은 것들이 있습니다. Husky의 문서를 보도록하겠습니다.

### ESLint와 Prettier를 사용하는 이유

앱을 빌드할 때 최상의 표준 및 코드 품질을 보장하는 자동 및 수동 도구를 잘 설정하는 것이 중요합니다. 각 프로젝트에는 이러한 요구 사항을 충족하는 보푸라기 도구가 있어야 합니다.

도구

🦮 Husky는 프로젝트 내에서 후크를 쉽게 만들고 공유할 수 있는 라이브러리입니다.

🎨 Prettier: 선호도에 따라 코드 형식을 일관되게 유지합니다.

✅ ESLint는 JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 합니다

.

🚧 린트 스테이지: 프로덕션 코드를 깨끗하게 유지하기 위해 커밋이 발생하기 전에 코드를 린트합니다.

시작하기

React 앱부터 시작하겠습니다. 하지만 Vue JS, Angular...와 같은 다른 기술을 사용할 수 있습니다.

단일 명령으로 가장 간단한 방법으로 React 애플리케이션을 생성합니다.

npx create-react-app test-husky

이제 React 애플리케이션이 있어야 합니다. 터미널에서 npm run start를 실행하고 http://localhost:3000으로 이동할 수 있습니다.

ESLint 및 Prettier 추가

ESLint는 기본적으로 'create-react-app'에 이미 설치되어 있지만 ESLint와 Prettier 모두에 대한 사용자 정의 구성 파일을 생성합니다.

Prettier와 eslint-config-prettier를 설치하고 루트 프로젝트 디렉토리에 구성 파일을 만들어 봅시다.
javascript
npm install --save-dev --save-exact prettier eslint-config-prettier


Create an ESLint config, select JSON format

javascript
npm init @eslint/config


Add this config in your .eslintrc.json 파일:
javascript
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"indent": ["warn", "tab"],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}


A lot more errors pop in the code.
That is ESLint enforcing our selected code style based in the config file.

Before we fix these errors, let's create the Prettier config in root project.

javascript
touch .prettierrc.json


Add this config in your .prettierrc.json 파일:
javascript
.prettierrc.json
{
"tabWidth": 2,
"useTabs": true,
"printWidth": 80,
"semi": true,
"trailingComma": "es5",
"jsxSingleQuote": true,
"singleQuote": true
}


Update eslintrc.json 포함하다 prettier:
javascript
.eslintrc.json
...,
"extends": [
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
],
...,


허스키 설정

So, now if there are some problems with the code, we know how to check them. However, we are sometimes too busy to fix it or we just miss it.

In order to force people to fix the code before commit it, we can use Husky. We need Husky to run a command before git commit runs. In this case, we use Husky to run ESLint and Prettier.

If a problem is found, Husky will stop the process and commit will fail. If no problem is found, git commit will run.

Install Husky :
javascript
npm install --save —dev husky


Initialize our pre-commit hooks run:

javascript
npx husky-init


This command will freshly add Husky to our project in the .husky folder.

Inside this folder, we can create files that match the git hooks we want to use.

Let's install lint-staged:

javascript
npm i --save-dev lint-staged


Now go to package.json and write the following script pre-commit which runs the lint-staged in our project.

javascript
package.json
"scripts": {
...
"pre-commit": "lint-staged",
"prepare": "husky install"
},


Now create file named .lintstagedrc 우리의 루트 디렉토리에 그리고 우리가 lint-staged가 커밋하기 전에 하기를 원하는 구성을 쓰도록 합시다.
javascript
.lintstagedrc
{
"src/**/*.+(js|json|ts|tsx)": ["eslint"],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"]
}


Inside .husky/pre-commit add the following script :

`javascript
.husky/pre-commit

!/빈/쉬

. "$(dirname "$0")/_/husky.sh"

npm run pre-commit
`

설정 테스트

I have this React file with a few errors inside :

I'll try to commit it, with the errors, let's see what happens.

javascript
git add.
git commit -m 'test commit with husky'


I can't commit it, I have to fix each error before, so let's fix that.

No more errors now, let's try to commit our code again.

javascript
git add.
git commit -m 'test commit with husky'


Success! 🥳 We have just committed proper code to our repository.

Your program may not bug-less, but if it is consistent and pretty, it would be easier to debug and maintain it. Those tools are only meant to reduce the chance for potential problems to arise. At the end of the day, you and/or your team are the one in charge to make sure your code is easy to read.

You can find the GitHub repo Here