【ESLint】A config object is using the "extends" key, which is not supported in flat config system. Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.の解決方法

はじめに

React開発でESLintを設定している際に、遭遇したESLint下記エラーの解決方法になります。

A config object is using the "extends" key, which is not supported in flat config system.

Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.

警告
現在ESLintの設定を勉強している途中ですので誤まった解決策である場合があると思います。その場合はぜひご指摘いただけると幸いです。（2024年9月現在）

原因

ESLintのバージョンが変わりflat configの書き方ではextendsは使用できなくなったようです。

export default [
  {
    languageOptions: {
      globals: globals.browser,
    },
    settings: {
      react: {
        version: "detect",
      },
    },
    extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],//古い書き方
  },
];

解決策

以下のように直接インポートするような記述に変更します。

export default [
  {
    languageOptions: {
      globals: globals.browser,
    },
    settings: {
      react: {
        version: "detect",
      },
    },
  },

  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReactConfig,
  prettier,
];

終わりに

ESLintについてまだまだわからないことがたくさんあるので間違いがあればぜひご指摘お願いいたします。