Prettier + ESLint の開発環境でeslint.config.jsに「parsing error the keyword 'import' is reserved」が表示される場合の解消法

エラー現象

開発環境にPrettierとESLintを導入すると、以下のようなESLintエラーが表示される。
parsing error the keyword 'import' is reserved

開発環境

package.json

package.json

{
    "name": "hair-salon-site",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "lint": "eslint src",
        "lint:fix": "eslint src --fix",
        "preview": "vite preview",
        "test": "vitest",
        "test:watch": "vitest watch",
        "coverage": "vitest run --coverage",
        "prepare": "husky",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build"
    },
    "dependencies": {
        "@emotion/react": "^11.11.4",
        "@emotion/styled": "^11.11.5",
        "@mui/material": "^5.15.18",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    },
    "devDependencies": {
        "@chromatic-com/storybook": "^1.4.0",
        "@eslint/js": "^9.2.0",
        "@storybook/addon-essentials": "^8.1.1",
        "@storybook/addon-interactions": "^8.1.1",
        "@storybook/addon-links": "^8.1.1",
        "@storybook/addon-onboarding": "^8.1.1",
        "@storybook/blocks": "^8.1.1",
        "@storybook/react": "^8.1.1",
        "@storybook/react-vite": "^8.1.1",
        "@storybook/test": "^8.1.1",
        "@testing-library/jest-dom": "^6.4.5",
        "@testing-library/react": "^15.0.7",
        "@testing-library/user-event": "^14.5.2",
        "@types/react": "^18.2.66",
        "@types/react-dom": "^18.2.22",
        "@typescript-eslint/eslint-plugin": "^7.2.0",
        "@typescript-eslint/parser": "^7.2.0",
        "@vitejs/plugin-react-swc": "^3.5.0",
        "@vitest/coverage-v8": "^1.6.0",
        "eslint": "^8.57.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-perfectionist": "^2.10.0",
        "eslint-plugin-react": "^7.34.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.6",
        "eslint-plugin-storybook": "^0.8.0",
        "globals": "^15.2.0",
        "happy-dom": "^14.10.1",
        "husky": "^9.0.11",
        "lint-staged": "^15.2.2",
        "prettier": "3.2.5",
        "sass": "^1.77.1",
        "storybook": "^8.1.1",
        "typescript": "^5.2.2",
        "typescript-eslint": "^7.8.0",
        "vite": "^5.2.0",
        "vite-tsconfig-paths": "^4.3.2",
        "vitest": "^1.6.0"
    },
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
            "prettier --write",
            "eslint --fix"
        ]
    },
    "eslintConfig": {
        "extends": [
            "plugin:storybook/recommended"
        ]
    }
}

eslint.config.js

eslint.config.js

import pluginJs from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import perfectionistNatural from "eslint-plugin-perfectionist/configs/recommended-natural";
import react from "eslint-plugin-react";
import globals from "globals";
import tseslint from "typescript-eslint";

export default [
  {
    files: ["**/*.{js,ts,jsx,tsx}"],
    languageOptions: { globals: globals.browser },
    plugins: { react },
    rules: {
      /** target-blank(セキュリティ対策)の検知活性 */
      "react/jsx-no-target-blank": "error",
      /** react指定の除外 */
      "react/react-in-jsx-scope": "off",
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  /** props、importなどをソート管理するもの */
  perfectionistNatural,
  eslintConfigPrettier,
];

.prettierrc

導入直後のため記載なし

試したこと

以下の記事内容を参考し、parserOptions関連を設定をしたが改善されなかった。

解決方法

以下のページの一番最後のコメントにて

VSCode and open the settings and just search for "useFlatConfig", turned it on and the error went aways.
(VSCodeで設定を開き、「useFlatConfig 」を検索して、それをオンにしたら、エラーはなくなった。)

と書かれていたため、試してみると該当エラーが出なくなった。

おわりに

ESLintのflat config（フラット構成）に関連する記事や情報サイトがほとんどないため、問題解決に難儀した。
これから関連記事が増えていくことを願うばかり・・・