Increase linting strictness

thallium-frontend/eslint.config.js

@@ -1,20 +1,20 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import react from 'eslint-plugin-react'
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+import react from "eslint-plugin-react"
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.strictTypeChecked, ...tseslint.configs.stylisticTypeChecked],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },
     },
@@ -24,21 +24,23 @@ export default tseslint.config(
       }
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
       react,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
-      '@typescript-eslint/no-empty-object-type': ["error", {
-        allowInterfaces: 'with-single-extends',
-      }]
+      ...react.configs["jsx-runtime"].rules,
+      "@typescript-eslint/no-empty-object-type": ["error", {
+        allowInterfaces: "with-single-extends",
+      }],
+      "semi": ["error", "always"],
+      "quotes": ["error", "double"],
     },
   },
 )

thallium-frontend/src/App.tsx

@@ -1,16 +1,16 @@
-import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
-import { useEffect, useState } from 'react';
+import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
+import { useEffect, useState } from "react";
 import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
 
-import themes from './themes';
+import themes from "./themes";
 
 import Header from "./components/Header";
 
-import LandingPage from "./pages/LandingPage"
-import ErrorPage from "./pages/ErrorPage"
+import LandingPage from "./pages/LandingPage";
+import ErrorPage from "./pages/ErrorPage";
 
 
 const GlobalStyle = createGlobalStyle`
@@ -47,7 +47,7 @@ const AppContainer = styled.div`
 
 const BodySeparator = styled.div`
 flex-grow: 1;
-`
+`;
 
 const ContentContainer = styled.div`
   padding: 1rem;
@@ -68,7 +68,7 @@ function App() {
   const theme = isDarkMode ? themes.dark : themes.light;
 
   useEffect(() => {
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
     setIsDarkMode(prefersDark);
   }, []);
@@ -92,7 +92,7 @@ function App() {
         </div>
       </AppContainer>
     </ThemeProvider>
-  )
+  );
 }
 
-export default App
+export default App;

thallium-frontend/src/components/Card.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const CardContainer = styled.div`
   border: 3px solid ${({ theme }) => theme.borderColor};

thallium-frontend/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const HeaderContainer = styled.header`
   display: flex;

thallium-frontend/src/main.tsx

@@ -1,11 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import '@fontsource-variable/fira-code';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "@fontsource-variable/fira-code";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

thallium-frontend/src/pages/ErrorPage.tsx

@@ -1,28 +1,28 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+import { useRouteError, isRouteErrorResponse } from "react-router-dom";
 
-import Card from '../components/Card';
+import Card from "../components/Card";
 
 const ErrorPage = () => {
     const error = useRouteError();
 
-    let title = 'Unexpected Error', message, isUnexpected = false;
+    let title = "Unexpected Error", message, isUnexpected = false;
 
     if (isRouteErrorResponse(error)) {
         if (error.status === 404) {
-            title = 'Not Found';
-            message = 'The requested page could not be found.';
+            title = "Not Found";
+            message = "The requested page could not be found.";
         } else {
             message = error.statusText;
         }
     } else if (error instanceof Error) {
         message = error.message;
         isUnexpected = true;
-    } else if (typeof error === 'string') {
+    } else if (typeof error === "string") {
         message = error;
         isUnexpected = true;
     } else {
         console.error(error);
-        message = 'Unknown error';
+        message = "Unknown error";
         isUnexpected = true;
     }
 

thallium-frontend/src/pages/LandingPage.tsx

@@ -1,4 +1,4 @@
-import Card from '../components/Card';
+import Card from "../components/Card";
 
 const LandingPage = () => {
     return (

thallium-frontend/src/styled-components.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from './themes';
+import type { Theme } from "./themes";
 
 declare module "styled-components" {
     export interface DefaultTheme extends Theme { }

thallium-frontend/src/themes.ts

@@ -14,20 +14,20 @@ interface ThemesStore {
 
 const themes: ThemesStore = {
     light: {
-        backgroundColor: '#f0f0f0',
-        textColor: '#000',
-        borderColor: '#ccc',
-        linkColor: '#7272ff',
-        cardBackgroundColor: '#ebebeb',
-        cardShadow: '#d0d0d0',
+        backgroundColor: "#f0f0f0",
+        textColor: "#000",
+        borderColor: "#ccc",
+        linkColor: "#7272ff",
+        cardBackgroundColor: "#ebebeb",
+        cardShadow: "#d0d0d0",
     },
     dark: {
-        backgroundColor: '#333',
-        textColor: '#fff',
-        borderColor: '#949494',
-        linkColor: '#8f8fff',
-        cardBackgroundColor: '#2c2c2c',
-        cardShadow: '#242323',
+        backgroundColor: "#333",
+        textColor: "#fff",
+        borderColor: "#949494",
+        linkColor: "#8f8fff",
+        cardBackgroundColor: "#2c2c2c",
+        cardShadow: "#242323",
     },
 };
 

thallium-frontend/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});