eslint --fix with latest recommended rules.

.eslintrc.cjs

@@ -71,21 +71,10 @@ module.exports = {
 
   // add your custom rules here
   rules: {
-    '@typescript-eslint/no-explicit-any': 'warn',
-    'prefer-promise-reject-errors': 'off',
+    // 'prefer-promise-reject-errors': 'off',
 
     quotes: ['warn', 'single', { avoidEscape: true }],
 
-    // this rule, if on, would require explicit return type on the `render` function
-    '@typescript-eslint/explicit-function-return-type': 'off',
-
-    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
-    '@typescript-eslint/no-var-requires': 'off',
-
-    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
-    // does not work with type definitions
-    'no-unused-vars': 'off',
-
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   },

package.json

@@ -8,6 +8,7 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.ts,.vue ./",
+    "lint:fix": "eslint --fix --ext .js,.ts,.vue ./",
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",

src/App.vue

@@ -20,15 +20,6 @@ import { remoteProcedureCall } from 'boot/fetch_api';
 export default defineComponent({
   name: 'App',
   components: { ConnectionOverlay },
-  data() {
-    return {};
-  },
-  computed: {
-    // a computed getter
-    showConnectionOverlay() {
-      return !this.connected;
-    },
-  },
   setup() {
     const store = useMainStore();
     const stateStore = useStateStore();
@@ -58,6 +49,21 @@ export default defineComponent({
       remoteProcedureCall,
     };
   },
+  data() {
+    return {};
+  },
+  computed: {
+    // a computed getter
+    showConnectionOverlay() {
+      return !this.connected;
+    },
+  },
+
+  async created() {
+    console.log('app created, waiting for stores to init first dataset');
+    this.init();
+    console.log('data initialization finished');
+  },
   methods: {
     async init() {
       this.uiSettingsStore.initStore();
@@ -160,11 +166,5 @@ export default defineComponent({
         });
     },
   },
-
-  async created() {
-    console.log('app created, waiting for stores to init first dataset');
-    this.init();
-    console.log('data initialization finished');
-  },
 });
 </script>

src/boot/fetch_api.js

@@ -22,6 +22,6 @@ async function remoteProcedureCall(url) {
   }
 }
 
-export default boot(({}) => {});
+export default boot(() => {});
 
 export { remoteProcedureCall };

src/components/ColorPicker.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-input :model-value="modelValue" @update:model-value="onInput" :rules="['anyColor']">
-    <template v-slot:append>
+  <q-input :model-value="modelValue" :rules="['anyColor']" @update:model-value="onInput">
+    <template #append>
       <q-icon name="colorize" class="cursor-pointer">
         <q-popup-proxy cover transition-show="scale" transition-hide="scale">
           <q-color :model-value="modelValue" @update:model-value="onInput"></q-color>

src/components/ConnectionOverlay.vue

@@ -6,7 +6,7 @@
     </q-card-section>
 
     <q-card-actions align="right">
-      <q-btn :label="$t('BTN_LABEL_RELOAD_PAGE')" color="primary" v-close-popup @click="reloadPage" />
+      <q-btn v-close-popup :label="$t('BTN_LABEL_RELOAD_PAGE')" color="primary" @click="reloadPage" />
     </q-card-actions>
   </q-card>
 </template>

src/components/CountdownTimer.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="flex flex-center" style="width: 70vw; height: 70vh" v-show="showBox" id="countdown-timer-container">
-    <div style="position: absolute; font-size: 150px" v-show="showMessage" v-html="messageText" id="countdown-timer-message"></div>
+  <div v-show="showBox" id="countdown-timer-container" class="flex flex-center" style="width: 70vw; height: 70vh">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-show="showMessage" id="countdown-timer-message" style="position: absolute; font-size: 150px" v-html="messageText"></div>
     <q-circular-progress
       v-show="showCountdown"
       :show-value="!showMessage"
       style="width: 100%; height: 100%"
       :value="remainingSeconds"
       :min="0"
-      :max="this.duration"
+      :max="duration"
       reverse
       animation-speed="100"
       size="70vh"
@@ -24,20 +25,29 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'CountdownTimer',
+  props: {
+    duration: {
+      type: Number,
+      required: true,
+    },
+
+    messageDuration: {
+      type: Number,
+      default: 0.5,
+    },
+
+    messageText: {
+      type: String,
+      default: '😃',
+    },
+  },
 
   data() {
     return {
       intervalTimerId: null,
       remainingSeconds: 0,
     };
   },
-
-  mounted() {
-    this.startTimer();
-  },
-  beforeUnmount() {
-    clearInterval(this.intervalTimerId);
-  },
   computed: {
     showBox() {
       return this.remainingSeconds > 0;
@@ -49,6 +59,13 @@ export default defineComponent({
       return +this.remainingSeconds <= this.messageDuration;
     },
   },
+
+  mounted() {
+    this.startTimer();
+  },
+  beforeUnmount() {
+    clearInterval(this.intervalTimerId);
+  },
   methods: {
     abortTimer() {
       clearInterval(this.intervalTimerId);
@@ -67,21 +84,5 @@ export default defineComponent({
       }, 50);
     },
   },
-  props: {
-    duration: {
-      type: Number,
-      required: true,
-    },
-
-    messageDuration: {
-      type: Number,
-      default: 0.5,
-    },
-
-    messageText: {
-      type: String,
-      default: '😃',
-    },
-  },
 });
 </script>