lint EVERYTHING

src/components/component_preview/component_preview.vue

@@ -32,8 +32,8 @@
       >
     </label>
     <label
-      class="y-shift-number"
       v-show="shadowControl && !hideControls"
+      class="y-shift-number"
     >
       {{ $t('settings.style.shadows.offset-y') }}
       <input
@@ -78,7 +78,10 @@
       >
         {{ $t('settings.style.themes3.editor.test_string') }}
       </div>
-      <div v-if="invalid" class="invalid-container">
+      <div
+        v-if="invalid"
+        class="invalid-container"
+      >
         <div class="alert error invalid-label">
           {{ $t('settings.style.themes3.editor.invalid') }}
         </div>
@@ -104,8 +107,8 @@
       </div>
       <ColorInput
         v-if="!noColorControl"
-        class="input-color-input"
         v-model="colorOverride"
+        class="input-color-input"
         fallback="#606060"
         :label="$t('settings.style.shadows.color_override')"
       />

src/components/contrast_ratio/contrast_ratio.vue

@@ -11,13 +11,22 @@
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <FAIcon icon="thumbs-up" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
     </Tooltip>
     <Tooltip
@@ -26,13 +35,22 @@
       class="rating"
     >
       <span v-if="contrast.laaa">
-        <FAIcon icon="thumbs-up" :size="showRatio ? 'large' : ''" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'large' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
     </Tooltip>
   </span>
@@ -55,6 +73,9 @@ library.add(
 )
 
 export default {
+  components: {
+    Tooltip
+  },
   props: {
     large: {
       required: false,
@@ -74,9 +95,6 @@ export default {
       default: false
     }
   },
-  components: {
-    Tooltip
-  },
   computed: {
     hint () {
       const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')

src/components/font_control/font_control.vue

@@ -14,7 +14,7 @@
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      :modelValue="present"
+      :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
       {{ $t('settings.style.themes3.define') }}
@@ -50,8 +50,8 @@
       >
         <button
           class="btn button-default"
-          @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+          @click="toggleManualEntry"
         >
           <FAIcon
             fixed-width
@@ -72,8 +72,8 @@
       >
         <button
           class="btn button-default"
-          @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.enter_manually')"
+          @click="toggleManualEntry"
         >
           <FAIcon
             fixed-width

src/components/login_form/login_form.vue

@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      <h1 class="title">{{ $t('login.login') }}</h1>
+      <h1 class="title">
+        {{ $t('login.login') }}
+      </h1>
     </div>
 
     <div class="panel-body">

src/components/settings_modal/tabs/appearance_tab.vue

@@ -136,8 +136,8 @@
             </h4>
             <PaletteEditor
               v-if="expertLevel > 0"
-              class="userPalette"
               v-model="userPalette"
+              class="userPalette"
               :compact="true"
               :apply="true"
               @applyPalette="data => setPaletteCustom(data)"

src/components/settings_modal/tabs/filtering_tab.vue

@@ -106,7 +106,7 @@
             key="hideScrobblesAfter"
             path="hideScrobblesAfter"
             :units="['m', 'h', 'd']"
-            unitSet="time"
+            unit-set="time"
             expert="1"
           >
             {{ $t('settings.hide_scrobbles_after') }}

src/components/settings_modal/tabs/general_tab.vue

@@ -226,8 +226,8 @@
           </BooleanSetting>
         </li>
         <ul
-          class="setting-list suboptions"
           v-if="mergedConfig.useAbsoluteTimeFormat"
+          class="setting-list suboptions"
         >
           <li>
             <UnitSetting

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -52,22 +52,34 @@
         </teleport>
         <ul class="setting-list style-metadata">
           <li>
-            <StringSetting class="meta-field" v-model="name">
+            <StringSetting
+              v-model="name"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_name') }}
             </StringSetting>
           </li>
           <li>
-            <StringSetting class="meta-field" v-model="author">
+            <StringSetting
+              v-model="author"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_author') }}
             </StringSetting>
           </li>
           <li>
-            <StringSetting class="meta-field" v-model="license">
+            <StringSetting
+              v-model="license"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_license') }}
             </StringSetting>
           </li>
           <li>
-            <StringSetting class="meta-field" v-model="website">
+            <StringSetting
+              v-model="website"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_website') }}
             </StringSetting>
           </li>
@@ -228,8 +240,8 @@
               <Checkbox v-model="isTextAutoPresent" />
             </Tooltip>
             <div
-              class="style-control suboption"
               v-if="componentHas('Text')"
+              class="style-control suboption"
             >
               <label class="label">
                 {{ $t('settings.style.themes3.editor.contrast') }}
@@ -239,8 +251,7 @@
                 :contrast="contrast"
               />
             </div>
-            <div v-if="componentHas('Text')">
+            <div v-if="componentHas('Text')" />
-            </div>
             <ColorInput
               v-if="componentHas('Link')"
               v-model="editedLinkColor"
@@ -350,22 +361,22 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          :modelValue="palettes"
+          :model-value="palettes"
-          @update:modelValue="onPalettesUpdate"
           :selected-id="selectedPaletteId"
           :get-add-value="getNewPalette"
+          @update:modelValue="onPalettesUpdate"
           @update:selectedId="e => selectedPaletteId = e"
         />
         <div class="list-edit-area">
           <StringSetting
-            class="palette-name-input"
             v-model="selectedPalette.name"
+            class="palette-name-input"
           >
             {{ $t('settings.style.themes3.palette.name_label') }}
           </StringSetting>
           <PaletteEditor
-            class="palette-editor-single"
             v-model="selectedPalette"
+            class="palette-editor-single"
           />
         </div>
       </div>
@@ -373,8 +384,8 @@
         key="variables"
         :label="$t('settings.style.themes3.editor.variables_tab')"
         :model-value="virtualDirectives"
-        @update:modelValue="updateVirtualDirectives"
         :normalize-shadows="normalizeShadows"
+        @update:modelValue="updateVirtualDirectives"
       />
     </tab-switcher>
   </div>

src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue

@@ -26,10 +26,10 @@
     <SelectMotion
       class="list-select-movement"
       :model-value="modelValue"
-      @update:modelValue="e => emit('update:modelValue', e)"
       :selected-id="selectedVirtualDirectiveId"
-      @update:selectedId="e => selectedVirtualDirectiveId = e"
       :get-add-value="getNewVirtualDirective"
+      @update:modelValue="e => emit('update:modelValue', e)"
+      @update:selectedId="e => selectedVirtualDirectiveId = e"
     />
     <div class="list-edit-area">
       <div class="variable-selector">
@@ -41,8 +41,8 @@
           {{ ' ' }}
         </label>
         <input
-          class="input"
           v-model="selectedVirtualDirective.name"
+          class="input"
         >
         <label
           class="variable-type-label"
@@ -54,13 +54,13 @@
         <Select
           v-model="selectedVirtualDirectiveValType"
         >
-          <option value='shadow'>
+          <option value="shadow">
             {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
           </option>
-          <option value='color'>
+          <option value="color">
             {{ $t('settings.style.themes3.editor.variables.type_color') }}
           </option>
-          <option value='generic'>
+          <option value="generic">
             {{ $t('settings.style.themes3.editor.variables.type_generic') }}
           </option>
         </Select>

src/components/timeline/timeline.vue

@@ -1,6 +1,9 @@
 <template>
   <div :class="['Timeline', classes.root]">
-    <div :class="classes.header" v-if="!embedded">
+    <div
+      v-if="!embedded"
+      :class="classes.header"
+    >
       <TimelineMenu
         v-if="!embedded"
         :timeline-name="timelineName"