VSCodeのソース上ではESLintのエラーが表示されない時の対処

Flat Configの場合の話です
eslint.experimental.useFlatConfigをtrueにすると解消されました！

1. 背景

ターミナルでnpx eslint ファイルパスをする場合はeslintの設定ファイルに従ってエラーが検知されます。
しかし、VSCodeでソースファイルを開くとESLintでエラーが表示されません。

VSCodeで以下のESLintプラグインをインストールし、有効にしています。

eslintの設定ファイルもルート直下に置いています。

eslint.config.js

import typescriptEslintParser from "@typescript-eslint/parser";
import js from "@eslint/js";
import tseslint from 'typescript-eslint';

export default [
    {languageOptions: {
        parser: typescriptEslintParser,
        parserOptions: {
          project: true,
          sourceType: "module",
        },
      }
    },
    js.configs.recommended,
    ...tseslint.configs.recommended,
   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn",
           "@typescript-eslint/prefer-includes": "error"
       }
   }
];

VSCodeの再起動、VSCodeのESLintの拡張機能の再起動もしても変わらずでした。

2. 解決策

こちらで紹介されていました！

.vscode/settings.json

{
	"eslint.experimental.useFlatConfig": true
}

この方法か歯車マークの「Settings」を押して、チェックを入れて下さい。

これで以下のようにエディタでエラーが表示されます。

3. 上の解決策を知るまでに対応した一時的な対応

commonjsの記法にして、ファイル名を.eslintrc.mjsにする方法です。

ESLintでエラーが表示されるはずのファイルを開きます。

「OUTPUT」を開き、「Tasks」のプルダウンで、「ESLint」を選択します。

すると以下のエラーが表示されています。

.eslintrc.mjsにしても読み込まれませんでした。

.eslintrc.cjsにすると読み込まれました。

CommonJSの記法に書き換えます。

.eslintrc.cjs

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    sourceType: "module",
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
    "no-unused-vars": "warn",
    "no-undef": "warn",
    "@typescript-eslint/prefer-includes": "error"
  }
};

これで読み込まれました。

該当のファイルを見てみると、ESLintのエラーが表示されています。