VSCode拡張機能のESLintで.eslintignoreが機能しないときの対処法

概要

表題のとおりですが、VSCodeで開発中にESLintの.eslintignoreに除外したいものを記載しているのに、VSCode上では無視されないという状況にハマったので原因調べました。誰かが同じように嵌った時に役に立てたら幸いです。

状況

• .eslintignoreに除外したいファイル・ディレクトリを記載している
• コマンドでnpx eslintを実行すると.eslintignoreの内容の通り適切に除外される
• VSCodeの拡張機能のESlintでは.eslintignoreの内容が反映されずエラーがあればエラーになる

拡張機能はこれ

嵌った時のディレクトリ構成

以下のようにrootディレクトリにfrontとbackをそれぞれ用意し、Docker関連のファイルを置く構成です。
frontディレクトリにcreate-react-appで作成したReactアプリが入っています。（ESLint関連の設定ファイルも）

root/
  ├ back/
  ├ front/
  │　├...
  │　├.eslintrc.js
  │　└.eslintignore
  ├ .dockerignore
  ├ Dockerfile
  ├ docker-compose.yml

なぜ機能しないのか

.eslintignoreをおいている場所をVSCodeの作業ディレクトリにしないと機能しないらしいです。
rootディレクトリを作業ディレクトリとしてVSCodeを開いても、適切にESlint（拡張機能）の設定が反映されないようです。

以下のようにfrontディレクトリ内でESlintのエラーが発生します。

対処法

frontディレクトリを作業ディレクトリとしてVSCodeを開きましょう。
.eslintignoreの内容がが適切に反映されるはずです。

以下のようにESlintのエラーが発生しなくなります。

参考