Add eslint and prettier

frontend/.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ["eslint/recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  },
+  plugins: ["react"],
+  rules: {},
+  parserOptions: {
+    ecmaFeatures: { jsx: true }
+  }
+};

frontend/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "semi": true,
+    "tabWidth": 2,
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSameLine": false,
+    "singleAttributePerLine": true
+}

frontend/package.json

@@ -23,6 +23,10 @@
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
     "eslint": "^8.32.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "vite": "^4.0.0"
   }
 }

frontend/src/components/Nav.jsx

@@ -2,7 +2,10 @@ function Nav() {
   return (
     <nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
       <div className="container flex flex-wrap items-center justify-between mx-auto">
-        <a href="{% url 'index' %}" className="flex items-center">
+        <a
+          href="{% url 'index' %}"
+          className="flex items-center"
+        >
           <span className="text-4xl">⌚</span>
           <span className="self-center text-xl font-semibold whitespace-nowrap text-white">
             Timetracker
@@ -63,4 +66,4 @@ function Nav() {
   );
 }
 
-export default Nav
+export default Nav;