.prettierrc 작성하는 법

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"
}

주요 옵션 설명

옵션	기본값	설명	예시
`semi`	`true`	문장 끝 세미콜론	`true` → `const a = 1;`
`singleQuote`	`false`	홑따옴표 사용	`true` → `'hello'`
`tabWidth`	`2`	들여쓰기 칸 수	`4` → 4칸 들여쓰기
`printWidth`	`80`	한 줄 최대 길이	`120` → 더 긴 줄 허용
`trailingComma`	`"all"`	여러 줄로 나뉠 때 마지막 요소 뒤 쉼표	`"none"` → 쉼표 안 붙임
`useTabs`	`false`	탭 문자 사용	`true` → 스페이스 대신 탭
`bracketSpacing`	`true`	객체 중괄호 안 공백	`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 연동

확장 설치: esbenp.prettier-vscode
settings.json에 추가:

JSON

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

주의: VS Code의 source.organizeImports와 Prettier import 정렬 플러그인을 같이 쓰면 둘이 순서를 서로 다르게 바꿔서 충돌할 수 있어요. 플러그인을 쓴다면 editor.codeActionsOnSave에서 "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를 써요.

정리

pnpm add -D prettier
.prettierrc 만들기
VS Code에서 formatOnSave 켜기
npx prettier --write .로 기존 코드 일괄 포맷