# 프리커밋 훅을 이용한 Lint 강제하기
Lint를 Commit에서 수행하여 검사가 완료된 상태의 코드를 유지하는 방법입니다. 여러명의 개발자가 린팅을 하지 않고 push를 하게되면 코드가 엉망이되기 쉽습니다.
이 내용은 git에 훅을 걸고 lint-staged로 git stage에 올라와있는 코드만 lint를 자동으로 수행하여 통과하지 못하면 commit을 만들 수 없게하는 내용입니다. 개발자는 강제적으로 린팅한 코드만 push할 수 있습니다. 이러면 코드가 엉망이 되는것을 막을 수 있습니다.
### 프로젝트 생성
```
npx create-next-app amplify-forum --typescript
```
### TailwindCSS로 스타일링하기
TailwindCSS를 사용하여 응용 프로그램의 스타일을 지정합니다.
devDependencies에 TailwindCSS 관련 패키지를 설치해 보겠습니다.
```bash=
yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms
```
Tailwind 구성 파일을 만들려면(tailwind.config.js postcss.config.js), 다음을 실행해 보자.
```bash=
npx tailwindcss init -p
```
이제 업데이트를 해보자 tailwind.config.js다음과 같이.
이것은 프로덕션 빌드에서 사용하지 않는 트리 쉐이크 스타일링을 하기 위한 것입니다.
```javascript=
// tailwind.config.js
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),],
}
```
Tailwind의 기본, 구성 요소 및 유틸리티 스타일을 사용하려면 ./styles/globals.css
```javascript=
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
TailwindCSS 설치에 대해 더 알고 싶다면 여기를 확인하세요
## EsLint ( Typescript 코딩 스타일 도구)
Next는 린트를 기본으로 구성하고 있음
```
yarn lint
```
AirBnB Lint 추가
```
yarn add eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin@^5.13.0 \
@typescript-eslint/parser@^5.0.0 \
--save-dev
```
.eslintrc.json을 변경합니다.
```
{
"extends": [
"next/core-web-vitals",
"airbnb-typescript"
],
"parserOptions": {
"project": "./tsconfig.json"
}
}
```
다시 린트체크를 해봅니다.
```
yarn lint
```
아래와 같은 결과가 나옵니다.
## Prettier(코드 스타일 정리)
ESLint에는 기존 Prettier 설정과 충돌할 수 있는 코드 형식 지정 규칙도 포함되어 있습니다. ESLint와 Prettier가 함께 작동하도록 ESLint 구성에 eslint-config-prettier를 포함하는 것이 좋습니다.
```bash=
yarn add --dev eslint-config-prettier
```
그런 다음 기존 ESLint 구성에 prettier를 추가합니다.
eslintrc.json의 extends에 prettier/prettier를 추가합니다.
```json=
{
"extends": [
"next/core-web-vitals",
"airbnb-typescript",
"prettier/prettier"
]
}
```
## lint-staged
코드를 커밋하기 전에 실행하면 Linting이 더 합리적입니다. 이렇게 하면 오류가 저장소로 이동하지 않고 코드 스타일을 적용할 수 있습니다. 그러나 전체 프로젝트에서 린트 프로세스를 실행하는 것은 느리고 린트 결과는 관련이 없을 수 있습니다. 궁극적으로 커밋될 파일만 린트하기를 원할 것입니다.
`.lintstagedrc.js`파일을 생성하고 아래 코드를 입력합니다.
```javascript=
const path = require('path')
const buildEslintCommand = (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' --file ')}`
module.exports = {
'*.{js,jsx,ts,tsx}': [buildEslintCommand],
}
```
## husky
커밋 또는 푸시할 때 커밋 메시지를 린트하고, 테스트를 실행하고, 코드를 린트하는 데 사용할 수 있습니다. Husky는 모든 Git 후크를 지원합니다.
```bash=
yarn add --save-dev husky@next
```
package.json 수정을 위해 아래 스크립트 실행:
```
npm set-script prepare "husky install"
npm run prepare
```
훅 추가
```
npx husky add .husky/pre-commit "yarn lint"
git add .husky/pre-commit
```
커밋
```
git commit -m "Keep calm and commit"
```
아래와 같이 커밋이 실패하면서 lint결과를 보실 수 있습니다.
아래 코드를 수행한 후 다시 커밋을 생성하세요.
```
yarn lint --fix
```
린팅을 통과했으니 Commit을 만들고 Push할 수 있습니다.
Sign in with Wallet
Connect another wallet