From 50228d144273417d46e88af3ed7d59c5f3e012b9 Mon Sep 17 00:00:00 2001
From: Takuro Hishikawa <hishikawa@macareux.co.jp>
Date: Tue, 11 Oct 2022 04:21:28 +0900
Subject: [PATCH] Make eslint run for vue components

Also applied automatically fix
---
 .eslintrc                                     | 16 +++++++++++++---
 package.json                                  |  6 ++++--
 src/js/components/Splide/Splide.vue           | 18 ++++++++++++------
 src/js/components/SplideSlide/SplideSlide.vue |  2 +-
 src/js/components/SplideTrack/SplideTrack.vue |  9 +++++----
 src/js/constants/events.ts                    |  3 ++-
 src/js/env.d.ts                               |  2 +-
 src/js/plugin/plugin.ts                       |  2 +-
 8 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 94202a7..65dbf43 100644
--- a/.eslintrc
+++ b/.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"
   }
 }
diff --git a/package.json b/package.json
index 236d3e0..1306a99 100644
--- a/package.json
+++ b/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,7 +39,8 @@
     "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",
@@ -46,7 +48,7 @@
     "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": {
diff --git a/src/js/components/Splide/Splide.vue b/src/js/components/Splide/Splide.vue
index adf982b..5d4d196 100644
--- a/src/js/components/Splide/Splide.vue
+++ b/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>
diff --git a/src/js/components/SplideSlide/SplideSlide.vue b/src/js/components/SplideSlide/SplideSlide.vue
index 3a76a71..be186d2 100644
--- a/src/js/components/SplideSlide/SplideSlide.vue
+++ b/src/js/components/SplideSlide/SplideSlide.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="splide__slide">
-    <slot></slot>
+    <slot />
   </li>
 </template>
 
diff --git a/src/js/components/SplideTrack/SplideTrack.vue b/src/js/components/SplideTrack/SplideTrack.vue
index eec595b..c9b34fe 100644
--- a/src/js/components/SplideTrack/SplideTrack.vue
+++ b/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>
diff --git a/src/js/constants/events.ts b/src/js/constants/events.ts
index 2f20533..2ff0791 100644
--- a/src/js/constants/events.ts
+++ b/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';
 
 
diff --git a/src/js/env.d.ts b/src/js/env.d.ts
index a735ff2..d970c85 100644
--- a/src/js/env.d.ts
+++ b/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;
diff --git a/src/js/plugin/plugin.ts b/src/js/plugin/plugin.ts
index f880e20..181ebdc 100644
--- a/src/js/plugin/plugin.ts
+++ b/src/js/plugin/plugin.ts
@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import type { App } from 'vue';
 import { Splide, SplideSlide } from '../components';