정정지용
기술스택 목록
도구

Prettier

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

코드/설정 파일의 포맷을 일관된 규칙으로 자동 정리해주는 코드 포맷터

Prettier는 JavaScript, TypeScript, JSON, YAML, Markdown 등 다양한 파일을 정해진 규칙에 따라 자동으로 다시 포맷팅해주는 도구다. 들여쓰기, 줄바꿈, 따옴표 종류, 세미콜론 사용 여부 등 스타일을 둘러싼 팀 내 논쟁과 리뷰 시간을 없애기 위해 만들어졌다. 코드를 파싱해서 자체 규칙에 맞는 형태로 재출력하는 방식이라, 원래 스타일이 어땠든 항상 동일한 결과가 나온다. 설정 옵션이 최소화되어 있어 '정답을 고민하지 않고 그냥 쓰는' 것을 지향한다.

이럴 때 사용합니다

  • 여러 개발자가 협업하며 코드/설정 파일 스타일을 통일하고 싶을 때
  • 코드 리뷰에서 스타일 관련 논쟁 시간을 줄이고 로직 리뷰에 집중하고 싶을 때
  • 여러 저장소·프로젝트에서 동일한 포맷 규칙을 중앙 설정으로 관리하고 싶을 때
  • CI 파이프라인에서 포맷 위반을 자동으로 검출해 병합을 막고 싶을 때

핵심 개념

Opinionated formatting
설정 가능한 옵션 수를 의도적으로 줄여, 스타일 논쟁 대신 정해진 규칙을 그대로 따르게 하는 철학이다.
AST-based printing
코드를 문자열로 조작하지 않고 추상 구문 트리(AST)로 파싱한 뒤 규칙에 맞게 새로 출력하는 방식이다.
Config file
.prettierrc 등의 설정 파일로 들여쓰기 폭, 따옴표 종류 같은 소수의 옵션을 프로젝트 단위로 지정한다.
Ignore file
.prettierignore 파일로 포맷팅에서 제외할 파일이나 디렉터리를 지정한다.
Check vs Write mode
포맷이 규칙에 맞는지만 검사하는 모드와, 실제로 파일을 덮어써 수정하는 모드를 구분해서 실행할 수 있다.

Prettier 설정 파일과 CLI 실행

.prettierrc로 규칙을 지정한 뒤, CLI로 검사(--check) 또는 자동 수정(--write)을 실행하는 기본 흐름이다.

Shell
# .prettierrc
# {
#   "semi": true,
#   "singleQuote": true,
#   "printWidth": 80
# }

# 전체 파일 포맷팅 여부만 검사 (수정 X)
npx prettier --check .

# 실제로 파일을 규칙에 맞게 덮어쓰기
npx prettier --write "**/*.{js,json,yaml,md}"

처음 쓸 때 흔한 함정

  • 옵션을 세세하게 커스터마이징하려 하면 Prettier의 설계 철학과 충돌해 불편해진다.
  • ESLint 등 다른 린터의 스타일 규칙과 충돌하면 별도 통합 설정이 필요하다.
  • .prettierignore를 빼먹으면 빌드 산출물이나 벤더 코드까지 포맷팅될 수 있다.

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

GitGitHub ActionsJSONnpmSolidity ABIYAML