[React] Prettier로 코드 스타일 통일하기

프로젝트를 혼자 개발할 때는 크게 느끼지 못하지만
여러 명이 함께 개발하는 경우에는 코드 스타일을 통일하는 것이 중요하다.

들여쓰기, 따옴표, 세미콜론 등 작성 방식이 사람마다 다르면 코드 가독성이 떨어질 뿐만 아니라, Git에서 불필요한 변경 사항이 발생하여 협업 효율도 낮아질 수 있다.

이를 해결하기 위해 프로젝트에서는 Prettier를 사용하여 코드 포맷을 자동으로 관리할 수 있다.

---

Prettier 설치

먼저 Prettier를 개발 의존성으로 설치한다.

yarn add -D prettier

---

Prettier 설정

프로젝트 루트에 .prettierrc 파일을 생성한 뒤 원하는 코드 스타일을 설정하였다.

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "all"
}

각 옵션의 의미는 다음과 같다.

옵션	설명
tabWidth	들여쓰기 공백 수
useTabs	Tab 대신 Space 사용 여부
semi	세미콜론 사용 여부
singleQuote	작은따옴표 사용 여부
printWidth	한 줄의 최대 길이
trailingComma	가능한 곳에 후행 쉼표 추가

---

포맷 제외 파일 설정

빌드 결과물이나 환경 변수 파일처럼 포맷이 필요하지 않은 파일은 .prettierignore에서 제외할 수 있다.

# 빌드 출력물
dist/
build/

# Node.js 모듈
node_modules/

# 환경 변수 파일
.env
.env.local

# 로그 파일
*.log

# 기타
*.min.js
*.snap

---

실행 스크립트 추가

package.json에 스크립트를 추가하면 언제든지 프로젝트 전체를 포맷할 수 있다.

"scripts": {
  "format": "prettier --write ."
}

---

Prettier 실행

다음 명령어를 실행하면 프로젝트 전체 코드가 설정한 규칙에 맞게 자동으로 정렬된다.

yarn format

---

결과

Prettier는 코드 스타일을 자동으로 정리해주는 코드 포매터이다.

프로젝트 초기에 규칙을 설정해두면 팀원 모두가 동일한 스타일로 코드를 작성할 수 있으며, 불필요한 포맷 수정 없이 일관된 코드베이스를 유지할 수 있다.

---

Reference

• Install · Prettier