style: fix some lint issues

Fix some lint issues

.eslintrc.js

@@ -1,4 +1,7 @@
 // Inspired by https://stackoverflow.com/a/60187886
+const path = require('node:path');
+const createAliasSetting = require('@vue/eslint-config-airbnb/createAliasSetting');
+
 module.exports = {
   root: true,
   env: {
@@ -29,5 +32,11 @@ module.exports = {
     'vuejs-accessibility/media-has-caption': 'off',
     'vuejs-accessibility/click-events-have-key-events': 'off',
     'vue/no-v-text-v-html-on-component': 'off',
+    'vue/no-template-target-blank': 'off',
+  },
+  settings: {
+    ...createAliasSetting({
+      '@': `${path.resolve(__dirname, './src')}`,
+    }),
   },
 };

src/App.vue

@@ -12,7 +12,7 @@
       <v-app-bar-nav-icon @click="SET_LEFT_SIDEBAR_OPEN" />
 
       <router-link
-        :to="{ name: 'RoomCreation'}"
+        :to="{ name: 'RoomCreation' }"
       >
         <picture>
           <source

src/components/PlexItem.vue

@@ -136,10 +136,10 @@
 
             <v-list-item
               :href="
-                'https://app.plex.tv/desktop#!/server/' +
+                'https://app.plex.tv/desktop#!/server/'
-                  metadata.machineIdentifier +
+                  + metadata.machineIdentifier
-                  '/details?key=' +
+                  + '/details?key='
-                  metadata.key
+                  + metadata.key
               "
               target="_blank"
             >

src/components/PlexMediaLayout.vue

@@ -23,7 +23,7 @@
                       <v-img
                         :src="thumbUrl"
                         width="200"
-                        :aspect-ratio="2/3"
+                        :aspect-ratio="2 / 3"
                         class="hidden-sm-and-down"
                       />
                     </v-col>

src/components/SearchBar.vue

@@ -86,7 +86,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import CAF from 'caf/core';
+import { CAF } from 'caf';
 import contentTitle from '@/mixins/contentTitle';
 import linkwithroom from '@/mixins/linkwithroom';
 import contentLink from '@/mixins/contentlink';

src/components/TheSettingsDialog.vue

@@ -94,7 +94,7 @@
           </v-list-item-action>
         </v-list-item>
 
-        <v-list-item @click="streamingProtocolSelectOpen=!streamingProtocolSelectOpen">
+        <v-list-item @click="streamingProtocolSelectOpen = !streamingProtocolSelectOpen">
           <v-list-item-content>
             <v-list-item-title>Streaming Protocol</v-list-item-title>
 
@@ -248,7 +248,7 @@
           </v-list-item-content>
         </v-list-item>
 
-        <v-list-item @click="syncModeSelectOpen=!syncModeSelectOpen">
+        <v-list-item @click="syncModeSelectOpen = !syncModeSelectOpen">
           <v-list-item-content>
             <v-list-item-title>Syncing Method</v-list-item-title>
 
@@ -296,7 +296,7 @@
 
         <v-list-item
           three-line
-          @click="blockedServersSelectOpen=!blockedServersSelectOpen"
+          @click="blockedServersSelectOpen = !blockedServersSelectOpen"
         >
           <v-list-item-content>
             <v-list-item-title>Blocked Servers</v-list-item-title>

src/components/TheSidebarLeft.vue

@@ -42,7 +42,7 @@
 
       <v-list-item
         :router="true"
-        :to="{name: 'SignOut'}"
+        :to="{ name: 'SignOut' }"
       >
         <v-list-item-icon>
           <v-icon>cancel</v-icon>

src/store/modules/plexclients/actions.js

@@ -1,4 +1,4 @@
-import CAF from 'caf/core';
+import { CAF } from 'caf';
 import promiseutils from '@/utils/promiseutils';
 import contentTitleUtils from '@/utils/contenttitleutils';
 import { fetchXmlAndTransform } from '@/utils/fetchutils';

src/store/modules/slplayer/actions.js

@@ -1,4 +1,4 @@
-import CAF from 'caf/core';
+import { CAF } from 'caf';
 
 import { getRandomPlexId } from '@/utils/random';
 import { fetchJson, queryFetch } from '@/utils/fetchutils';

src/store/modules/synclounge/actions.js

@@ -1,4 +1,4 @@
-import CAF from 'caf/core';
+import { CAF } from 'caf';
 import eventhandlers from '@/store/modules/synclounge/eventhandlers';
 import { combineUrl, combineRelativeUrlParts } from '@/utils/combineurl';
 import { fetchJson } from '@/utils/fetchutils';

src/views/PlexHome.vue

@@ -39,7 +39,7 @@
       >
         <v-card
           :to="linkWithRoom(
-            { name: 'PlexServer', params: { machineIdentifier: server.clientIdentifier }},
+            { name: 'PlexServer', params: { machineIdentifier: server.clientIdentifier } },
           )"
           style="background: rgb(0 0 0 / 60%);"
           :title="server.name"

src/views/PlexServer.vue

@@ -25,10 +25,13 @@
               :img="getArtLibrary(library)"
               v-bind="attrs"
               flat
-              :to="linkWithRoom({ name: 'PlexLibrary', params: {
+              :to="linkWithRoom({
-                machineIdentifier: machineIdentifier,
+                name: 'PlexLibrary',
-                sectionId: library.key,
+                params: {
-              }})"
+                  machineIdentifier: machineIdentifier,
+                  sectionId: library.key,
+                },
+              })"
               v-on="on"
             >
               <div class="hidden-xs-only pa-2">

src/views/RoomCreation.vue

@@ -74,7 +74,7 @@
 
             <v-spacer />
 
-            <v-btn :to="{name: 'AdvancedRoomWalkthrough'}">
+            <v-btn :to="{ name: 'AdvancedRoomWalkthrough' }">
               Advanced
             </v-btn>
           </v-card-actions>

src/views/SignIn.vue

@@ -45,7 +45,7 @@
 
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex';
-import CAF from 'caf/core';
+import { CAF } from 'caf';
 
 import getCookie from '@/utils/getcookie';