feat(eslint-config): enhance ESLint configuration with additional plu…

…gins and rules

- Add `plugin:react/recommended`, `plugin:jsx-a11y/recommended`, `plugin:import/errors`, `plugin:import/warnings`, and `plugin:import/typescript` to the `extends` array in the ESLint configuration. These plugins provide recommended linting rules for React, accessibility, and import statements, respectively.
- Add `settings` object to the ESLint configuration to specify React version and other settings for `eslint-plugin-react`.
- Add new rules to the `rules` object in the ESLint configuration, including `import/order`, `import/no-default-export`, and `jsx-a11y/anchor-is-valid`. These rules enforce conventions for import order, prefer named exports, and enforce valid anchor elements, respectively.
- Disable the `react/prop-types` rule, as prop types are checked by TypeScript.
- Fix all warnings and errors generated by the new rules.

.eslintrc.cjs

@@ -2,17 +2,43 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
+    "react/react-in-jsx-scope": "off", // Not needed with modern React
+    "import/order": ["error", { "newlines-between": "always" }], // Enforce a convention in module import order
+    "import/no-default-export": "error", // Prefer named exports
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      { components: ["Link"], specialLink: ["to"] },
+    ], // Enforce valid anchor elements
+    "react/prop-types": "off",
   },
-}
+  settings: {
+    react: {
+      version: "detect",
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      typescript: {
+        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+      },
+    },
+  },
+};