Prettier/ESLint: Conflicting rules

PrettierとESLintの競合解決方法

概要

PrettierとESLintのフォーマットルールが競合して、保存のたびにコードが書き換わる問題です。

症状

保存 → ESLint修正 → Prettier修正 → ESLint修正... の無限ループ

原因

重複ルール: ESLintとPrettierで同じルールが異なる設定
設定の優先順位: どちらが先に適用されるか不明確
エディタ設定: 保存時の自動修正が競合

解決策

1. eslint-config-prettierを使用

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

1
2
3
4
5
6
7
8
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier'  // 最後に追加
  ]
};

2. eslint-plugin-prettierは非推奨

1
2
3
4
5
// 古い方法（非推奨）
// plugins: ['prettier'],
// rules: { 'prettier/prettier': 'error' }

// 新しい方法：ESLintとPrettierを別々に実行

3. package.jsonスクリプト

1
2
3
4
5
6
7
{
  "scripts": {
    "lint": "eslint --fix . && prettier --write .",
    "format": "prettier --write .",
    "check": "eslint . && prettier --check ."
  }
}

4. VSCode設定

1
2
3
4
5
6
7
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

よくある間違い

eslint-plugin-prettierの使用（遅くなる）
Prettierの後にESLintを実行

この記事は役に立ちましたか？