[typescript] Prettier와 Git pre-commit 훅 설정하기

08 Dec 2023

이번 포스트에서는 Prettier 코드 포맷터를 사용하여 코드를 깔끔하게 유지하는 방법과 Git pre-commit 훅을 통해 코드 스타일을 유지하고 일관성을 확보하는 방법에 대해 알아보려고 합니다.

Prettier란 무엇인가요?

Prettier는 코드를 자동으로 포맷하여 보기 좋고 일관된 스타일을 유지하는 데 도움을 주는 도구입니다. JavaScript, TypeScript, CSS 등 다양한 언어를 지원하며, 코드베이스를 보다 깔끔하게 유지할 수 있도록 도와줍니다.

먼저 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하고, 원하는 포맷팅 옵션을 지정합니다.

예시:

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 80
}

Prettier를 사용하여 코드를 자동으로 포맷팅하려면, 프로젝트 루트 디렉토리에서 아래 명령을 실행합니다.

npx prettier --write .

Husky는 Git hooks를 사용하기 쉽도록 도와주는 도구입니다.

프로젝트에 Husky를 설치하려면, 아래 명령을 실행합니다.

npm install husky --save-dev

lint-staged는 Git에 스테이징된 파일에 대해서만 코드 스타일을 적용할 수 있도록 도와주는 도구입니다.

프로젝트에 lint-staged를 설치하려면, 아래 명령을 실행합니다.

npm install lint-staged --save-dev

프로젝트의 package.json 파일에 아래 예시와 같이 pre-commit 스크립트를 추가합니다.

{
  "scripts": {
    "precommit": "lint-staged"
  }
}

프로젝트 루트 디렉토리에 .lintstagedrc 파일을 생성하고, 아래 예시와 같이 설정합니다.

{
  "*.ts": ["npx prettier --write", "git add"]
}

이렇게 설정하면, Git에 커밋하기 전에 *.ts 확장자를 가진 파일에 대해서만 Prettier를 실행하여 코드 스타일을 자동으로 정리하고, 해당 파일을 스테이징 영역에 추가합니다.

이제 Prettier를 사용하여 코드를 자동으로 포맷팅하고, Git pre-commit 훅을 통해 코드 스타일을 체크하고 일관성을 유지할 수 있습니다.

코드의 가독성을 높이고, 팀원들과 협업 시 일관된 코드 스타일을 유지하여 프로젝트 품질을 높이는 데 도움이 될 것입니다.