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官方文档也建议确认一下。