chore migrate eslint + clean

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

eslint.config.js

@@ -0,0 +1,22 @@
+import eslint from '@eslint/js'
+import tsConfig from 'typescript-eslint'
+import prettierConfig from 'eslint-config-prettier'
+import vueConfig from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+
+export default tsConfig.config(
+  eslint.configs.recommended,
+  ...vueConfig.configs['flat/recommended'],
+  ...tsConfig.configs.strict,
+  prettierConfig,
+  {
+    ignores: ['dist'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tsConfig.parser,
+        sourceType: 'module',
+      },
+    },
+  },
+)

package.json

@@ -8,7 +8,7 @@
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "check:prettier": "prettier --check .",
-    "check:eslint": "eslint --ext .ts,.js,.vue .",
+    "check:eslint": "eslint .",
     "check:ts": "vue-tsc --noEmit",
     "check:all": "pnpm check:prettier && pnpm check:eslint && pnpm check:ts",
     "fix:prettier": "prettier --loglevel warn --write .",
@@ -28,12 +28,12 @@
     "@types/node": "20.12.7",
     "@types/webfontloader": "1.6.38",
     "@vitejs/plugin-vue": "5.0.4",
-    "@vue/eslint-config-typescript": "13.0.0",
     "eslint": "9.1.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-vue": "9.25.0",
     "prettier": "3.2.5",
     "typescript": "5.4.5",
+    "typescript-eslint": "7.7.1",
     "vite": "5.2.10",
     "vite-plugin-vuetify": "2.0.3",
     "vue-tsc": "2.0.14"

src/App.vue

@@ -10,10 +10,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import GreySettings from './components/GreySettings.vue'
-import GreySwatch from './components/GreySwatch.vue'
-import { Settings } from './types/global'
-import { useLocalTheme } from './composables/useLocalTheme'
+import GreySettings from '@/components/GreySettings.vue'
+import GreySwatch from '@/components/GreySwatch.vue'
+import type { Settings } from '@/types/global'
+import { useLocalTheme } from '@/composables/useLocalTheme'
 
 useLocalTheme().getLocalTheme()
 

src/components/GreyPreview.vue

@@ -10,24 +10,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, StyleValue } from 'vue'
+import { computed, ref, type CSSProperties } from 'vue'
 
-interface Props {
+const props = defineProps<{
   color: string
-}
-
-const componentProps = defineProps<Props>()
+}>()
 
 const showTooltip = ref<boolean>(false)
-const style = computed<StyleValue>(() => ({
-  backgroundColor: componentProps.color,
+const style = computed<CSSProperties>(() => ({
+  backgroundColor: props.color,
 }))
 
 const onClick = () => {
   showTooltip.value = true
   setTimeout(() => {
     showTooltip.value = false
   }, 2000)
-  navigator.clipboard.writeText(componentProps.color)
+  navigator.clipboard.writeText(props.color)
 }
 </script>

src/components/GreySettings.vue

@@ -59,30 +59,11 @@
 
 <script setup lang="ts">
 import { useLocalTheme } from '@/composables/useLocalTheme'
-import { Settings } from '@/types/global'
-import { computed, ref } from 'vue'
-import { useTheme } from 'vuetify/lib/framework.mjs'
+import type { Settings } from '@/types/global'
+import { ref } from 'vue'
+import { useTheme } from 'vuetify'
 
-// Form
-interface Props {
-  modelValue: Settings
-}
-
-interface Emit {
-  (e: 'update:modelValue', settings: Settings): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emit>()
-
-const form = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  },
-})
+const form = defineModel<Settings>({ required: true })
 
 // Set Theme
 const theme = useTheme()

src/components/GreySwatch.vue

@@ -8,12 +8,10 @@
 
 <script setup lang="ts">
 import GreyPreview from '@/components/GreyPreview.vue'
-import { Settings } from '@/types/global'
-import { useColor } from '../composables/useColor'
+import type { Settings } from '@/types/global'
+import { useColor } from '@/composables/useColor'
 
-interface Props {
+defineProps<{
   settings: Settings
-}
-
-defineProps<Props>()
+}>()
 </script>

src/composables/useColor.ts

@@ -1,5 +1,5 @@
 import convert from 'color-convert'
-import { Settings } from '@/types/global'
+import type { Settings } from '@/types/global'
 
 export function useColor(settings: Settings, index: number) {
   const colorHSL = convert.hex.hsl(settings.color)

src/composables/useLocalTheme.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useTheme } from 'vuetify/lib/framework.mjs'
+import { useTheme } from 'vuetify'
 
 export function useLocalTheme() {
   const theme = useTheme()