Prettier는 코드 포맷팅 도구로, 팀 협업 시 코드 일관성을 유지하고 가독성을 향상시키는 데 도움을 줍니다.
Prettier란 무엇인가요?
Prettier는 JavaScript, TypeScript 등 다양한 언어로 작성된 코드의 자동 포맷팅을 지원하는 도구입니다. 코드에 일관된 스타일을 적용하여 협업 시 발생할 수 있는 스타일 차이를 줄여주며, 코드를 더 읽기 쉽고 가독성 있게 만들어줍니다.
Prettier 설치 방법
Prettier는 npm 또는 yarn을 통해 쉽게 설치할 수 있습니다.
npm install --save-dev --save-exact prettier
# 혹은
yarn add --dev --exact prettier
프로젝트에 Prettier 적용하기
설정 파일 생성
프로젝트 루트 경로에 .prettierrc 파일을 생성하여 Prettier의 설정을 정의할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다.
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80
}
코드 포맷팅
Prettier는 CLI나 편집기 플러그인을 통해 코드를 자동으로 포맷팅할 수 있습니다. 예를 들어, prettier 명령어를 사용하여 모든 JavaScript 및 TypeScript 파일을 자동으로 포맷할 수 있습니다.
npx prettier --write "src/**/*.js" "src/**/*.ts" # 파일 포맷팅
또는, 편집기 플러그인을 설치하여 코드 작성 중에 자동으로 포맷팅을 적용할 수 있습니다.
팀 협업 시 Prettier 사용하기
프로젝트별 설정 일치
팀에서 Prettier를 사용한다면, 설정 파일을 프로젝트 루트 경로에 추가하여 모든 팀원이 동일한 코드 스타일을 적용하도록 하는 것이 좋습니다. 이를 통해 협업 시 일관된 코드를 유지할 수 있습니다.
코드 리뷰 시 Prettier 적용
코드 리뷰 시 Prettier를 사용하여 코드를 올바르게 포맷팅하고 커밋하는 것이 중요합니다. 이를 통해 코드 변경 사항을 쉽게 파악하고 리뷰할 수 있으며, 일관된 코드 스타일을 유지할 수 있습니다.
Prettier는 팀 협업 시 코드 일관성을 유지하고 가독성을 향상시키는 강력한 도구입니다. 이를 통해 팀원 간의 코드 작성 스타일 차이를 줄이고, 효율적인 협업이 가능해집니다.