style: rework the eslint config and apply the new rules

eslint.config.mjs

@@ -1,43 +1,46 @@
 // @ts-check
-import { fixupConfigRules } from "@eslint/compat";
-import { FlatCompat } from "@eslint/eslintrc";
 import eslintJs from "@eslint/js";
 import eslintConfigPrettier from "eslint-config-prettier";
-import reactCompiler from "eslint-plugin-react-compiler";
-import reactJsxRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
-import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+import eslintReact from "eslint-plugin-react";
+import eslintReactCompiler from "eslint-plugin-react-compiler";
+import eslintReactHooks from "eslint-plugin-react-hooks";
 import globals from "globals";
-import tsEslint from "typescript-eslint";
+import tseslint from "typescript-eslint";
 
-const compat = new FlatCompat({
-  baseDirectory: import.meta.dirname,
-  recommendedConfig: eslintJs.configs.recommended,
-  allConfig: eslintJs.configs.all,
-});
-
-export default tsEslint.config(
+export default tseslint.config(
   eslintJs.configs.recommended,
-  ...tsEslint.configs.recommended,
-  reactJsxRuntime,
+  ...tseslint.configs.recommended,
+  eslintConfigPrettier,
+  {
+    files: ["**.config.{cjs,mjs,ts,js}", "postbuild.cjs"],
+    languageOptions: {
+      globals: { ...globals.node },
+      parserOptions: { tsconfigRootDir: import.meta.dirname },
+    },
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+    },
+  },
   {
-    ignores: ["dist/**", "node_modules/**", "src/route-tree.gen.ts", "*.html"],
+    ignores: [
+      "dist/**",
+      "node_modules/**",
+      "**.config.{cjs,mjs,ts,js}",
+      "src/**/*.gen.ts",
+      "*.html",
+    ],
+  },
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    ...eslintReact.configs.flat.recommended,
   },
-  ...fixupConfigRules(compat.extends("plugin:react-hooks/recommended")),
   {
-    files: ["src/**/*.{ts,tsx}", "*.config.js", "*.config.cjs"],
-    ...reactRecommended,
     languageOptions: {
-      ...reactRecommended.languageOptions,
-      globals: {
-        ...globals.node,
-        ...globals.browser,
-      },
+      ...eslintReact.configs.flat.recommended.languageOptions,
+      globals: { ...globals.browser },
       parserOptions: {
-        // project: "./tsconfig.json",
         tsconfigRootDir: import.meta.dirname,
-        ecmaFeatures: {
-          jsx: true,
-        },
+        ecmaFeatures: { jsx: true },
       },
     },
     settings: {
@@ -48,27 +51,34 @@ export default tsEslint.config(
         version: "detect",
       },
     },
+  },
+  // {},
+  {
     plugins: {
-      "react-compiler": reactCompiler,
+      "react-compiler": eslintReactCompiler,
+      // @ts-expect-error
+      "react-hooks": eslintReactHooks,
     },
+  },
+  {
     rules: {
+      ...eslintReactHooks.configs.recommended.rules,
+      "react-compiler/react-compiler": "error",
+
       "no-extra-boolean-cast": "off",
       "no-case-declarations": "off",
-      "@typescript-eslint/no-unused-vars": "off",
+
+      "react/display-name": "off",
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/consistent-type-imports": "error",
+      "@typescript-eslint/no-empty-object-type": "off",
       "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/consistent-type-imports": "off",
-      "@typescript-eslint/no-empty-interface": "off",
       "@typescript-eslint/no-unnecessary-type-constraint": "off",
-      "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/ban-ts-comment": "off",
-      "jsx-a11y/img-redundant-alt": "off",
-      "react/react-in-jsx-scope": "off",
-      "react/prop-types": "off",
-      "react/display-name": "off",
-      "react/no-unescaped-entities": "off",
-      "react/no-unknown-property": "off",
-      "react-compiler/react-compiler": "error",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-vars": "off",
     },
-  },
-  eslintConfigPrettier
+  }
 );

package.json

@@ -13,7 +13,7 @@
     "dev": "vite",
     "format": "prettier --check './src/**/*.{js,jsx,ts,tsx,css,md,json}' --config './prettier.config.cjs'",
     "format:fix": "prettier --write './src/**/*.{js,jsx,ts,tsx,css,md,json}' --config './prettier.config.cjs'",
-    "lint": "eslint --max-warnings 0 .",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0 .",
     "lint:fix": "eslint --fix --max-warnings 0 .",
     "postbuild": "node ./postbuild.cjs",
     "preview": "vite preview --port 3000",
@@ -78,9 +78,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.1.0",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.6.0",
+    "@eslint/js": "^9.8.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
@@ -92,20 +90,20 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "babel-plugin-react-compiler": "0.0.0-experimental-334f00b-20240725",
-    "eslint": "^9.6.0",
+    "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "globals": "^15.8.0",
+    "eslint-plugin-react-hooks": "5.1.0-beta-26f2496093-20240514",
+    "globals": "^15.9.0",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^7.16.0",
+    "typescript-eslint": "^8.0.0",
     "vite": "^5.3.5"
   }
 }