refactor: migrate eslint

web/.eslintrc.json

-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint", "prettier"],
-  "ignorePatterns": ["node_modules", "dist", "public", "src/assets"],
-  "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-explicit-any": ["off"],
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-no-target-blank": "off",
-    "no-restricted-syntax": [
-      "error",
-      {
-        "selector": "VariableDeclarator[init.callee.name='useTranslation'] > ObjectPattern > Property[key.name='t']:not([parent.declarations.0.init.callee.object.name='i18n'])",
-        "message": "Destructuring 't' from useTranslation is not allowed. Please use the 'useTranslate' hook from '@/utils/i18n'."
-      }
-    ]
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "overrides": [
-    {
-      "files": ["src/utils/i18n.ts"],
-      "rules": {
-        "no-restricted-syntax": "off"
-      }
-    }
-  ]
-}

web/eslint.config.mjs

+import eslint from "@eslint/js";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import tseslint from "typescript-eslint";
+
+export default [
+  ...tseslint.config(eslint.configs.recommended, tseslint.configs.recommended),
+  eslintPluginPrettierRecommended,
+  {
+    ignores: ["**/dist/**", "**/node_modules/**", "**/proto/**"],
+  },
+  {
+    rules: {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "error",
+      "@typescript-eslint/no-explicit-any": ["off"],
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-no-target-blank": "off",
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector:
+            "VariableDeclarator[init.callee.name='useTranslation'] > ObjectPattern > Property[key.name='t']:not([parent.declarations.0.init.callee.object.name='i18n'])",
+          message: "Destructuring 't' from useTranslation is not allowed. Please use the 'useTranslate' hook from '@/utils/i18n'.",
+        },
+      ],
+    },
+  },
+  {
+    files: ["src/utils/i18n.ts"],
+    rules: {
+      "no-restricted-syntax": "off",
+    },
+  },
+];

web/package.json

@@ -52,6 +52,7 @@
   "devDependencies": {
     "@bufbuild/buf": "^1.50.1",
     "@bufbuild/protobuf": "^2.2.3",
+    "@eslint/js": "^9.23.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/d3": "^7.4.3",
     "@types/katex": "^0.16.7",
@@ -63,15 +64,13 @@
     "@types/react-dom": "^18.3.5",
     "@types/textarea-caret": "^3.0.3",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-legacy": "^6.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.21",
     "code-inspector-plugin": "^0.18.3",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.5",
     "eslint-plugin-react": "^7.37.4",
     "long": "^5.3.1",
     "nice-grpc-web": "^3.3.6",
@@ -80,6 +79,7 @@
     "protobufjs": "^7.4.0",
     "terser": "^5.39.0",
     "typescript": "^5.8.2",
+    "typescript-eslint": "^8.28.0",
     "vite": "^6.2.1"
   },
   "pnpm": {

web/src/components/LocaleSelect.tsx

@@ -33,7 +33,7 @@ const LocaleSelect: FC<Props> = (props: Props) => {
               </Option>
             );
           }
-        } catch (error) {
+        } catch {
           // do nth
         }
 

web/src/components/MemoActionMenu.tsx

@@ -77,7 +77,7 @@ const MemoActionMenu = (props: Props) => {
           ["pinned"],
         );
       }
-    } catch (error) {
+    } catch {
       // do nth
     }
   };
@@ -108,7 +108,7 @@ const MemoActionMenu = (props: Props) => {
     }
 
     if (isInMemoDetailPage) {
-      memo.state === State.ARCHIVED ? navigateTo("/") : navigateTo("/archived");
+      navigateTo(memo.state === State.ARCHIVED ? "/" : "/archived");
     }
     memoUpdatedCallback();
   };

web/src/components/MemoContent/CodeBlock.tsx

@@ -45,7 +45,7 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
           language: formatedLanguage,
         }).value;
       }
-    } catch (error) {
+    } catch {
       // Skip error and use default highlighted code.
     }
 

web/src/components/MemoContent/LineBreak.tsx

-import { BaseProps } from "./types";
-
-interface Props extends BaseProps {}
-
-const LineBreak: React.FC<Props> = () => {
+const LineBreak = () => {
   return <br />;
 };
 

web/src/components/MemoContent/Link.tsx

@@ -14,7 +14,7 @@ const getFaviconWithGoogleS2 = (url: string) => {
   try {
     const urlObject = new URL(url);
     return `https://www.google.com/s2/favicons?sz=128&domain=${urlObject.hostname}`;
-  } catch (error) {
+  } catch {
     return undefined;
   }
 };

web/src/components/MemoEditor/Editor/TagSuggestions.tsx

@@ -86,7 +86,11 @@ const TagSuggestions = observer(({ editorRef, editorActions }: Props) => {
 
     const caretCordinates = getCaretCoordinates(editor, index);
     caretCordinates.top -= editor.scrollTop;
-    isActive ? setPosition(caretCordinates) : hide();
+    if (isActive) {
+      setPosition(caretCordinates);
+    } else {
+      hide();
+    }
   };
 
   const listenersAreRegisteredRef = useRef(false);

web/src/components/MemoRelationForceGraph/types.ts

@@ -4,6 +4,7 @@ export interface NodeType {
   memo: MemoRelation_Memo;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface LinkType {
   // ...add more additional properties relevant to the link here.
 }

web/src/components/ReactionSelector.tsx

@@ -49,7 +49,7 @@ const ReactionSelector = (props: Props) => {
         });
       }
       await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });
-    } catch (error) {
+    } catch {
       // skip error.
     }
     setOpen(false);

web/src/components/ReactionView.tsx

@@ -58,7 +58,7 @@ const ReactionView = (props: Props) => {
           await memoServiceClient.deleteMemoReaction({ id: reaction.id });
         }
       }
-    } catch (error) {
+    } catch {
       // Skip error.
     }
     await memoStore.getOrFetchMemoByName(memo.name, { skipCache: true });

web/src/components/ui/Popover.tsx

@@ -9,7 +9,6 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
-  // eslint-disable-next-line react/prop-types
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content

web/src/helpers/utils.ts

@@ -25,7 +25,7 @@ export const isValidUrl = (url: string): boolean => {
   try {
     new URL(url);
     return true;
-  } catch (err) {
+  } catch {
     return false;
   }
 };