VSCodeでファイル保存時にESLintが動作しない。"(構成)からコード アクションを取得します"のポップアップが出る。

vscodeでファイル保存時にESLintが動作するように設定した。

しかしいつの間にか動作しなくなっており、保存時に下のポップアップが表示されるようになった。

さらに赤波線によるLintエラーの警告も挙動がおかしくなっていた。

ただしコンソールからESLintを実行すると正しく動作した。

状況

(Prettierもファイル保存時に動作するよう設定しているが今回の問題とは関係ない)

ディレクトリ構成

　/
　├ .vscode/setting.json
　├ app/express/
　│　　　　　├ node_modules
　│　　　　　├ .eslintrc.js
　│　　　　　├ .prettierrc
　│         └ src/
　└ etc

.vscode/setting.jsonではファイル保存時にESLintとPrettierが動作するよう設定している。

.vscode/setting.json

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

当然ながらESLint(とPrettier)のパッケージと拡張機能はインストール済み。

解決方法

.vscode/setting.jsonに設定eslint.workingDirectoriesを追加してから、VSCodeを再起動する。

.vscode/setting.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": ["./app/express"] // 追加
}

解説

ESLintの設定ファイル.eslintrc.jsはプロジェクトルートに置く必要がある。試しにプロジェクトルートに移動してみると正しく動作した。(そういえばディレクトリ構成を変更してからおかしくなった気がする)

プロジェクトルート以外に置きたい場合、"eslint.workingDirectories": ["プロジェクトルートから.eslintrc.jsがあるディレクトリまでの相対パス"]を追加する。