install and configure eslint, bow before eslint

package.json

@@ -2,18 +2,43 @@
   "name": "discipleofland",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && cp -r CNAME dist/CNAME",
     "preview": "vite preview"
   },
   "dependencies": {
-    "sass": "^1.67.0",
-    "typescript": "^5.2.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "sass": "^1.67.0",
+    "typescript": "^5.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.3.9"
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "vite": "^4.3.9",
+    "vue-eslint-parser": "^9.3.2",
+    "vite-plugin-eslint": "^1.8.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "vue-eslint-parser",
+    "extends": [
+      "plugin:vue/strongly-recommended",
+      "eslint:recommended",
+      "@vue/typescript/recommended"
+    ],
+    "plugins": ["@typescript-eslint"],
+    "parserOptions": {
+      "sourceType": "module",
+      "ecmaVersion": 2020
+    },
+    "ignorePatterns": [
+      "dist/"
+    ]
   }
 }

src/App.vue

@@ -1,17 +1,18 @@
 <template>
-  <nav>
+  <div>
-    <div class="current-eorzea-time">
+    <nav>
-      {{ eorzeaTime.getPrettyTime() }}
+      <div class="current-eorzea-time">
-    </div>
+        {{ eorzeaTime.getPrettyTime() }}
-  </nav>
+      </div>
-  <main>
+    </nav>
-    <SortedNodeList
+    <main>
-        :nodes="nodes"
+      <SortedNodeList
+        :nodes="nodes as Node[]"
         :zones="zones"
-        :eorzeaTime="eorzeaTime"
+        :eorzea-time="eorzeaTime"
-    />
+      />
-  </main>
+    </main>
-
+  </div>
 </template>
 
 <script lang="ts">
@@ -59,10 +60,10 @@ export default defineComponent({
       this.eorzeaTime = new EorzeaTime();
     }, 500);
 
