TechLog
블로그로 돌아가기

.prettierrc 작성하는 법 — 팀 코드 스타일 한 방에 통일하기

(수정됨: 2026년 3월 20일)
tip

Prettier가 뭔데?

코드 포맷터다. 저장하면 알아서 들여쓰기, 따옴표, 세미콜론 등을 정해진 규칙대로 맞춰준다. 팀원끼리 "따옴표 쌍따 쓸까 홑따 쓸까" 같은 논쟁을 안 해도 된다.

설치

Bash
# npm
npm install -D prettier

# pnpm
pnpm add -D prettier

# yarn
yarn add -D prettier

.prettierrc 기본 구조

프로젝트 루트에 .prettierrc 파일을 만들면 된다. JSON 형식이 가장 간단하다.

JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all"
}

주요 옵션 설명

옵션기본값설명예시
semitrue문장 끝 세미콜론true → const a = 1;
singleQuotefalse홑따옴표 사용true → 'hello'
tabWidth2들여쓰기 칸 수4 → 4칸 들여쓰기
printWidth80한 줄 최대 길이120 → 더 긴 줄 허용
trailingComma"all"마지막 요소 뒤 쉼표"all" → [1, 2, 3,]
useTabsfalse탭 문자 사용true → 스페이스 대신 탭
bracketSpacingtrue객체 중괄호 안 공백true → { a: 1 }
arrowParens"always"화살표 함수 괄호"avoid" → x => x
endOfLine"lf"줄바꿈 문자"auto" → OS에 맞춤

import 정렬도 하고 싶다면

Prettier는 기본적으로 import 순서를 안 건드린다. 플러그인을 추가하면 된다.

Bash
pnpm add -D @trivago/prettier-plugin-sort-imports
JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react",
    "^@tauri-apps/(.*)$",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
  • importOrder — import 그룹 순서를 정규식으로 지정
  • importOrderSeparation — 그룹 사이에 빈 줄 삽입
  • importOrderSortSpecifiers — { a, b, c } 내부도 알파벳순 정렬

VS Code 연동

  1. 확장 설치: esbenp.prettier-vscode
  2. settings.json에 추가:
JSON
{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

주의: source.organizeImports와 Prettier import 정렬 플러그인을 동시에 쓰면 충돌한다. 플러그인을 쓴다면 "source.organizeImports": "never"로 꺼야 한다.

CLI로 전체 포맷

Bash
# 전체 포맷
npx prettier --write .

# 특정 폴더만
npx prettier --write "src/**/*.{ts,tsx}"

# 포맷 안 된 파일 확인만 (수정 안 함)
npx prettier --check .

.prettierignore

포맷하고 싶지 않은 파일/폴더가 있으면 .prettierignore를 만든다.

TEXT
dist
node_modules
src-tauri/target
*.min.js

지원 파일 형식

JavaScript, TypeScript, JSX, TSX, CSS, SCSS, HTML, JSON, Markdown, YAML 등. Rust는 지원하지 않는다 — Rust는 cargo fmt를 쓴다.

정리

  1. pnpm add -D prettier
  2. .prettierrc 만들기
  3. VS Code에서 formatOnSave 켜기
  4. npx prettier --write .로 기존 코드 일괄 포맷
  5. 끝. 더 이상 코드 스타일로 싸울 일 없다.

댓글