refactor: eslint fixes [WTEL-4144]

.eslintrc.js

@@ -5,15 +5,11 @@ module.exports = {
     es2022: true,
   },
   extends: [
-    'plugin:vue/vue3-essential',
-    '@vue/airbnb',
+    'plugin:vue/vue3-recommended',
   ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-  },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-console': 'off',
+    'no-debugger': 'off',
     'no-underscore-dangle': 'off',
     'import/prefer-default-export': 'off',
   },
@@ -23,9 +19,6 @@ module.exports = {
         '**/__tests__/*.{j,t}s?(x)',
         '**/tests/unit/**/*.spec.{j,t}s?(x)',
       ],
-      env: {
-        jest: true,
-      },
     },
   ],
 };

package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "test:unit": "vitest"
+    "test:unit": "vitest",
+    "lint:fix": "eslint --fix --ext .js,.vue src"
   },
   "dependencies": {
     "@vue/compat": "^3.3.9",
@@ -32,7 +33,7 @@
     "@vitest/coverage-v8": "^1.1.3",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.20.0",
     "happy-dom": "^13.0.0",
     "husky": "^8.0.3",
     "node-polyfill-webpack-plugin": "^2.0.1",

src/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view></router-view>
+  <router-view />
 </template>
 
 <style lang="scss">

src/app/components/the-crm-workspace.vue

@@ -2,12 +2,12 @@
   <main class="object-wrap">
     <section class="object">
       <wt-app-header>
-        <wt-notifications-bar></wt-notifications-bar>
+        <wt-notifications-bar />
         <wt-navigation-bar
           :current-app="currentApp"
           :nav="nav"
           :dark-mode="darkMode"
-        ></wt-navigation-bar>
+        />
         <wt-logo
           :dark-mode="darkMode"
         />
@@ -16,7 +16,7 @@
           :apps="apps"
           :current-app="currentApp"
           :dark-mode="darkMode"
-        ></wt-app-navigator>
+        />
         <wt-header-actions
           :build-info="{ release, build }"
           :user="userinfo"

src/app/components/utils/access-denied-component.vue

@@ -2,7 +2,7 @@
   <wt-error-page
     type="403"
     @back="goToApplicationHub"
-  ></wt-error-page>
+  />
 </template>
 
 <script setup>

src/modules/contacts/components/contact-popup.vue

@@ -4,11 +4,11 @@
     width="480"
     @close="close"
   >
-    <template v-slot:title>
+    <template #title>
       {{ props.id ? t('reusable.edit') : t('reusable.new') }}
       {{ t('contacts.contact', 1).toLowerCase() }}
     </template>
-    <template v-slot:main>
+    <template #main>
       <form class="contact-popup-form">
         <wt-input
           :value="draft.name.commonName"
@@ -17,19 +17,19 @@
           required
           prevent-trim
           @input="draft.name.commonName = $event"
-        ></wt-input>
+        />
         <wt-select
           :value="draft.timezones[0]?.timezone"
           :label="t('date.timezone', 1)"
           :search-method="TimezonesAPI.getLookup"
           @input="draft.timezones[0] = { timezone: $event }"
-        ></wt-select>
+        />
         <wt-select
           :value="draft.managers[0]?.user"
           :label="t('contacts.manager', 1)"
           :search-method="UsersAPI.getLookup"
           @input="draft.managers[0] = { user: $event }"
-        ></wt-select>
+        />
         <wt-tags-input
           :value="draft.labels"
           :label="t('vocabulary.labels', 1)"
@@ -38,15 +38,15 @@
           track-by="label"
           taggable
           @input="draft.labels = $event"
-        ></wt-tags-input>
+        />
         <wt-textarea
           :value="draft.about"
           :label="t('vocabulary.description')"
           @input="draft.about = $event"
-        ></wt-textarea>
+        />
       </form>
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :disabled="v$.$invalid"
         :loading="isSaving"