[ESLint] React x TypeScript を Flat Config で

const tsPlugin = require("typescript-eslint");
const reactPlugin = require("eslint-plugin-react");
const reactHooksPlugin = require("eslint-plugin-react-hooks");

/** @type {import("eslint").Linter.FlatConfig} */
module.exports = [
  {
    files: ["*/**/*.{ts,tsx}"],
    ignores: ["node_modules/**/*", "dist/**/*"],
    languageOptions: {
      parser: tsPlugin.parser,
    },
    settings: {
      react: {
        version: "detect",
      },
    },
    plugins: {
      react: reactPlugin,
      "react-hooks": reactHooksPlugin,
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules,
      ...reactPlugin.configs.recommended.rules,
      ...reactHooksPlugin.configs.recommended.rules,
      "react/prop-types": "off",
      "react/react-in-jsx-scope": "off",
    },
  },
];

npm install --save-dev eslint typescript typescript-eslint

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

{
  "eslint.experimental.useFlatConfig": true,
}

const jsPlugin = require("@eslint/js");
const tsPlugin = require("typescript-eslint");
const reactPlugin = require("eslint-plugin-react");
const reactHooksPlugin = require("eslint-plugin-react-hooks");

/** @type {import("eslint").Linter.FlatConfig} */
module.exports = [
  {
    files: ["*/**/*.{ts,tsx}"],
    ignores: ["node_modules/**/*", "dist/**/*"],
    languageOptions: {
      parser: tsPlugin.parser,
    },
    settings: {
      react: {
        version: "detect",
      },
    },
    plugins: {
      react: reactPlugin,
      "react-hooks": reactHooksPlugin,
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      ...jsPlugin.configs.recommended.rules,
      ...tsPlugin.configs.recommended.rules,
      ...reactPlugin.configs.recommended.rules,
      ...reactHooksPlugin.configs.recommended.rules,
      "no-undef": "off",
      "no-unused-vars": "off",
      "react/prop-types": "off",
      "react/react-in-jsx-scope": "off",
    },
  },
];