Further tuning the formatting and linting rules

frontend/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/strict-type-checked',
     'plugin:@typescript-eslint/stylistic-type-checked',
+    "plugin:react/recommended",
     'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
   ],
@@ -19,6 +20,8 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
   },
   parserOptions: {
     ecmaVersion: 'latest',
@@ -26,4 +29,9 @@ module.exports = {
     project: ['./tsconfig.json', './tsconfig.node.json'],
     tsconfigRootDir: __dirname,
   },
+  settings: {
+    react: {
+      version: "detect"
+    }
+  }
 }

frontend/package.json

@@ -23,6 +23,7 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "3.2.5",

frontend/src/App.tsx

@@ -9,10 +9,10 @@ function App(): JSX.Element {
   return (
     <>
       <div>
-        <a href="https://vitejs.dev" target="_blank">
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://react.dev" target="_blank">
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
@@ -20,7 +20,7 @@ function App(): JSX.Element {
       <div className="card">
         <button
           onClick={() => {
-            setCount((count) => count + 1);
+            setCount((count): number => count + 1);
           }}
         >
           count is {count}