use eslint and fix all

frontend/.eslintrc.json

@@ -0,0 +1,44 @@
+{
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "plugins": ["@typescript-eslint", "named-import-spacing"],
+    "ignorePatterns": ["vite-env.d.ts"],
+    "parser": "@typescript-eslint/parser",
+    "root": true,
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "rules": {
+        "prefer-spread": "warn",
+        "prefer-const": "warn",
+        "semi": ["error", "never"],
+        "comma-spacing": 2,
+        "comma-style": 2,
+        "comma-dangle": ["error", "never"],
+        "no-console": "off",
+        "no-useless-escape": "off",
+        "no-unused-vars": "off",
+        "no-undef": "off",
+        "no-var-requires": "off",
+        "no-unreachable": ["error"],
+        "no-unexpected-multiline": ["error"],
+        "no-constant-condition": "off",
+        "no-inner-declarations": "off",
+        "no-self-compare": "error",
+        "@typescript-eslint/no-this-alias": "off",
+        "@typescript-eslint/consistent-type-imports": "warn",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            "args": "all",
+            "argsIgnorePattern": "^_",
+            "caughtErrors": "all",
+            "caughtErrorsIgnorePattern": "^_",
+            "destructuredArrayIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "ignoreRestSiblings": true
+        }],
+        "named-import-spacing/named-import-spacing": 2
+    }
+}

frontend/package.json

@@ -10,7 +10,8 @@
     "dev": "bunx vite",
     "build": "bun run copy-themes && bunx vite build",
     "typecheck": "bunx vue-tsc --noEmit",
-    "ci": "bun i && bun run typecheck"
+    "ci": "bun i && bun run typecheck",
+    "lint": "bunx eslint ./src"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
@@ -31,7 +32,11 @@
     "rimraf": "latest",
     "typescript": "latest",
     "vite": "latest",
-    "vue-tsc": "latest"
+    "vue-tsc": "latest",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint": "^8.49.0",
+    "eslint-plugin-named-import-spacing": "^1.0.3"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.9.5"

frontend/src/components/selected-game/ConfigEditorOverlay.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { onMounted, Ref, ref, watch } from 'vue'
-import { Nullable } from 'primevue/ts-helpers'
+import { type Ref, ref, watch } from 'vue'
+import type { Nullable } from 'primevue/ts-helpers'
 
 import { BepinexConfigFiles, ParseBepinexConfig } from '@backend/game/GameManager'
 import { game } from '@backend/models'
 
-import { Dialog } from '@composables'
+import type { Dialog } from '@composables'
 import { CardOverlay, ConfigEditLayout } from '@components'
 
 import { t } from '@i18n'
 import { openLink } from "../../util"
-import { ThunderstoreGame } from '@types'
+import type { ThunderstoreGame } from '@types'
 
 const selectedConfig: Ref<Nullable<game.BepinexConfig>> = ref(null)
 const selectedConfigName: Ref<Nullable<string>> = ref(null)

frontend/src/components/settings/ThemeDropdown.vue

@@ -3,7 +3,7 @@ import { ComputedRef, computed } from 'vue'
 import { usePrimeVue } from 'primevue/config'
 
 import { useSettingsStore } from '@stores'
