refactor: 重构 react hooks 的使用方法

.eslintrc.cjs

@@ -8,6 +8,9 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
     'plugin:prettier/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
   ],
   overrides: [
     {
@@ -25,17 +28,40 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint', 'react', 'prettier'],
+  plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'react-hooks'],
   rules: {
     'react/jsx-use-react': 0,
     'react/react-in-jsx-scope': 0,
-    'import/first': 0,
+    'import/first': 2,
+    'import/order': [
+      2,
+      {
+        groups: [['builtin', 'external', 'internal']],
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc', caseInsensitive: true },
+      },
+    ],
+    'import/newline-after-import': 2,
+    'import/no-duplicates': 2,
     'no-mixed-spaces-and-tabs': 2,
     'no-debugger': 2,
     'space-infix-ops': 2,
     'space-before-blocks': 2,
+    quotes: [2, 'single', { avoidEscape: true }],
     '@typescript-eslint/explicit-function-return-type': 0, // 禁止函数必须要定义返回类型
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-unused-vars': [2, { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    'react-hooks/rules-of-hooks': 2,
+    'react-hooks/exhaustive-deps': 2,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
+      },
+      typescript: {
+        project: './tsconfig.json',
+      },
+    },
   },
 }

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "preview": "serve -s dist"
   },
   "dependencies": {
@@ -59,6 +60,9 @@
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-node": "^0.3.9",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",