-    const aetheryteData = await fetch("/data/aetherytes.json")
+    const aetheryteData: Response | null = await fetch("/data/aetherytes.json")
-        .catch(() => {
+      .catch((): null => {
-          return null;
+        return null;
-        });
+      });
     if (aetheryteData === null) {
       console.error("Failed to fetch aetheryte data!")
       return;
@@ -73,10 +74,10 @@ export default defineComponent({
       this.aetherytes.push(new Aetheryte(aetheryteData));
     }
 
-    const itemData = await fetch("/data/items.json")
+    const itemData: Response | null = await fetch("/data/items.json")
-        .catch(() => {
+      .catch((): null => {
-          return null;
+        return null;
-        });
+      });
     if (itemData === null) {
       console.error("Failed to fetch item data!")
       return;
@@ -88,10 +89,10 @@ export default defineComponent({
       this.items[itemId] = new Item(itemId, itemData);
     }
 
-    const zoneData = await fetch("/data/zones.json")
+    const zoneData: Response | null = await fetch("/data/zones.json")
-        .catch(() => {
+      .catch((): null => {
-          return null;
+        return null;
-        });
+      });
     if (zoneData === null) {
       console.error("Failed to fetch zone data!")
       return;
@@ -102,9 +103,9 @@ export default defineComponent({
     }
 
     const nodeData = await fetch("/data/nodes.json")
-        .catch(() => {
+      .catch(() => {
-          return null;
+        return null;
-        });
+      });
     if (nodeData === null) {
       console.error("Failed to fetch node data!")
       return;
@@ -133,10 +134,10 @@ export default defineComponent({
         const startTime = timeSplit[0].split(":");
         const endTime = timeSplit[1].split(":");
         times.push(new TimeRange(
-            parseInt(startTime[0]),
+          parseInt(startTime[0]),
-            parseInt(startTime[1]),
+          parseInt(startTime[1]),
-            parseInt(endTime[0]),
+          parseInt(endTime[0]),
-            parseInt(endTime[1])
+          parseInt(endTime[1])
         ));
       }
 
@@ -144,13 +145,13 @@ export default defineComponent({
       if (nearestAetheryte === null) continue;
 
       this.nodes.push(new Node(
-              job,
+          job,
-              nodeType,
+          nodeType,
-              nodeData.position,
+          nodeData.position,
-              times,
+          times,
-              items,
+          items,
-              nearestAetheryte
+          nearestAetheryte
-          )
+        )
       )
     }
 

src/components/GatheringNode.vue

@@ -1,31 +1,43 @@
 <template>
-<article class="node">
+  <article class="node">
-  <div class="timer">{{ gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime)) }}</div>
+    <div class="timer">
-  <div class="job">
+      {{
-    <div class="icon">
+        gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime))
-      <img
+      }}
+    </div>
+    <div class="job">
+      <div class="icon">
+        <img
           :alt="gatheringNode.job"
           :src="`https://xivapi.com/cj/1/${gatheringNode.job}.png`"
           :title="gatheringNode.job"
           draggable="false"
+        >
+      </div>
+    </div>
+    <div class="aetheryte">
+      <span class="icon">
+        <img
+          src="https://xivapi.com/img-misc/mappy/aetheryte.png"
+          alt="Aetheryte icon"
+          draggable="false"
+        >
+      </span>
+      <div class="info">
+        <span>{{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }}</span>
+        <span>{{ gatheringNode.nearestAetheryte.name.en }}</span>
+        <span>{{ gatheringNode.nearestAetheryte.position.x }}, {{ gatheringNode.nearestAetheryte.position.y }}</span>
+      </div>
+    </div>
+    <div class="items">
+      <span
+        v-for="item in gatheringNode.items"
+        :key="item.name"
       >
+        {{ item.name }} (lv. {{ item.level }})
+      </span>
     </div>
-  </div>
+  </article>
-  <div class="aetheryte">
-    <span class="icon">
-      <img src="https://xivapi.com/img-misc/mappy/aetheryte.png" alt="Aetheryte icon" draggable="false">
-    </span>
-    <div class="info">
-      <span>{{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }}</span>
-      <span>{{ gatheringNode.nearestAetheryte.name }}</span>
-      <span>{{ gatheringNode.nearestAetheryte.position.x }}, {{ gatheringNode.nearestAetheryte.position.y }}</span>
-    </div>
-  </div>
-  <div class="items">
-    <span v-for="item in gatheringNode.items">{{ item.name }} (lv. {{ item.level }})</span>
-  </div>
-
-</article>
 </template>
 
 <script lang="ts">
@@ -71,6 +83,7 @@ export default defineComponent({
   border: 1px solid #fff;
   padding: 0.5rem;
   border-radius: 0.25rem;
+
   .timer {
     min-width: 7rem;
     font-size: 2rem;
@@ -78,19 +91,23 @@ export default defineComponent({
     justify-content: center;
     align-items: center;
   }
+
   .job {
     display: flex;
     justify-content: center;
     align-items: center;
+
     .icon {
       width: 3rem;
       height: 3rem;
+
       img {
         width: 100%;
         height: 100%;
       }
     }
   }
+
   .aetheryte {
     display: flex;
     flex-direction: row;
@@ -100,15 +117,18 @@ export default defineComponent({
     font-size: 1.5rem;
     border-radius: 0.75rem;
     padding: 0.35rem 1rem;
-    background-color: rgba(0,0,0, 0.2);
+    background-color: rgba(0, 0, 0, 0.2);
+
     .icon {
       width: 3rem;
+
       img {
         width: 100%;
         height: 100%;
         object-fit: fill;
       }
     }
+
     .info {
       display: flex;
       flex-direction: column;
@@ -117,6 +137,7 @@ export default defineComponent({
       gap: 0.1rem;
     }
   }
+
   .items {
     display: flex;
     flex-direction: column;

src/components/SortedNodeList.vue

@@ -1,12 +1,13 @@
 <template>
-<div class="node-list">
+  <div class="node-list">
-  <GatheringNode
+    <GatheringNode
       v-for="node in displayNodes"
-      :gathering-node="node"
+      :key="`${node.location.x}-${node.location.y}-${node.location.zone}`"
-      :eorzeaTime="eorzeaTime"
+      :gathering-node="node as Node"
+      :eorzea-time="eorzeaTime"
       :zones="zones"
-  />
+    />
-</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -17,56 +18,56 @@ import GatheringNode from "@/components/GatheringNode.vue";
 import Zone from "@/entities/Zone";
 
 export default defineComponent(
-    {
+  {
-      name: "SortedNodeList",
+    name: "SortedNodeList",
-      components: {GatheringNode},
+    components: {GatheringNode},
-      props: {
+    props: {
-        nodes: {
+      nodes: {
-          type: Array as PropType<Node[]>,
+        type: Array as PropType<Node[]>,
-          required: true
+        required: true
-        },
-        eorzeaTime: {
-          type: Object as PropType<EorzeaTime>,
-          required: true
-        },
-        zones: {
-          type: Object as PropType<{ [key: string]: Zone }>,
-          required: true
-        },
       },
-      watch: {
+      eorzeaTime: {
-        nodes: {
+        type: Object as PropType<EorzeaTime>,
-          immediate: true,
+        required: true
-          handler() {
+      },
-            this.displayNodes = this.nodes;
+      zones: {
-          }
+        type: Object as PropType<{ [key: string]: Zone }>,
-        },
+        required: true
-        eorzeaTime: {
+      },
-          immediate: true,
+    },
-          handler(newValue, oldValue) {
+    watch: {
-            if (oldValue === undefined) return;
+      nodes: {
-            if (newValue?.getMinutes() === oldValue?.getMinutes()) return;
+        immediate: true,
-            this.sortListByTime();
+        handler() {
-          }
+          this.displayNodes = this.nodes;
         }
       },
-      data: () => ({
+      eorzeaTime: {
-        displayNodes: [] as Node[],
+        immediate: true,
-      }),
+        handler(newValue, oldValue) {
-      methods: {
+          if (oldValue === undefined) return;
-        sortListByTime() {
+          if (newValue?.getMinutes() === oldValue?.getMinutes()) return;
-          this.displayNodes.sort((a, b) => {
+          this.sortListByTime();
-            const aSeconds = a.getSecondsToNextActiveTime(this.eorzeaTime);
+        }
-            const bSeconds = b.getSecondsToNextActiveTime(this.eorzeaTime);
+      }
-            if (aSeconds === bSeconds) return a;
+    },
-            return aSeconds - bSeconds;
+    data: () => ({
-          });
+      displayNodes: [] as Node[],
-        },
+    }),
+    methods: {
+      sortListByTime() {
+        this.displayNodes.sort((a, b): number => {
+          const aSeconds = a.getSecondsToNextActiveTime(this.eorzeaTime);
+          const bSeconds = b.getSecondsToNextActiveTime(this.eorzeaTime);
+          if (aSeconds === bSeconds) return 1;
+          return aSeconds - bSeconds;
+        });
       },
-      mounted() {
+    },
-        this.displayNodes = this.nodes;
+    mounted() {
-      },
+      this.displayNodes = this.nodes;
-    }
+    },
+  }
 );
 </script>
 

src/entities/Aetheryte.ts

@@ -6,10 +6,10 @@ export default class Aetheryte {
   }
 
   constructor(
-    data: any,
+    data: {position: {x: number, y: number, zone: string}, name: {en: string}}
   ) {
     this.position = data.position;
-    this.name = data.name.en;
+    this.name = data.name;
   }
 
 

src/entities/Item.ts

@@ -3,13 +3,18 @@ export default class Item {
   readonly id: string;
   readonly name: string;
   readonly level: number;
-  readonly scripType: ScripType;
+  readonly scripType: ScripType | null;
 
-  constructor(id: string, data: any) {
+  constructor(id: string, data: {[key: string]: number | string | undefined}) {
     this.id = id;
-    this.name = data?.name;
+    this.name = data?.name as string;
-    this.level = data?.level;
+    this.level = data?.level as number;
-    this.scripType = data?.scripType ? ScripType[data.scripType.toUpperCase()] : null;
+    const scripType: string | undefined = data?.scripType as string;
+    if (scripType != undefined) {
+      this.scripType = typeof data?.scripType === "string" ? scripType.toUpperCase() as ScripType : null;
+    } else {
+      this.scripType = null;
+    }
   }
 
 }

src/entities/Node.ts

@@ -1,5 +1,5 @@
-import {Job} from "../enums/Job";
+import {Job} from "@/enums/Job";
-import {NodeType} from "../enums/NodeType";
+import {NodeType} from "@/enums/NodeType";
 import Item from "./Item";
 import Aetheryte from "./Aetheryte";
 import TimeRange from "./TimeRange";

src/entities/Zone.ts

@@ -4,8 +4,10 @@ export default class Zone {
     en: string,
   }
 
-  constructor(data: any) {
+  constructor(data: {name: {en: string}}) {
-    this.name = data.name;
+    this.name = {
+      en: data.name.en
+    };
   }
 
 }

src/util/EorzeaTime.ts

@@ -11,7 +11,7 @@ export default class EorzeaTime {
    */
   readonly eorzeaDate: Date;
 
-  private constructor(realDate: Date = new Date()) {
+  public constructor(realDate: Date = new Date()) {
     this.realDate = realDate;
     this.eorzeaDate = new Date(realDate.getTime() * (3600 / 175));
   }

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowJs": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+}

vite.config.js

@@ -2,11 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import eslintPlugin from 'vite-plugin-eslint'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    eslintPlugin(),
   ],
   resolve: {
     alias: {