.vscode/extensions.json

@@ -5,6 +5,7 @@
         "pranaygp.vscode-css-peek",
         "dbaeumer.vscode-eslint",
         "ms-vsliveshare.vsliveshare",
-        "cssho.vscode-svgviewer"
+        "cssho.vscode-svgviewer",
+        "esbenp.prettier-vscode"
     ]
 }
\ No newline at end of file

.vscode/settings.json

 {
+    //editor
     "editor.formatOnSave": true,
     "editor.formatOnPaste": false,
     "editor.tabCompletion": "on",
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true,
+        "source.organizeImports": true
+    },
+    //python
     "python.venvPath": "${workspaceFolder}\\server",
     "python.analysis.extraPaths": ["server"],
     "python.terminal.activateEnvironment": true,
@@ -11,5 +17,18 @@
         "--line-length",
         "119"
     ],
-    "git.ignoreLimitWarning": true
+    //eslint
+    "eslint.workingDirectories": ["./client"],
+    "eslint.options": {
+        "configFile":"./.eslintrc"
+    },
+    //git
+    "git.ignoreLimitWarning": true,
+    //language specific
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }
\ No newline at end of file

client/.eslintrc

+  {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "project": ["tsconfig.json"],
+        "ecmaVersion": 2021,
+        "sourceType": "module"
+    },
+    
+    "settings": {
+        "react": {
+          "version": "detect"
+        }
+    },
+    "extends": [
+        "airbnb-typescript",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "prettier/@typescript-eslint",
+        "plugin:prettier/recommended"
+    ],
+    "rules": {
+        "semi":"off",
+        "react/jsx-one-expression-per-line": "off"
+
+    }
+}

client/.prettierrc

+{
+    "semi": false,
+    "trailingComma": "none",
+    "singleQuote": true,
+    "printWidth": 80
+  }
\ No newline at end of file

client/package.json

@@ -17,17 +17,27 @@
     "axios": "^0.21.1",
     "web-vitals": "^1.1.0"
   },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "4.2.0",
+    "@typescript-eslint/parser": "4.2.0",
+    "eslint": "7.19.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-json": "^2.1.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "prettier": "^2.2.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "eject": "react-scripts eject",
+    "lint": "eslint \"./src/**/*.{js,ts,tsx}\""
   },
   "browserslist": {
     "production": [

client/src/App.test.tsx

-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})

client/src/App.tsx

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import './App.css'
+import logo from './logo.svg'
 
 interface Message {
-  message: string;
+  message: string
 }
 
-function App() {
-  const [currentMessage, setCurrentMessage] = useState<Message>();
+const App: React.FC = () => {
+  const [currentMessage, setCurrentMessage] = useState<Message>()
   useEffect(() => {
-    axios.get<Message>("users/test").then(response=> {
-      setCurrentMessage(response.data);
-    });
-  }, []);
+    axios.get<Message>('users/test').then((response) => {
+      setCurrentMessage(response.data)
+    })
+  }, [])
 
   return (
     <div className="App">
@@ -34,7 +33,7 @@ function App() {
         <p>Current message is {currentMessage?.message}</p>
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

client/src/index.tsx

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './index.css'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

client/src/reportWebVitals.ts

-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from 'web-vitals'
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals

client/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'