-import { 
+import type { 
     ChangeEvent, 
     OptionItem, ValueItem,
     Theme, ThemeGroup

frontend/src/composables/dialog.ts

@@ -1,4 +1,4 @@
-import { Ref, ref } from "vue"
+import { type Ref, ref } from "vue"
 
 export interface Dialog extends DialogState {
     setVisible: (val?: boolean) => void

frontend/src/i18n/index.ts

@@ -1,9 +1,9 @@
-import { Country } from "@types"
+import type { Country } from "@types"
 
 import { useSettingsStore } from "@stores"
 import { storeToRefs } from "pinia"
 
-import { ComputedRef, computed } from "vue"
+import { type ComputedRef, computed } from "vue"
 import { createI18n } from "vue-i18n"
 
 import en from "./locales/en.json"
@@ -33,10 +33,10 @@ export const countries: ComputedRef<Country[]> = computed(() => [{
 }, {
   name: t('languages.fr'),
   code: 'fr'
-},{
+}, {
   name: t('languages.it'),
   code: 'it'
-},{
+}, {
   name: t('languages.es'),
   code: 'es'
 }])

frontend/src/mocks/GameService.ts

@@ -1,4 +1,4 @@
-import { ThunderstoreGame } from "@types"
+import type { ThunderstoreGame } from "@types"
 
 export const mockGameList: ThunderstoreGame[] = [{
   title: "Lethal Company",
@@ -13,7 +13,7 @@ export const mockGameList: ThunderstoreGame[] = [{
   image: "RiskOfRain2.jpg",
   path: "H:\\Program Files (x86)\\Steam\\steamapps\\common\\Risk of Rain 2",
   aliases: ["ror2"],
-  steamID: 248820,
+  steamID: 248820
 }, {
   title: "Content Warning",
   identifier: 'content-warning',

frontend/src/router/routes.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 const Dashboard = () => import('../views/Dashboard.vue')
 const GameSelection = () => import('../views/GameSelection.vue')

frontend/src/stores/game.ts

@@ -1,14 +1,16 @@
-import { ThunderstoreGame } from '@types'
+import type { ThunderstoreGame } from '@types'
 import { defineStore } from 'pinia'
 
 import { Save, SetFavouriteGames } from '@backend/app/Persistence'
-import { Ref, computed, ref } from 'vue'
-import { thunderstore } from '@backend/models.js'
+import { type Ref, ref, computed } from 'vue'
+
 import { GetPersistence } from '@backend/app/Application.js'
 import { BepinexInstalled } from '@backend/game/GameManager.js'
-
 import { ExistsAtPath } from '@backend/app/Utils.js'
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import { thunderstore } from '@backend/models.js'
+
 export interface GameState {
     selectedGame: ThunderstoreGame,
     games: Map<string, ThunderstoreGame>

frontend/src/stores/settings.ts

@@ -11,8 +11,8 @@ import {
     SetGameSelectionLayout
 } from '@backend/app/AppSettings.js'
 
-import { app } from "@backend/models.js"
-import { Theme } from "@types"
+import type { app } from "@backend/models.js"
+import type { Theme } from "@types"
 import { ref } from 'vue'
 
 export interface SettingsState {
@@ -27,7 +27,7 @@ export const useSettingsStore = defineStore("SettingsStore", () => {
             label: 'Dark',
             value: 'aura-dark-purple'
         } as Theme,
-        animations_enabled: true,
+        animations_enabled: true
     })
 
     const performance = ref({
@@ -38,7 +38,7 @@ export const useSettingsStore = defineStore("SettingsStore", () => {
     const misc = ref({
         nexus_personal_key: '',
         update_behaviour: 2,
-        game_selection_layout: 'grid',
+        game_selection_layout: 'grid'
     })
     //#endregion
 

frontend/src/types/game.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { thunderstore } from "@backend/models.js"
 
 export interface Game {

frontend/src/types/settings.ts

@@ -1,4 +1,4 @@
-import { ValueItemLabeled } from "./primevue.js"
+import type { ValueItemLabeled } from "./primevue.js"
 
 export interface Country {
     name: string

frontend/src/types/thunderstore.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { thunderstore, v1 } from "@backend/models.js"
 
 export type Package = thunderstore.StrippedPackage & {

frontend/src/util.ts

@@ -1,5 +1,5 @@
 import { OpenExternal } from "@backend/app/Application.js"
-import { TooltipOptions } from "primevue/tooltip"
+import { type TooltipOptions } from "primevue/tooltip"
 
 const tooltipTextStyle = {
     fontSize: '14.5px'

frontend/src/views/GameSelection.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { 
-    ref, Ref, 
-    computed, ComputedRef, 
-    nextTick, onMounted,
+    type Ref, ref, 
+    type ComputedRef, computed, 
+    nextTick, onMounted
 } from 'vue'
 
 import DataView from 'primevue/dataview'
@@ -12,13 +12,13 @@ import Skeleton from 'primevue/skeleton'
 // TODO: Replace with real external service.
 import { mockGameList } from '../mocks/GameService'
 
-import { 
+import type { 
     ThunderstoreGame, 
     Layout, OptionItem, 
     ValueItem, ValueItemLabeled,
 } from '@types'
 
-import { Nullable } from 'primevue/ts-helpers'
+import type { Nullable } from 'primevue/ts-helpers'
 
 import { t } from '@i18n'
 import { tooltipOpts, openLink } from "../../src/util"

frontend/src/views/SelectedGame.vue

@@ -5,7 +5,7 @@ import type { Ref } from "vue"
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 
-import { Nullable } from "primevue/ts-helpers"
+import type { Nullable } from "primevue/ts-helpers"
 
 import DataView, { DataViewPageEvent } from 'primevue/dataview'
 import TabMenu, { TabMenuChangeEvent } from 'primevue/tabmenu'
@@ -22,7 +22,7 @@ import {
     ConfigEditorOverlay
 } from "@components"
 
-import { Package } from "@types"
+import type { Package } from "@types"
 import { useGameStore } from "@stores"
 
 import { debounce } from "../util"