Prettier 코드 포맷팅 설정

Introduction

Prettier는 코드 포맷팅을 자동화하여 팀원 간의 코드 스타일 차이를 제거하는 강력한 도구입니다. 설정을 커스터마이징하면 프로젝트의 요구사항에 맞는 포맷팅 규칙을 정의할 수 있습니다. 이 글에서는 Prettier 설정과 프로젝트 통합 방법을 다루겠습니다.

Environment

// package.json
{
  "name": "my-project",
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "devDependencies": {
    "prettier": "^3.2.0",
    "prettier-plugin-tailwindcss": "^0.5.11"
  }
}

npx prettier --version
# 3.2.4

Problem

기본 Prettier 설정의 한계:

// .prettierrc (기본 설정)
{
  "singleQuote": false,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

// 문제점:
// 1. 팀 컨벤션과 불일치
// 2. 파일별 설정 불가
// 3. Tailwind 클래스 정렬 미적용
// 4. import 정렬 미적용

# 기본 설정으로 포맷팅 시
npx prettier --check src/

# 결과: 89 files have different formatting
# 프로젝트 컨벤션에 맞지 않는 포맷팅

Analysis

Prettier 설정 구조를 분석했습니다:

// Prettier 설정 파일 우선순위
// 1. .prettierrc (JSON/YAML)
// 2. .prettierrc.json
// 3. .prettierrc.yaml
// 4. .prettierrc.yml
// 5. .prettierrc.json5
// 6. .prettierrc.js
// 7. prettier.config.js
// 8. .prettierrc.toml
// 9. package.json의 "prettier"

// .prettierignore로 제외할 파일 지정

// 프로젝트 구조 확인
{
  "src": {
    "components": [],
    "pages": [],
    "styles": [],
    "public": []
  },
  "files": {
    "package-lock.json": [],
    "yarn.lock": []
  }
}

Solution

1단계: 기본 설정 구성

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "htmlWhitespaceSensitivity": "css"
}

2단계: 파일별 오버라이드

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "printWidth": 100,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 80,
        "tabWidth": 2
      }
    },
    {
      "files": "*.md",
      "options": {
        "printWidth": 80,
        "proseWrap": "always"
      }
    },
    {
      "files": "*.yml",
      "options": {
        "singleQuote": false,
        "tabWidth": 2
      }
    },
    {
      "files": "*.css",
      "options": {
        "singleQuote": false
      }
    },
    {
      "files": ["*.html", "*.vue"],
      "options": {
        "singleQuote": false,
        "htmlWhitespaceSensitivity": "ignore"
      }
    },
    {
      "files": ["*.tsx", "*.jsx"],
      "options": {
        "jsxSingleQuote": true
      }
    }
  ]
}

3단계: Tailwind CSS 통합

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js",
  "tailwindAttributes": ["class", "className"],
  "tailwindFunctions": ["clsx", "cn"]
}

// prettier.config.js (플러그인 사용 시)
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  plugins: [
    require.resolve('prettier-plugin-tailwindcss')
  ],
  tailwindConfig: './tailwind.config.js'
};

4단계: .prettierignore 작성

# .prettierignore
node_modules/
dist/
build/
coverage/
.next/
.nuxt/
*.min.js
*.min.css
package-lock.json
yarn.lock
pnpm-lock.yaml
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Prettier와 ESLint 통합
# eslint-config-prettier 설치
npm install --save-dev eslint-config-prettier

# .eslintrc.js에 추가
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'  // 반드시 마지막에
  ]
};

Lessons Learned

team consensus: Prettier 설정은 팀 전체의 합의를 통해 결정해야 합니다
IDE 통합: VSCode, IntelliJ 등의 IDE에서 Prettier를 기본 포맷터로 설정하면 자동 포맷팅이 가능합니다
Git Hooks 통합: husky와 lint-staged를 사용하여 커밋 시 자동으로 포맷팅을 수행할 수 있습니다
CI/CD 통합: prettier --check를 CI 파이프라인에 포함하여 포맷팅 일관성을 강제해야 합니다
Tailwind 클래스 정렬: prettier-plugin-tailwindcss를 사용하면 Tailwind 클래스를 자동으로 정렬할 수 있습니다

이 블로그는 외부 스폰서십, 제휴 마케팅 또는 광고 수익을 받지 않습니다.

Prettier 코드 포맷팅 설정: 프로젝트 일관성 확보