## Prettier란?

Prettier는 코드 스타일을 자동으로 통일해주는 **opinionated code formatter**입니다. 코드를 파싱하여 자체 규칙에 따라 재출력함으로써 일관된 스타일을 강제합니다. JavaScript, TypeScript, HTML, CSS, JSON 등 다양한 언어를 지원합니다.

### 주요 특징

- **일관된 코드 스타일**: 팀 전체가 동일한 포맷을 사용
- **자동 포맷팅**: 저장 시 자동으로 코드 정리
- **설정 최소화**: 기본 설정만으로도 충분히 사용 가능
- **다양한 언어 지원**: 플러그인을 통해 확장 가능

## 설치

### npm

```bash
npm install --save-dev prettier
```

### yarn

```bash
yarn add --dev prettier
```

### pnpm

```bash
pnpm add --save-dev prettier
```

### bun

```bash
bun add --dev prettier
```

## 설정 파일 생성

프로젝트 루트에 Prettier 설정 파일을 생성합니다:

```bash
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
```

## 프로젝트 설정

### 기본 설정

`.prettierrc` 파일에 다음과 같이 설정합니다:

```json
{
  "semi": false,
  "trailingComma": "none",
  "bracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 120,
  "singleQuote": true
}
```

### 옵션 설명

| 옵션 | 값 | 설명 |
|------|-----|------|
| `semi` | `false` | 세미콜론을 사용하지 않음 |
| `trailingComma` | `"none"` | 후행 쉼표를 사용하지 않음 |
| `bracketSameLine` | `true` | 태그의 닫는 괄호를 같은 줄에 배치 |
| `htmlWhitespaceSensitivity` | `"ignore"` | HTML 공백 처리를 무시 |
| `printWidth` | `120` | 한 줄의 최대 길이를 120자로 설정 |
| `singleQuote` | `true` | 작은따옴표 사용 |

## Tailwind CSS 플러그인 설정

Tailwind CSS 클래스를 자동으로 정렬하기 위해 플러그인을 설치합니다:

```bash
npm install -D prettier-plugin-tailwindcss
```

### 플러그인 적용

`.prettierrc` 파일에 플러그인을 추가합니다:

```json
{
  "semi": false,
  "trailingComma": "none",
  "bracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 120,
  "singleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindAttributes": [],
  "tailwindFunctions": ["cva", "tw"]
}
```

### Tailwind 옵션 설명

- `plugins`: Prettier 플러그인 목록
- `tailwindAttributes`: Tailwind 클래스를 정렬할 커스텀 속성
- `tailwindFunctions`: Tailwind 클래스를 정렬할 함수 이름 (예: `cva`, `tw`)

## Git Hooks 설정 (선택사항)

커밋 전에 자동으로 코드를 포맷팅하려면 Husky와 lint-staged를 사용합니다:

### 설치

```bash
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
```

### package.json 설정

```json
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
```

이제 `git commit` 시 자동으로 Prettier가 실행됩니다.

## 사용법

### CLI에서 실행

전체 프로젝트 포맷팅:

```bash
npx prettier --write .
```

특정 파일 포맷팅:

```bash
npx prettier --write src/index.js
```

### 에디터 통합

대부분의 에디터(VS Code, WebStorm 등)는 Prettier 플러그인을 제공합니다. 설치 후 저장 시 자동 포맷팅을 활성화할 수 있습니다.

## 참고 자료

- [Prettier 공식 문서](https://prettier.io/docs/en/index.html)
- [Prettier Playground](https://prettier.io/playground/)
- [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)