Claude Code के साथ Prettier

Prettierで統一されたcodestyleを実現する

Prettierはopinionatedなcodeフォーマッターで、styleに関する議論を終わらせてくれるツール है।settings項目が限定されているため迷いが少なく、チーム全体で一貫したcodestyleを維持でき है।Claude CodeはProjectに最適なsettingsの提案 से、pluginのintegration तकサポートし है।

基本settings

Claude Codeにsettingsfileのgenerateを依頼 करें।

> TypeScript + React + Tailwind CSSProjectのPrettiersettingsをबनाओ。
> Tailwindclassの自動sort、インポートの自動整理も含めて。

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

  // JSXsettings
  jsxSingleQuote: false,

  // plugin
  plugins: [
    "prettier-plugin-tailwindcss",
    "@ianvs/prettier-plugin-sort-imports",
  ],

  // Tailwind CSSclassの自動sort
  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;

無視settings

format対象बाहरのfileを指定し है।

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

# 自動generatefile
*.generated.ts
prisma/migrations/
src/generated/

# ロックfile
package-lock.json
pnpm-lock.yaml
yarn.lock

# उस他
*.min.js
*.min.css

file種類ごとのsettings

特定のfiletypeで異なるsettingsを適用するpattern है।

// prettier.config.mjs
const config = {
  // ...基本settings

  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とのintegration

ESLintとPrettierの競合を解消するsettings है।

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

export default [
  // ...他のESLintsettings

  // Prettierと競合するruleを無効化（最बादに配置）
  eslintConfigPrettier,
];

エディタintegration

VS Codeでの保存時自動formatをsettingsし है।

// .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のsettings

よくuse करनाcommandをスクリプトに登録し है।

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

Prettierのsettingsを選ぶ際のポイント

Claude Codeにsettingsを依頼する際に考慮すべき点をまとめ है।

1. printWidth - 80が標準的。モニターsizeやチームの好みで調整
2. semi - セミコロンの有無。Project全体で統一する
3. singleQuote - JSX use करनाcase मेंdoubleQuoteが一般的
4. trailingComma - "all"がTypeScriptProjectでは推奨
5. endOfLine - クロスプラットformdevelopmentでは"lf"を推奨

importantなのは、チーム内で「कौन साsettingsにするか」を一度決めたら、以降はPrettierに任せてstyleの議論に時बीचを使わない बात है।

まとめ

Prettierはsettingsがकम सेこそ、一度settingsすれば継続的にcodestyleを統一してくれ है।Claude Code का लाभ उठाकर、plugin選定、overridessettings、エディタintegration तककम समय में最適な構成 buildpossible है।

ESLintとのintegrationはESLintsettingsoptimizationガイドを、コミット時の自動実行はHusky + lint-stagedsettingsガイドをदेखें。Prettierofficial documentationもconfirmしておきましょう。