ESLint と Prettier の競合でフォーマットできない

要約

ESLint と Prettier の競合は、両方が「整形」を担当しているときに発生する。
解決の原則は「整形は Prettier に一本化、ESLint は論理ルールのみ」。
公式の Integrating with Linters が推す構成は eslint-config-prettier を入れて重複ルールを無効化することだ。

よくある原因

1. eslint-config-prettier 未導入: ESLint 側の semi / quotes / indent などの整形系ルールが残り、Prettier の出力を弾く
2. eslint-plugin-prettier の二重実行: ESLint 内部から Prettier を走らせると、保存ごとに差分が再計算され表示が揺れる
3. エディタ設定の競合: editor.formatOnSave と ESLint の source.fixAll.eslint が両方有効で順序が安定しない
4. 設定ファイルのドリフト: .prettierrc と eslint.config.js で singleQuote や printWidth が食い違っている

解決策

1. eslint-config-prettier を導入

npm install --save-dev eslint-config-prettier

flat config では末尾で展開する。

// eslint.config.js
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
 
export default [
  js.configs.recommended,
  // プロジェクト固有ルール
  eslintConfigPrettier,
];

これで Prettier と競合する ESLint ルールが一括 off になる。

2. eslint-plugin-prettier を外す

ESLint 経由で Prettier を走らせると、警告として表示・自動修正されるが、整形のたびに再 lint が走り体感が遅くなる。
整形は prettier --write または IDE 統合に任せる。

npm uninstall eslint-plugin-prettier

CI では並列で走らせる。

npx prettier --check .
npx eslint .

3. エディタの整形担当を固定

.vscode/settings.json に明示。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

保存時はまず Prettier で整形 → 続けて ESLint の autofix が走るので競合しない。

4. .prettierrc を真の正に

.prettierrc.json を一箇所に置き、ESLint 側からは semi / quotes / indent / comma-dangle などの整形ルールを削除する。
残すのは no-unused-vars / no-undef のような論理ルールのみ。
これで「どちらが正か」の議論が消える。