Add eslint to web module

web/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint/eslint-plugin"],
+  extends: ["plugin:@typescript-eslint/strict", "plugin:prettier/recommended"],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: [".eslintrc.js", "dist/"],
+  rules: {},
+};

web/package.json

@@ -22,9 +22,10 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "npm run lint && react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint \"*/**/*.tsx\" \"*/**/*.ts\" --fix"
   },
   "eslintConfig": {
     "extends": [
@@ -43,5 +44,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@eslint/js": "^8.0.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "typescript-eslint": "^8.15.0"
   }
 }

web/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
-import App from './App';
+import App from "./App";
 
-test('Renders hello world', () => {
+test("Renders hello world", () => {
   render(<App />);
   expect(screen.getByText("Hello World! Front")).toBeInTheDocument();
 });

web/src/App.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React from "react";
 import { io } from "socket.io-client";
 
 function App() {
   const socket = io("http://localhost:3010");
-  const emitData = () => console.log(socket.emit("example-request", "custom-request"));
+  const emitData = () =>
-  socket.on("example-response", (data) => console.log(`Received response in front end with data: ${data}`));
+    console.log(socket.emit("example-request", "custom-request"));
+  socket.on("example-response", (data) =>
+    console.log(`Received response in front end with data: ${data}`),
+  );
 
   return (
     <div className="App">
       <header className="App-header">
-        <button onClick={emitData}>
+        <button onClick={emitData}>Emit Data</button>
-          Emit Data
-        </button>
         Hello World! Front
       </header>
     </div>

web/src/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import App from './App';
+import App from "./App";
-import './App.scss'
+import "./App.scss";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

web/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";