Make eslint run for vue components

.eslintrc

@@ -1,20 +1,28 @@
 {
   "extends": [
     "eslint:recommended",
+    "@vue/eslint-config-typescript",
     "plugin:@typescript-eslint/recommended",
     "plugin:vue/vue3-recommended"
   ],
   "plugins": [
     "@typescript-eslint"
   ],
-  "parser": "@typescript-eslint/parser",
+  "parser": "vue-eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "parset": "@typescript-eslint/parser",
+    "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "env": {
     "browser": true
   },
+  "overrides": [
+    {
+        "files": ["*.ts"],
+        "parser": "@typescript-eslint/parser"
+    }
+  ],
   "ignorePatterns": [
     "*.esm.js"
   ],
@@ -109,6 +117,8 @@
           "object": false
         }
       }
-    ]
+    ],
+    "@typescript-eslint/consistent-type-imports": "error",
+    "vue/multi-word-component-names": "off"
   }
 }

package.json

@@ -29,6 +29,7 @@
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "@vitejs/plugin-vue": "^3.1.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "eslint": "^8.23.0",
     "eslint-plugin-vue": "^9.4.0",
     "fs-extra": "^10.1.0",
@@ -38,15 +39,16 @@
     "typescript": "^4.8.2",
     "vite": "^3.1.0",
     "vue": "^3.2.38",
-    "vue-tsc": "^0.40.9"
+    "vue-eslint-parser": "^9.1.0",
+    "vue-tsc": "^1.0.3"
   },
   "scripts": {
     "develop": "vite build",
     "check:type": "vue-tsc --noEmit",
     "build": "vite build --watch false",
     "build:all": "npm run check:type && npm run build && node scripts/copy-css.js",
     "test": "jest",
-    "eslint": "eslint src",
+    "eslint": "eslint src --ext .ts,.vue",
     "deploy": "gh-pages -d examples/dist"
   },
   "exports": {

src/js/components/Splide/Splide.vue

@@ -1,16 +1,22 @@
 <template>
-  <component :is="tag" class="splide" ref="root">
+  <component
+    :is="tag"
+    ref="root"
+    class="splide"
+  >
     <SplideTrack v-if="hasTrack">
-      <slot></slot>
+      <slot />
     </SplideTrack>
 
-    <slot v-else></slot>
+    <slot v-else />
   </component>
 </template>
 
 <script lang="ts">
-import { ComponentConstructor, Options, Splide } from '@splidejs/splide';
-import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, provide, Ref, ref, watch } from 'vue';
+import type { ComponentConstructor, Options } from '@splidejs/splide';
+import { Splide } from '@splidejs/splide';
+import type { PropType, Ref } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 import { EVENTS } from '../../constants/events';
 import { SPLIDE_INJECTION_KEY } from '../../constants/keys';
 import { merge } from '../../utils';
@@ -139,7 +145,7 @@ export default defineComponent( {
       length,
       go,
       sync,
-    }
+    };
   },
 } );
 </script>

src/js/components/SplideSlide/SplideSlide.vue

@@ -1,6 +1,6 @@
 <template>
   <li class="splide__slide">
-    <slot></slot>
+    <slot />
   </li>
 </template>
 

src/js/components/SplideTrack/SplideTrack.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="splide__track">
     <ul class="splide__list">
-      <slot></slot>
+      <slot />
     </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onUpdated, inject, Ref } from 'vue';
+import type { Ref } from 'vue';
+import { defineComponent, onUpdated, inject } from 'vue';
 import { SPLIDE_INJECTION_KEY } from '../../constants/keys';
-import { Splide } from '@splidejs/splide';
+import type { Splide } from '@splidejs/splide';
 
 /**
  * The component for the Splide track element.
@@ -24,6 +25,6 @@ export default defineComponent( {
       const splide = inject<Ref<Splide | undefined>>( SPLIDE_INJECTION_KEY );
       splide?.value?.refresh();
     } );
-  }
+  },
 } );
 </script>

src/js/constants/events.ts

@@ -1,3 +1,5 @@
+import type {
+  EventMap } from '@splidejs/splide';
 import {
   EVENT_ACTIVE,
   EVENT_ARROWS_MOUNTED,
@@ -26,7 +28,6 @@ import {
   EVENT_SCROLLED,
   EVENT_UPDATED,
   EVENT_VISIBLE,
-  EventMap,
 } from '@splidejs/splide';
 
 

src/js/env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue';
+  import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>;
   export default component;

src/js/plugin/plugin.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import type { App } from 'vue';
 import { Splide, SplideSlide } from '../components';