Prettier dengan Claude Code

Prettierで統一されたコードstyleを実現

Prettier opinionatedなコードformatter 、style 関 議論 終わらせてくtools.pengaturan項目 限定されて untuk 迷い 少 tidak 、チーム全体 一貫 コードstyle 維持 bisa dilakukan.Claude Code proyek 最適なpengaturan 提案 dari 、plugin integrasiま サポート.

dasarpengaturan

Mari minta Claude Code untuk men-generate file konfigurasi.

> TypeScript + React + Tailwind CSSproyek Prettierpengaturan buatkan.
> Tailwindclass 自動sort、インポート 自動整理 juga 含めて。

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

  // JSXpengaturan
  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;

無視pengaturan

format対象外 file penentuan.

# .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

pengaturan file種類ご

特定 fileタイプ 異なるpengaturan 適用 pola.

// prettier.config.mjs
const config = {
  // ...dasarpengaturan

  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;

integrasi ESLint

ESLint dan Prettier 競合 解消 pengaturan.

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

export default [
  // ...他 ESLintpengaturan

  // Prettier dan 競合ルール 無効化（最後 penempatan）
  eslintConfigPrettier,
];

editorintegrasi

VS Code penyimpanan時自動format pengaturan.

// .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"
  }
}

Pengaturan npm scripts

よく使うcommand script registrasi.

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

ポイント Prettierのpengaturanを選ぶ際

Claude Code pengaturan 依頼 際 考慮すべき点 ま dan め.

1. printWidth - 80 標準的。モニターサイズやチーム 好み 調整
2. semi - セミコロン 有無。proyek全体 統一
3. singleQuote - JSX 使う場合 doubleQuote 一般的
4. trailingComma - "all" TypeScriptproyek 推奨
5. endOfLine - クロスplatformpengembangan "lf" 推奨

pentingな 、チーム内 「ど pengaturan か」 一度決めたら、以降 Prettier 任せてstyle 議論 時間 使わ tidakこ dan .

Ringkasan

Prettier pengaturan 少 tidak dari こそ、一度pengaturanすれば継続的 コードstyle 統一 くれ.Claude Code pemanfaatanすれば、plugin選定、overridespengaturan、editorintegrasiま waktu singkat 最適な構成 pembangunandimungkinkan.

ESLint dan integrasi ESLintpengaturanoptimasipanduan 、コミット時 自動実行 Husky + lint-stagedpengaturanpanduan silakan lihat.Prettier公式dokumen juga konfirmasi おき.