본 문서에서는 타입스크립트로 작성된 Vue.js 프로젝트에서 Git 커밋 훅을 설정하는 방법을 안내합니다.

1. Git 커밋 훅이란 무엇인가요?

Git 커밋 훅은 Git 저장소에서 발생하는 특정 이벤트에 대한 스크립트를 실행할 수 있는 기능입니다. 이를 활용하여, 커밋 전 코드 포맷팅, 테스트 실행, 빌드 및 배포 등을 자동화할 수 있습니다.

2. 타입스크립트와 Vue.js 프로젝트 설정

우선, Vue.js 프로젝트에 타입스크립트를 설정합니다. 이후에는 husky와 lint-staged 라이브러리를 사용하여 Git 커밋 훅 설정을 진행할 것입니다.

npm install --save-dev typescript vue-class-component vue-property-decorator
npm install --save-dev husky lint-staged

// package.json
{
  "scripts": {
    "lint": "eslint --ext .js,.vue,.ts src",
    "lint:fix": "eslint --ext .js,.vue,.ts src --fix"
  },
  "lint-staged": {
    "*.{js,vue,ts}": [
      "npm run lint:fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

위와 같이 package.json 파일을 수정하여 lint-staged와 husky를 활용한 Git 커밋 훅을 설정합니다. lint-staged는 스테이징 영역에 있는 파일들을 대상으로 정의된 스크립트를 실행하며, husky는 Git 훅을 관리하는 라이브러리입니다.

3. 커밋 훅 설정 완료

이제 타입스크립트와 Vue.js 프로젝트에서 Git 커밋 훅 설정이 완료되었습니다. 이제부터 각 커밋 시 자동으로 코드 포맷팅 및 테스트가 수행될 것입니다.

이상으로, 본 문서에서는 타입스크립트와 Vue.js에서 Git 커밋 훅을 설정하는 방법에 대해 안내하였습니다.