JavaScript | Prettier＋ESLintを共存させて競合を防ぐ設定

Prettier と ESLint はどちらもコード整形・チェックを行いますが、ルールがかぶると競合して「保存時に勝手に戻される」などのトラブルが起きます。
ここでは 競合を防ぎつつ両方を使う設定 をまとめます。

目的

• ESLint でコードの安全性や文法チェック
• Prettier でコードのフォーマットを統一
• 競合ルールは Prettier を優先して自動修正

📁 必要なパッケージ

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

役割

• eslint-config-prettier → ESLintのフォーマット系ルールを無効化して競合回避
• eslint-plugin-prettier → Prettier を ESLint のルールとして統合

1. .eslintrc.json 設定例

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unsafe-finally": "error",  // finally 内の return / throw を禁止
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "singleQuote": false,
        "printWidth": 100,
        "trailingComma": "es5"
      }
    ]
  }
}

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unsafe-finally": "error",  // finally 内の return / throw を禁止
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "singleQuote": false,
        "printWidth": 100,
        "trailingComma": "es5"
      }
    ]
  }
}

✅ ポイント

• "plugin:prettier/recommended" で Prettier を ESLint 内に統合
• ESLint の競合ルールは自動的に無効化
• prettier/prettier でフォーマットルールを自由に設定可能

2. Prettier 単独設定（任意）

プロジェクトルートに .prettierrc.json を作ると便利：

{
  "semi": true,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "es5"
}

{
  "semi": true,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "es5"
}

※ ESLint と同じルールを合わせておくと、自動修正時のズレを防げます。

3. VSCode 連携設定（.vscode/settings.json）

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

• 保存時に Prettier でフォーマット
• 同時に ESLint で警告・自動修正
• ESLint と Prettier が競合せず安全

4. 動作イメージ

async function test() {throw new Error("err");} // ESLint: no-unsafe-finally

async function test() {throw new Error("err");} // ESLint: no-unsafe-finally

• 保存すると：
  1. Prettier がインデント・改行・セミコロンを修正
  2. ESLint が no-unsafe-finally や文法エラーをチェック
  3. VSCode で波線＆問題パネルにエラー表示

✅ チーム全員で同じスタイル・チェックを強制できる

まとめ

💡 ポイントまとめ

1. Prettier を ESLint に統合して競合ルールを無効化
2. VSCode で保存時自動修正＆警告表示を有効化
3. チームで共有すると全員の環境で統一できる