Add eslint and prettier to frontend

And format files

.eslintignore

@@ -0,0 +1 @@
+node_modules

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma" : "es5",
+  "tabWidth" : 2,
+  "semi": true,
+  "singleQuote": true
+}

frontend/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "extends": ["standard-with-typescript", "plugin:prettier/recommended"],
+    "plugins": ["prettier"],
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+        "semi": "off",
+        "no-extra-semi": "error",
+        "@typescript-eslint/semi": "off"
+    }
+}

frontend/js/index.ts

@@ -1,4 +1,4 @@
 // import CSS so it gets named with a content hash that busts caches
-import "../css/styles.css";
+import '../css/styles.css';
 
-import "./localTimeController";
+import './localTimeController';

frontend/js/localTimeController.ts

@@ -1,24 +1,30 @@
-function convertTimeElements() {
+function convertTimeElements(): void {
   const timeElements = document.querySelectorAll('time.local-time');
   timeElements.forEach((element) => {
-    const utcString = element.getAttribute("datetime");
-    if (utcString) {
+    const utcString = element.getAttribute('datetime');
+    if (utcString !== null) {
       const utcTime = new Date(utcString);
-      element.textContent = utcTime.toLocaleDateString(window.navigator.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      });
+      element.textContent = utcTime.toLocaleDateString(
+        window.navigator.language,
+        {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        }
+      );
     } else {
-      console.error("Missing datetime attribute on time.local-time element", element);
+      console.error(
+        'Missing datetime attribute on time.local-time element',
+        element
+      );
     }
   });
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener('DOMContentLoaded', function () {
   convertTimeElements();
 });
 
-document.body.addEventListener('htmx:afterSwap', function() {
+document.body.addEventListener('htmx:afterSwap', function () {
   convertTimeElements();
 });

frontend/package.json

@@ -2,7 +2,18 @@
   "name": "crawlnicle-frontend",
   "module": "js/index.ts",
   "devDependencies": {
-    "bun-types": "^0.6.0"
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "bun-types": "^0.6.0",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "latest",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^16.0.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

frontend/tsconfig.json

@@ -14,9 +14,12 @@
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "noEmit": true,
+    "noImplicitAny": true,
     "types": [
        // disabled because of https://github.com/oven-sh/bun/issues/3030
        // "bun-types" // add Bun global
     ]
-  }
+  },
+  "include": ["js"],
+  "exclude": ["node_modules"]
 }