Zenn
🔧

VS CodeのESLint拡張機能でESLintが認識されなかった時の対処内容

2024/01/10に公開
VS Code
ESLint
VS Code 拡張機能
tech

状況

  • Node.jsを使ったプロジェクトでESLintのセットアップをした
  • eslintコマンドは正しく動作している
  • VS CodeのESLint拡張機能を入れたものの、VS Code内でエラーなどが表示されない

環境

  • ESLint 8.56.0
  • VS Code 1.85
  • vscode-eslint 2.4.2

https://www.npmjs.com/package/eslint
https://code.visualstudio.com/
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

確認したこと/試したこと

  • ESLintの設定ファイル.eslintrc.cjsが正しく設定されているか
    • 設定されている
    • そもそもeslintコマンドは正しく動いているので、これはおそらく関係ない

解決に至った対処方法

VS Codeの設定に以下の行を追加したら、ちゃんとエラーなどが表示されるようになった。

.vscode/settings.json
"eslint.useESLintClass": true

この設定項目eslint.useESLintClassについてvscode-eslint拡張機能のCHANGELOGで言及されていた。

2.2.1
Extended support for ESLint V8.0. This release also provides an option to use the new ESLint class API introduced in version 7 of the ESLint npm module. The corresponding setting is eslint.useESLintClass. In addition the rules taken into consideration during code action on save can now be configured. However this feature requires the new ESLint class API. So you either need to use ESLint version 8 or version 7 with "eslint.useESLintClass": true.

ESLintバージョン7から採用された、新しいAPIに対応するためのフラグらしい。

参考にした記事など

https://qiita.com/hibohiboo/items/bc7d7fe2679b725f20d8
https://github.com/microsoft/vscode-eslint

Discussion