Add Eslint Config in /frontend (#4785)

* Add local ESLint configuration and disable rules to allow for errorless state

* Remove unnecessary ESLint disable comments in AuthContext and usePromptInputStorage for cleaner code.

* Update eslint-plugin-react-hooks

* Configure prettier to work with eslint

* Removed trailing commas from eslint config

* Prettier to source code

* add a v2 lint script

* put back eslint-disable comments

* fix eslinter and prettier application
always apply --fix since we --write prettier, otherwise it fails

* precaution dev build

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>

.github/workflows/dev-build.yaml

@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['enhancement-error-boundary'] # put your current branch to create a build. Core team only.
+    branches: ['refactor-eslint-frontend'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'

frontend/eslint.config.js

@@ -0,0 +1,46 @@
+import js from "@eslint/js"
+import globals from "globals"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import pluginPrettier from "eslint-plugin-prettier"
+import configPrettier from "eslint-config-prettier"
+import { defineConfig } from "eslint/config"
+
+export default defineConfig([
+  {
+    ignores: ["**/*.min.js", "src/media/**/*"]
+  },
+  {
+    files: ["src/**/*.{js,jsx}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser }
+  },
+  {
+    files: ["src/**/*.{js,jsx}"],
+    ...pluginReact.configs.flat.recommended,
+    plugins: {
+      "react-hooks": pluginReactHooks,
+      prettier: pluginPrettier
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    },
+    rules: {
+      ...configPrettier.rules,
+      "prettier/prettier": "error",
+      "react/react-in-jsx-scope": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "no-extra-boolean-cast": "off",
+      "no-prototype-builtins": "off",
+      "no-unused-vars": "off",
+      "no-empty": "off",
+      "no-useless-escape": "off",
+      "no-undef": "off",
+      "no-unsafe-optional-chaining": "off",
+      "no-constant-binary-expression": "off"
+    }
+  }
+])

frontend/package.json

@@ -7,7 +7,8 @@
     "start": "vite --open",
     "dev": "cross-env NODE_ENV=development vite --debug --host=0.0.0.0",
     "build": "vite build && node scripts/postbuild.js",
-    "lint": "yarn prettier --ignore-path ../.prettierignore --write ./src",
+    "lint:check": "eslint src",
+    "lint": "eslint --fix src",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -52,6 +53,7 @@
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@eslint/js": "^9.39.2",
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.8",
     "@types/react-router-dom": "^5.3.3",
@@ -59,16 +61,16 @@
     "autoprefixer": "^10.4.14",
     "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.50.0",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ft-flow": "^3.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.3",
     "flow-bin": "^0.217.0",
     "flow-remove-types": "^2.217.1",
-    "globals": "^13.21.0",
+    "globals": "^16.5.0",
     "hermes-eslint": "^0.15.0",
     "postcss": "^8.4.23",
     "prettier": "^3.0.3",

frontend/src/AuthContext.jsx

@@ -69,7 +69,6 @@ export function AuthProvider(props) {
       }));
     }
     if (store.authToken) refreshUser();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store.authToken]);
 
   return (

frontend/src/hooks/usePromptInputStorage.js

@@ -43,7 +43,6 @@ export default function usePromptInputStorage({
       // Notify parent component so message state is synchronized
       onChange({ target: { value: userPromptInputValue } });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const debouncedWriteToStorage = useMemo(