Fix lint

.eslintignore

@@ -0,0 +1 @@
+src/components/code-editor/useWorker.ts

package.json

@@ -69,6 +69,7 @@
     "@types/redux-logger": "^3.0.9",
     "@vitejs/plugin-react": "^2.0.1",
     "autoprefixer": "^10.4.15",
+    "eslint-config-react-app": "^7.0.1",
     "postcss": "^8.4.28",
     "prettier": "3.0.2",
     "prettier-plugin-tailwindcss": "^0.5.3",

src/App.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 import App from "./App";
 

src/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PageRouter from "./routes/Router";
 import { Provider } from "react-redux";
 import store from "./store";

src/components/code-editor/CodeEditor.tsx

@@ -36,7 +36,9 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     }
 
     return () => editor?.dispose();
-  }, [monacoEl.current]);
+    // !!! Cannot add props to the dependency array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
 
   return (
     <div

src/components/code-editor/useWorker.ts

@@ -1,33 +1,35 @@
+// This file is ignoring elint check with .eslintignore
+// Be careful when you edit this file
 
-import * as monaco from 'monaco-editor';
+import * as monaco from "monaco-editor";
 // @ts-ignore
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 // @ts-ignore
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; 
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 // @ts-ignore
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
 // @ts-ignore
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 // @ts-ignore
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 
 // @ts-ignore
 self.MonacoEnvironment = {
-	getWorker(_: any, label: string) {
-		if (label === 'json') {
-			return new jsonWorker();
-		}
-		if (label === 'css' || label === 'scss' || label === 'less') {
-			return new cssWorker();
-		}
-		if (label === 'html' || label === 'handlebars' || label === 'razor') {
-			return new htmlWorker();
-		}
-		if (label === 'typescript' || label === 'javascript') {
-			return new tsWorker();
-		}
-		return new editorWorker();
-	}
+  getWorker(_: any, label: string) {
+    if (label === "json") {
+      return new jsonWorker();
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker();
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker();
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  },
 };
 
-monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

src/pages/Problem.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  Table,
-  TableBody,
-  TableColumn,
-  TableHeader,
-  TableRow,
-} from "@nextui-org/react";
+import { Button } from "@nextui-org/react";
 import CodeEditor from "../components/code-editor/CodeEditor";
 import MarkdownRender from "../components/markdown/MarkdownRender";
 import { useProblem } from "../hooks/problem";
@@ -32,7 +25,7 @@ const Problem: React.FC = () => {
 
   useEffect(() => {
     setSrcLanguage("Cpp");
-  }, []);
+  }, [setSrcLanguage]);
 
   return (
     <div className="relative flex h-[100vh] flex-col">