Prettier — 코드 스타일을 자동으로 맞추는 포맷터

Prettier는 코드를 읽어 AST로 변환한 뒤, 설정된 규칙에 맞춰 처음부터 다시 출력합니다.

Opinionated: "정해진 방식이 있다"는 뜻 — Prettier는 스타일 선택지를 최소화하여 팀 내 스타일 논쟁 자체를 없애는 철학을 가집니다

ESLint가 "이 코드가 올바른가"를 물어본다면, Prettier는 "이 코드가 보기 좋은가"를 담당합니다. 들여쓰기 폭, 따옴표 종류, 줄 길이, 후행 쉼표 등 순수하게 미적인 스타일 문제를 자동으로 통일합니다.

---

핵심 개념

1. Formatter

Formatter의 동작 방식은 "찾아서 바꾸기"가 아닙니다. 소스코드 전체를 파싱해 AST를 만들고, 그 AST를 규칙대로 재직렬화(re-print)합니다. 덕분에 어떤 스타일로 작성하더라도 결과는 항상 동일합니다.

// 입력: 들여쓰기·따옴표·줄 길이가 제각각인 코드
const greeting =    "hello"
const obj = {name:"Alice",age:30,city:"Seoul",country:"Korea"}
function add(a,b){return a+b}

// 출력: Prettier가 정렬한 코드 (printWidth: 80, singleQuote: true 기준)
const greeting = "hello";
const obj = {
  name: "Alice",
  age: 30,
  city: "Seoul",
  country: "Korea",
};
function add(a, b) {
  return a + b;
}

Prettier가 지원하는 언어는 JavaScript, TypeScript, JSX, CSS, SCSS, HTML, JSON, Markdown, GraphQL 등 매우 넓습니다. 하나의 도구로 프로젝트 전체 파일 형식을 커버할 수 있습니다.

---

2. Configuration

Prettier의 설정 파일은 .prettierrc(JSON), .prettierrc.js, prettier.config.js 등 여러 형식을 지원합니다. 설정 가능한 옵션이 의도적으로 적습니다.

// .prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

주요 옵션 설명입니다.

printWidth는 "이 길이를 넘으면 줄 바꿈을 시도한다"는 의미이며, 항상 해당 길이를 보장하지는 않습니다. 짧은 표현식은 그대로 한 줄에 둡니다.

---

3. Ignore

모든 파일을 포맷할 필요는 없습니다. 자동 생성 파일, 빌드 결과물, 외부에서 가져온 파일은 포맷 대상에서 제외하는 것이 좋습니다.

.prettierignore 파일:

# .prettierignore
node_modules/
dist/
build/
coverage/
*.min.js
*.min.css
public/

.gitignore와 동일한 문법을 사용합니다. Prettier는 기본적으로 node_modules를 자동으로 무시하지만, 명시적으로 적어두는 것이 명확합니다.

파일 내 인라인 비활성화:

특정 코드 블록을 포맷 대상에서 제외하고 싶을 때 사용합니다.

// 전체 파일 비활성화: 파일 맨 위에 작성
// prettier-ignore-start
// ... (파일 내 모든 코드 무시)

// 특정 표현식 비활성화
// prettier-ignore
const matrix = [1,0,0,
                0,1,0,
                0,0,1];

---

4. Plugin

Prettier 자체가 지원하지 않는 언어나 특수 포맷팅 규칙은 Plugin으로 확장합니다.

# Tailwind CSS 클래스 정렬 플러그인
npm install -D prettier-plugin-tailwindcss

# SQL 포맷 플러그인
npm install -D prettier-plugin-sql

# 패키지 정렬 플러그인
npm install -D prettier-plugin-packagejson

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

prettier-plugin-tailwindcss는 가장 널리 쓰이는 Plugin입니다. Tailwind CSS의 유틸리티 클래스를 공식 권장 순서대로 자동 정렬해 줍니다.

// 입력: 클래스 순서가 뒤섞인 상태
<div className="text-white p-4 flex bg-blue-500 rounded-lg items-center">

// 출력: Tailwind 공식 순서로 정렬
<div className="flex items-center rounded-lg bg-blue-500 p-4 text-white">

---

5. Editor Integration

Prettier는 CLI 실행뿐 아니라 에디터에 연동해 저장 시 자동 포맷하는 방식으로 주로 사용됩니다.

VS Code 설정:

# VS Code Prettier 확장 설치
# Extension ID: esbenp.prettier-vscode

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

formatOnSave를 true로 설정하면 파일을 저장할 때마다 Prettier가 자동으로 실행됩니다.

ESLint와 충돌 방지:

ESLint에도 스타일 관련 Rule이 있습니다. Prettier와 충돌하지 않도록 ESLint의 스타일 Rule을 비활성화해야 합니다.

npm install -D eslint-config-prettier

// eslint.config.js
import prettierConfig from "eslint-config-prettier";

export default [
  // ... 기존 설정들
  prettierConfig,  // 마지막에 추가 — Prettier와 충돌하는 ESLint 규칙을 모두 off
];

eslint-config-prettier는 포맷팅 관련 ESLint Rule을 일괄 비활성화합니다. ESLint는 코드 품질 검사만, Prettier는 포맷팅만 담당하도록 역할을 명확히 분리할 수 있습니다.

역할 분리

  ESLint  →  코드 품질 (버그, 안티패턴, 미사용 변수)
  Prettier →  코드 스타일 (들여쓰기, 따옴표, 줄 길이)

Git Hook으로 커밋 전 자동 실행:

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx,css,json,md}": "prettier --write"
  }
}

# .husky/pre-commit
npx lint-staged

커밋할 때마다 변경된 파일에만 Prettier를 실행해 포맷되지 않은 코드가 저장소에 들어가는 것을 방지합니다.