Adds husky to run format & lint pre-commit hook

All frontend files should be consistently formatted on every commit now.

frontend/.eslintrc.cjs

@@ -1,14 +1,34 @@
 module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
     'plugin:react-hooks/recommended',
-    'prettier',
+    'plugin:prettier/recommended',
+    'plugin:react/jsx-runtime',
   ],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'eslint-plugin-react-hooks'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint', 'eslint-plugin-react-hooks'],
   root: true,
   rules: {
+    'react-hooks/exhaustive-deps': 'error',
+    'no-var': 'error',
+    'brace-style': 'error',
+    'prefer-template': 'error',
+    radix: 'error',
+    'space-before-blocks': 'error',
+    'import/prefer-default-export': 'off',
     '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '_+' }],
   },
 };

frontend/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd frontend/ && yarn run lint

frontend/.prettierignore

@@ -0,0 +1,5 @@
+dist/
+.husky/
+node_modules/
+patches/
+public/

frontend/.prettierrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};

frontend/package.json

@@ -4,12 +4,13 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
+    "prepare": "cd ../ && husky install .frontend/.husky",
     "dev": "vite dev",
     "build": "tsc && vite build",
     "build-dev": "tsc && vite build -m development",
     "preview": "vite preview",
     "madge": "madge --circular src/main.tsx",
-    "lint": "eslint src/",
+    "lint": "lint-staged",
     "prettier": "prettier *.{json,cjs,ts,html} src/**/*.{ts,tsx}",
     "fmt": "npm run prettier -- --write",
     "postinstall": "patch-package"
@@ -69,10 +70,11 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "lint-staged": "^13.1.0",
     "madge": "^5.0.1",
     "patch-package": "^6.5.0",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
     "sass": "^1.55.0",
     "terser": "^5.16.1",
@@ -91,5 +93,11 @@
         "skipTypeImports": true
       }
     }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx,cjs}": [
+      "npx prettier --write",
+      "npx eslint --fix"
+    ]
   }
 }

frontend/src/i18n.ts

@@ -1,8 +1,8 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
-import { initReactI18next } from 'react-i18next';
 
+import { initReactI18next } from 'react-i18next';
 i18n
   .use(Backend)
   .use(LanguageDetector)

frontend/src/main.tsx

@@ -1,10 +1,10 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import createCache from '@emotion/cache';
 import { store } from './app/store';
 import { persistor } from './persistor';