Prettier: Claude Code 활용 가이드

Prettierで統一されたコード스타일を実現する

Prettierはopinionatedなコード포매터で、스타일에 관한議論を終わらせてくれるツールです。설정項目が限定されているため迷いが少なく、チーム全体で一貫したコード스타일を維持할 수 있습니다。Claude Code는 프로젝트に最適な설정の提案から、플러그인の통합までサポートします。

기본 설정

Claude Code에설정파일の생성を依頼합시다。

> TypeScript + React + Tailwind CSS프로젝트のPrettier설정를 생성해줘。
> Tailwind클래스の自動정렬、가져오기の自動整理も含めて。

// prettier.config.mjs
/** @type {import("prettier").Config} */
const config = {
  // 基本설정
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "as-needed",
  trailingComma: "all",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "always",
  endOfLine: "lf",

  // JSX설정
  jsxSingleQuote: false,

  // 플러그인
  plugins: [
    "prettier-plugin-tailwindcss",
    "@ianvs/prettier-plugin-sort-imports",
  ],

  // Tailwind CSS클래스の自動정렬
  tailwindFunctions: ["clsx", "cn", "cva"],

  // 가져오기の自動整理
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "",
    "^[./]",
  ],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderTypeScriptVersion: "5.0.0",
};

export default config;

無視설정

フォーマット対象外の파일を指定します。

# .prettierignore
node_modules/
.next/
out/
dist/
build/
coverage/
public/

# 自動生成ファイル
*.generated.ts
prisma/migrations/
src/generated/

# ロックファイル
package-lock.json
pnpm-lock.yaml
yarn.lock

# その他
*.min.js
*.min.css

파일種類ごとの설정

特定の파일タイプで異なる설정を適用するパターンです。

// prettier.config.mjs
const config = {
  // ...基本설정

  overrides: [
    {
      files: "*.json",
      options: {
        printWidth: 120,
        tabWidth: 2,
      },
    },
    {
      files: "*.md",
      options: {
        proseWrap: "always",
        printWidth: 80,
      },
    },
    {
      files: "*.yml",
      options: {
        tabWidth: 2,
        singleQuote: false,
      },
    },
    {
      files: ["*.css", "*.scss"],
      options: {
        singleQuote: false,
      },
    },
    {
      files: "*.svg",
      options: {
        parser: "html",
      },
    },
  ],
};

export default config;

ESLintとの연동

ESLintとPrettierの競合を解消する설정です。

// eslint.config.mjs
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  // ...他のESLint설정

  // Prettierと競合するルールを무효化（最後に配置）
  eslintConfigPrettier,
];

エディタ통합

VS Codeでの저장時自動フォーマットを설정します。

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

npm scriptsの설정

よく使うコマンドをスクリプトに등록します。

// package.json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "format:staged": "prettier --write --list-different"
  }
}

Prettierの설정を選ぶ際のポイント

Claude Code에설정を依頼する際に考慮すべき点をまとめます。

1. printWidth - 80が標準的。モニターサイズやチームの好みで調整
2. semi - セミコロンの有無。프로젝트全体で統一する
3. singleQuote - JSX를 사용하는場合はdoubleQuoteが一般的
4. trailingComma - "all"がTypeScript프로젝트では推奨
5. endOfLine - クロスプラット폼개발では"lf"を推奨

重要なのは、チーム内で「どの설정にするか」を一度決めたら、以降はPrettierに任せて스타일の議論に시간を使わないことです。

정리

Prettierは설정が少ないからこそ、一度설정すれば継続的にコード스타일を統一してくれます。Claude Codeを활용すれば、플러그인選定、overrides설정、エディタ통합まで短시간で最適な구성を구축가능합니다。

ESLintとの연동はESLint설정최적화가이드を、コミット時の自動実行はHusky + lint-staged설정가이드를 참고하세요.Prettier공식 문서도 확인해 두세요.