.husky 적용

Jinmin Kim·2024년 5월 29일

설치

npm install husky --save-dev
npx husky install
npm install lint-staged eslint --save-dev
npm install --save-dev @commitlint/config-conventional @commitlint/cli

husky

  • pre-commit 파일
#!/usr/bin/env sh
. "$(dirname -- "$0")/husky.sh"

yarn lint-staged --no-stash
  • commit-msg
#!/usr/bin/env sh
. "$(dirname -- "$0")/husky.sh"

npx --no-install commitlint --edit $1

package.json

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
  1. *.{js,jsx,ts,tsx}: 이 패턴은 JavaScript(.js), JSX(.jsx), TypeScript(.ts), 및 TSX(.tsx) 파일을 대상으로 합니다. 즉, 이 확장자를 가진 모든 파일이 lint-staged의 대상으로 지정됩니다.

  2. eslint --fix: ESLint를 실행하여 코드를 자동으로 수정합니다. ESLint는 코드 품질과 스타일을 유지하기 위한 도구로, --fix 옵션은 자동으로 고칠 수 있는 문제를 수정합니다.

  3. prettier --write: Prettier를 실행하여 코드를 포맷합니다. Prettier는 코드 스타일을 일관되게 유지하기 위한 도구로, --write 옵션은 파일을 포맷하여 덮어씁니다.

  4. git add: 앞의 두 명령어로 수정된 파일을 다시 Git 스테이지에 추가합니다. 이는 수정된 파일이 커밋에 포함되도록 합니다.

정리하자면,
2. 파일이 ESLint에 의해 자동으로 수정됩니다.
3. 파일이 Prettier에 의해 포맷됩니다.
4. 수정된 파일이 Git 스테이지에 다시 추가됩니다.
이 과정을 통해 코드의 품질과 스타일이 자동으로 유지되며, 일관된 코드베이스를 유지하는 데 도움을 줍니다.

파일 권한 추가

chmod +x .husky/pre-commit

commitlint.config.js

module.exports = { extends: ["@commitlint/config-conventional"] };

commitlint/config-conventional

커밋 메시지 타입
@commitlint/config-conventional은 다음과 같은 타입을 사용합니다:

feat: 새로운 기능 추가
예: feat: add user login feature

fix: 버그 수정
예: fix: correct typo in README

docs: 문서 수정
예: docs: update API documentation

style: 코드 포맷팅, 세미콜론 누락 등 스타일 관련 수정 (기능에 영향을 미치지 않는 변경)
예: style: format code according to ESLint rules

refactor: 코드 리팩토링 (기능 변화 없음)
예: refactor: simplify authentication logic

perf: 성능 개선
예: perf: improve query performance

test: 테스트 코드 추가 또는 수정
예: test: add unit tests for user service

build: 빌드 시스템 또는 외부 종속성 수정 (예: npm, webpack)
예: build: update webpack configuration

ci: CI 설정 파일 및 스크립트 수정 (예: GitHub Actions, Travis)
예: ci: update GitHub Actions workflow

chore: 기타 변경사항 (빌드 과정이나 설정 파일 수정 등)
예: chore: update dependencies

revert: 이전 커밋을 되돌림
예: revert: revert commit abc123
profile
Let's do it developer

0개의 댓글