개발
"협업을 위한 코드 스타일 통일, Prettier로 시작하기"
| 서론 — 협업하다 보면 반드시 마주치는 문제
안녕하세요, 팡일입니다.
이번 포스팅에서는 개발자끼리 협업할 때 반드시 맞춰야 하는 요소 중 하나인 ‘코드 스타일’에 대해 이야기해보려고 합니다.
여러 명이 함께 개발하다 보면 이런 경험, 한 번쯤은 있으실 것 같아요.
기능은 동일한데 PR diff가 잔뜩 쌓여 있는 경우
공백, 줄바꿈, 따옴표 차이 때문에 코드 리뷰가 길어지는 상황
“이건 누가 고친 거죠?” 싶은 변경 내역들
이런 문제의 상당수는 코드 스타일이 통일되지 않았기 때문입니다.
오늘은 이 문제를 가장 간단하게 해결해주는 도구인 Prettier에 대해 정리해보려고 합니다.
| Prettier란? — 코드 스타일을 자동으로 맞춰주는 도구
Prettier는 코드 포맷터(Formatter)입니다.
즉, 코드의 동작에는 관여하지 않고, 코드의 모양(스타일)만 자동으로 정리해주는 도구입니다.
Prettier를 사용하면 다음과 같은 것들을 자동으로 맞춰줍니다.
들여쓰기
줄바꿈 위치
세미콜론 여부
따옴표 종류
trailing comma 여부
그렇다면, 왜 Prettier를 써야 할까요?
바로 “코드 스타일에 대한 논쟁을 없애주기” 때문입니다. 누가 더 잘 썼는지가 아니라, 도구가 정한 규칙을 모두가 따르게 만드는 것이 핵심입니다.
| Prettier는 ‘어떻게’ 구성되어 있을까?
Prettier를 처음 설정하다 보면, 보통 아래 세 가지를 함께 마주하게 됩니다.
.prettierrc 파일
Prettier VS Code Extension
.vscode/settings.json 파일
이 셋은 역할이 서로 다르고, 각각 책임지는 범위도 다릅니다.
1) .prettierrc — 코드 스타일 규칙을 정의하는 파일
: .prettierrc는 이 프로젝트에서 코드가 어떤 모습이어야 하는지를 정의하는 파일입니다.
{
"printWidth": 80,
"semi": true,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all"
}줄 길이는 어디까지 허용할지
세미콜론을 붙일지 말지
따옴표는 무엇을 쓸지
위와 같은 스타일의 기준(Source of Truth)이 모두 이 파일에 담깁니다.
중요한 점은, 이 파일은 VS Code뿐 아니라 CLI, CI, 다른 IDE에서도 동일하게 적용된다는 것입니다. 그래서 협업에서는 반드시 프로젝트 루트에 두는 것이 좋습니다.
2) Prettier VS Code Extension — 규칙을 실제로 실행하는 도구
: Prettier VS Code Extension은 .prettierrc에 적힌 규칙을 읽어서 실제로 코드에 적용해주는 실행기입니다.
VS Code에서 Format Document 기능 제공
저장 시 자동 포맷 실행
.prettierrc 설정을 그대로 반영
즉, 규칙을 정의하지는 않고, 정의된 규칙을 VS Code 안에서 실행해주는 역할만 담당합니다.
3) .vscode/settings.json — 어떤 도구를 언제 사용할지 정하는 파일
: .vscode/settings.json은 VS Code 전용 설정 파일로, 여러 포맷터 중 어떤 것을 사용할지, 언제 포맷을 실행할지를 결정합니다.
예를 들어 아래 설정은, 기본 포맷터로 Prettier를 사용하고 파일 저장 시 자동으로 실행하겠다는 의미입니다.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}즉, 이 파일은 “Prettier를 쓰느냐 마느냐”가 아니라, “VS Code에서 누가, 언제 실행할지”를 정하는 파일이라고 이해하면 됩니다.
이 세 가지를 쉽게 정리하면 아래와 같은 역할 분담 구조를 가집니다.
.prettierrc → 무엇이 올바른 스타일인지
Prettier Extension → 그 스타일을 실행
.vscode/settings.json → VS Code에서 실행 방식 결정
| Prettier는 어떻게 사용하는가?
Prettier는 프로젝트 루트에 설정 파일을 하나 두는 방식으로 사용합니다.
1) .prettierrc 파일 생성
project-root
├─ src/
├─ package.json
└─ .prettierrc2) 설정 파일 작성
{
"printWidth": 80,
"semi": true,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all"
}이렇게 설정해두면, VS Code에서 저장 시 자동 포맷 또는 Format Document 실행 시 모든 팀원이 동일한 코드 스타일을 유지하게 됩니다.
| 주요 옵션 살펴보기 (예시 코드 포함)
이제 위에서 사용한 옵션들이 실제로 어떤 역할을 하는지 하나씩 살펴보겠습니다.
1) printWidth: 80
한 줄에 허용할 최대 문자 수를 의미합니다.
// Before
const user = { id: 1, name: 'Kwangil', role: 'admin', isActive: true };
// After
const user = {
id: 1,
name: 'Kwangil',
role: 'admin',
isActive: true,
};코드 가로 스크롤 최소화
PR diff 가독성 향상
2) semi: true
문장 끝에 세미콜론(;)을 붙이도록 설정합니다.
const count = 0;
setCount(count + 1);ASI로 인한 예외적인 버그 예방
팀 차원의 안정성 확보
3) tabWidth: 2
들여쓰기 한 단계당 공백 수를 의미합니다.
function App() {
return (
<div>
<span>Hello</span>
</div>
);
}React / TypeScript 생태계의 표준
JSX 중첩 구조에서 가독성 향상
4) singleQuote: true
JavaScript / TypeScript 문자열에 작은따옴표(')를 사용합니다.
const title = 'Dashboard';
const message = 'He said "hello"';JSX의 "와 시각적 구분
escape 빈도 감소
※ JSX의 className 같은 attribute에는 적용되지 않습니다.
5) trailingComma: "all"
마지막 요소 뒤에도 쉼표를 추가합니다.
const config = {
apiKey: 'xxx',
timeout: 3000,
};
function fetchData(
url: string,
options: Options,
) {}diff 최소화
리뷰 시 변경점 명확
| 결론 — 협업을 위한 가장 쉬운 첫 단계
결론적으로, Prettier는 코드 실력을 판단하는 도구가 아닙니다. 오히려 팀의 에너지를 더 중요한 문제에 쓰게 해주는 도구에 가깝습니다.
스타일 논쟁도 없고, 의미 없는 diff 사항도 업속, 리뷰 피로도 줄어줍니다. 또한, 통일된 코드 스타일과 깔끔한 PR, 빠른 리뷰와 협업을 가져다주는 참 듬직한 존재라고 볼 수 있습니다.
협업을 시작한다면, 가장 먼저 맞춰야 할 것은 코드 스타일이고, 그 시작은 Prettier 설정 파일 하나라고 생각합니다.