---
id: wiki-2026-0508-prettier
title: Prettier
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Prettier Formatter, Code Formatter]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [tooling, formatter, javascript, typescript]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript/TypeScript
  framework: Prettier
---

# Prettier

## 매 한 줄
> **"매 opinionated formatter — 매 bikeshed 종결자"**. Prettier 매 AST re-print 방식 사용 — 매 source 의 whitespace 무시 의 deterministic output 생성. 2026 매 v3.x 의 ESM-first + plugin ecosystem 안정화.

## 매 핵심

### 매 Re-print 방식
- 매 parser 의 source → AST 변환.
- 매 printer 의 AST → IR (Doc) 생성.
- 매 IR 의 line-width constraint 기반 layout 결정.
- 매 original whitespace 의 X 보존.

### 매 ESLint 와의 분리
- ESLint: 매 code quality (logic, anti-patterns).
- Prettier: 매 formatting (whitespace, quote, line-break).
- 매 `eslint-config-prettier` 의 conflict rule disable.

### 매 응용
1. 매 monorepo 의 unified formatting.
2. CI 의 `--check` mode — 매 format violation 의 fail.
3. Pre-commit hook (`lint-staged` + `husky`) 의 auto-format.

## 💻 패턴

### Config 의 minimal `.prettierrc`
```json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "always",
  "endOfLine": "lf"
}
```

### CLI 의 batch format
```bash
# Format in place
npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,md}"

# CI check
npx prettier --check "src/**/*.{ts,tsx}"
```

### lint-staged 의 staged-only format
```json
// package.json
{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}
```

### Plugin 의 ordering — `prettier-plugin-tailwindcss`
```json
{
  "plugins": ["prettier-plugin-tailwindcss"]
}
// Tailwind class 의 자동 ordering — flex p-4 m-2 → m-2 p-4 flex
```

### Programmatic API (v3 ESM)
```typescript
import prettier from "prettier";

const formatted = await prettier.format(sourceCode, {
  parser: "typescript",
  semi: false,
  singleQuote: true,
});
```

### Editor integration — VSCode
```json
// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}
```

### Override 의 file-type 별 config
```json
{
  "semi": true,
  "overrides": [
    { "files": "*.md", "options": { "proseWrap": "always", "printWidth": 80 } },
    { "files": "*.yml", "options": { "tabWidth": 2 } }
  ]
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Solo project | Prettier defaults — 매 zero config. |
| Team — strict | `.prettierrc` commit + CI check. |
| Tailwind 사용 | `prettier-plugin-tailwindcss` 필수. |
| Legacy codebase | 매 한 번 `--write` + 매 `.git-blame-ignore-revs` 추가. |
| Monorepo | Root `.prettierrc` + workspace override. |

**기본값**: `singleQuote: true`, `trailingComma: "all"`, `printWidth: 100`, format-on-save + pre-commit hook.

## 🔗 Graph
- 부모: [[Code Formatting]]
- 변형: [[ESLint]] · [[Biome]]
- 응용: [[153_pre-commit과_품질_게이트|Pre-commit Hooks]] · [[lint-staged]]
- Adjacent: [[AST]] · [[TypeScript]]

## 🤖 LLM 활용
**언제**: JS/TS/JSON/MD/YAML/CSS — 매 multi-language project 의 unified formatting.
**언제 X**: 매 Rust/Go (rustfmt/gofmt 의 사용), 매 single-language Rust-only 의 Biome 고려.

## ❌ 안티패턴
- **ESLint 의 stylistic rules + Prettier 동시 사용**: 매 conflict 발생 → `eslint-config-prettier` 적용.
- **`.prettierrc` 의 commit X**: 매 team 의 inconsistent format.
- **Format-on-save 의 X + manual format**: 매 review noise 증가.
- **매 large initial format 의 main branch 직접 commit**: blame 의 손상 — 매 `.git-blame-ignore-revs` 사용.

## 🧪 검증 / 중복
- Verified (Prettier docs v3.x).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Prettier 매 re-print formatter + config patterns 정리 |