Prettier

Prettier란?

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

주요 특징

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

설치

npm

npm install --save-dev prettier

yarn

yarn add --dev prettier

pnpm

pnpm add --save-dev prettier

bun

bun add --dev prettier

설정 파일 생성

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

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

프로젝트 설정

기본 설정

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

{
  "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 클래스를 자동으로 정렬하기 위해 플러그인을 설치합니다:

npm install -D prettier-plugin-tailwindcss

플러그인 적용

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

{
  "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를 사용합니다:

설치

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

package.json 설정

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

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

사용법

CLI에서 실행

전체 프로젝트 포맷팅:

npx prettier --write .

특정 파일 포맷팅:

npx prettier --write src/index.js

에디터 통합

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