ESLintがVSCodeで保存時に自動修正されない問題

Vue(Nuxt)プロジェクトでESLintを使用している際、保存時に自動的にESLintが実行され、警告を自動修正してくれない問題に遭遇することがあります。この記事では、この問題の解決方法を体系的に解説します。

問題の概要

VSCodeでファイルを保存しても、ESLintの警告が自動修正されず、以下のような状況が発生します：

• ESLintエラーが表示されるが自動修正されない
• 設定は正しいはずなのに機能しない
• プロジェクトによって動作が異なる

基本的な設定

まず、ESLintの自動修正を有効にする基本的な設定は以下の通りです：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

この設定は以下のいずれかの方法で追加します：

1. ユーザー設定（グローバル）：Ctrl + , → 設定アイコン → 設定(JSON)を開く
2. ワークスペース設定（プロジェクト固有）：プロジェクトルートに .vscode/settings.json を作成

WARNING

プロジェクト固有の設定を使う場合は、.vscode フォルダがプロジェクトルートにあることを確認してください。別の場所にあると設定が認識されない可能性があります。

よくある原因と解決策

1. ESLint拡張機能の問題

ESLint拡張機能が正しく機能していない場合があります：

# 解決策：ESLint拡張機能を再インストール
1. VSCodeで拡張機能タブを開く
2. "ESLint"を検索
3. 拡張機能をアンインストール后再インストール

2. フォーマッタの競合

複数のフォーマッタが競合している場合、ESLintの自動修正が機能しません：

{
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

TIP

右下のベルアイコンをクリックすると、フォーマッタの競合が通知されることがあります。そこで適切なフォーマッタを選択してください。

3. 作業ディレクトリの設定

プロジェクトに複数のESLint設定がある場合、作業ディレクトリを明示する必要があります：

{
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

4. ESLintのフラット設定の問題

ESLintの新しいフラット設定形式（eslint.config.js）を使用している場合：

{
  "eslint.useFlatConfig": false
}

5. ESLintフォーマットの有効化

ESLintのフォーマット機能を明示的に有効にします：

{
  "eslint.format.enable": true
}

高度なトラブルシューティング

パッケージの不足エラー

ESLintプラグインの不足エラーが発生している場合：

# 不足しているプラグインをインストール
yarn add eslint-plugin-import
# または
npm install eslint-plugin-import

# node_modulesをクリーンインストール
rm -rf node_modules
yarn install  # または npm install

ESLintの動作確認

ターミナルでESLintが正しく動作するか確認します：

# ESLintの動作テスト
eslint --ext ".js,.vue" --ignore-path .gitignore .

正常に動作する場合は終了コード0が返ります。エラーがある場合は終了コード2が返ります。

推奨設定のまとめ

最も効果的な設定は以下の通りです：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

最後の手段

上記すべてを試しても解決しない場合：

1. ESLintサーバーの再起動：Ctrl + Shift + P → "ESLint: Restart ESLint Server"
2. VSCodeの再起動
3. キャッシュのクリア：Ctrl + Shift + P → "Developer: Reload Window"

注意

プロジェクトによっては、これらの設定を適切に調整する必要があります。特に大規模なモノレポや特殊な構成のプロジェクトでは、作業ディレクトリの設定が重要になります。

まとめ

ESLintの自動修正が機能しない問題は、多くの場合以下のいずれかが原因です：

1. フォーマッタの競合
2. 作業ディレクトリの設定不足
3. ESLint拡張機能自体の問題
4. 必要なパッケージの不足

この記事で紹介した解決策を順に試すことで、ほとんどの場合問題を解決できるはずです。