feat: add eslint-plugin-react to handle jsx-sort-props

.eslintrc.cjs

@@ -1,19 +1,23 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  ignorePatterns: ["node_modules", "dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh", "react"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "react/jsx-sort-props": [
+      "warn",
+      {
+        callbacksLast: true,
+        shorthandFirst: true,
+        ignoreCase: true,
+        noSortAlphabetically: false, // when true, alphabetical order is not enforced
+        reservedFirst: true, // react reserved props (children, dangerouslySetInnerHTML, key...) must be listed before all other props
+        multiline: "last", // 'ignore' | 'first' | 'last'
+      },
     ],
-    '@typescript-eslint/no-explicit-any': ['off'],
-  }
-}
+  },
+};

package.json

@@ -10,8 +10,9 @@
     "start": "vite",
     "build": "tsc && vite build",
     "build:package": "tsc && vite build --config vite.package.config.ts --mode package",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lintfix": "eslint . --ext ts,tsx --fix",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings=0",
+    "lintfix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix",
+    "lintquiet": "eslint src --quiet",
     "preview": "vite preview",
     "prepare": "husky"
   },
@@ -61,6 +62,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "csstype": "^3.1.3",
     "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "husky": "^9.0.11",
@@ -100,9 +102,9 @@
   "lint-staged": {
     "*.(ts|tsx)": [
       "npm run lintfix",
-      "eslint --quiet"
+      "npm run lintquiet"
     ],
-    "*.(ts|tsx|json|html)": [
+    "*.(ts|tsx|cjs|json|html)": [
       "prettier --write"
     ]
   },