🌿 중급 개발도구
Prettier가 뭔가요?
쉽게 이해하기
워드의 '자동 맞춤' 기능처럼, 들여쓰기나 줄바꿈이 제각각이어도 버튼 하나로 깔끔하게 정렬되잖아요. Prettier도 코드를 자동으로 정렬해주는 '자동 맞춤' 같은 거예요.
핵심 정리
코드를 자동으로 일정한 형식으로 정리해주는 포매터 도구예요.
자세히 알아보기
Prettier는 JavaScript, TypeScript, CSS, HTML, JSON 등 다양한 언어를 지원하는 코드 포매터예요. 코드를 저장하거나 커밋할 때 자동으로 일정한 스타일로 정렬해줘서 개발자마다 다른 포맷 때문에 생기는 논쟁을 없애줘요.
실무에서는 VS Code 확장을 설치하고 '저장할 때 자동 포맷' 옵션을 켜두면, 파일을 저장할 때마다 자동으로 들여쓰기, 세미콜론, 따옴표 스타일 등을 통일해줘요. 예를 들어 누군가 탭을 쓰고 다른 사람은 스페이스를 쓰더라도 Prettier가 일괄적으로 정리해주니까 Git diff가 깔끔해지고 코드 리뷰도 수월해져요.
.prettierrc 파일로 팀의 코딩 스타일을 설정할 수 있어요. printWidth(한 줄 최대 길이), semi(세미콜론 여부), singleQuote(작은따옴표 사용) 같은 옵션을 정하면 되는데, 보통은 기본값을 그대로 쓰는 게 일반적이에요.
ESLint와 함께 쓰면 ESLint는 '코드 품질'을, Prettier는 '코드 스타일'을 담당해서 완벽한 조합이 돼요. pre-commit hook에 Prettier를 걸어두면 포맷 안 된 코드가 커밋되는 걸 원천 차단할 수 있어요.