Prettier with 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公式ドキュメントも確認しておきましょう。