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 のような論理ルールのみ。
これで「どちらが正か」の議論が消える。

実行例

実際に上記の手順を node:20 環境で動かすと、eslint-config-prettier 未導入の状態では ESLint の quotes ルールがシングルクォートをエラーとして検出し終了コード 1 を返すが、flat config の末尾に eslint-config-prettier を展開した直後に終了コード 0 となり競合が解消されることを確認できる。

v9.39.5

$ npx eslint sample.js
/tmp/tmp.OJC4BABvk8/sample.js
  1:11  error  Strings must use doublequote  quotes
 
✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.
 
eslint の終了コード: 1（1 = 整形ルールが Prettier と競合）

$ npx eslint sample.js
eslint の終了コード: 0（0 = quotes が off になり競合解消）

— 2026-08-02 時点の出力