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

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

# 1. 背景

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

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

https://marketplace.visualstudio.com/items?itemName=dbaeumer.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. 解決策

https://qiita.com/Shilaca/items/c494e4dc6b536a5231de#vscode-%E3%81%AE-eslint-extension-%E3%81%A7-flat-config-%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%99%E3%82%8B

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

```.vscode/settings.json
{
	"eslint.experimental.useFlatConfig": true
}
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/359913aa-5482-cc05-d927-a7783fad813d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/ada4bb5b-9d28-ca34-d74a-69612620f75a.png)

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

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

https://stackoverflow.com/questions/45093510/eslint-not-working-in-vs-code

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/af1f4328-0c6d-8bbe-3123-4063e0e83c51.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/f65854ce-dd0c-faf8-b185-fd524458dd09.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/2fc13d5c-f93c-6e4f-5236-6a6313829eca.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/e879229f-7d2c-1986-b2a0-018142c5e232.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/95e23fab-c5d5-82a7-d753-7351ebac2e0f.png)

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

```js:.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"
  }
};

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/146705c6-55e3-abdc-b929-e0377a4139c6.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/06933d73-3bcd-d9f9-9686-090e2b45ac3f.png)