use typescript-eslint and fix some lint issues

.vscode/settings.json

@@ -12,7 +12,7 @@
     "typescriptreact"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "files.insertFinalNewline": true,
   "files.trimTrailingWhitespace": true,

eslint.config.js

@@ -0,0 +1,16 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+);

package.json

@@ -27,7 +27,7 @@
     "src"
   ],
   "scripts": {
-    "lint": "eslint src/",
+    "lint": "eslint .",
     "lint:fix": "eslint src/ --fix",
     "build": "tsc -b",
     "start": "tsc -b --watch",
@@ -54,10 +54,9 @@
     "@babel/core": "^7.24.3",
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-typescript": "^7.13.0",
+    "@eslint/js": "^9.19.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^7.5.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-optimize-clsx": "^2.6.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -74,6 +73,7 @@
     "react": "^19.0.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.4.3",
+    "typescript-eslint": "^8.18.1",
     "webpack": "^5.91.0"
   }
 }