feat(lint): use @antfu linting config

.eslintignore

@@ -0,0 +1 @@
+coverage/

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}

build.config.ts

@@ -20,20 +20,6 @@ export default defineBuildConfig({
       format: 'cjs',
       ext: 'cjs',
     },
-    {
-      input: 'src/ssr/index.ts',
-      outDir: 'dist',
-      name: 'ssr',
-      format: 'esm',
-      ext: 'mjs',
-    },
-    {
-      input: 'src/ssr/index.ts',
-      outDir: 'dist',
-      name: 'ssr',
-      format: 'cjs',
-      ext: 'cjs',
-    },
   ],
   externals: [
     'vue',

demo/src/App.vue

@@ -7,7 +7,9 @@
     </div>
 
     <template v-if="!sandbox">
-      <h1 class="flex items-center justify-center text-3xl font-bold">Delay</h1>
+      <h1 class="flex items-center justify-center text-3xl font-bold">
+        Delay
+      </h1>
 
       <Delay class="mt-6 mb-6" />
 

demo/src/components/CodeBlock.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, defineProps, watch } from 'vue-demi'
+import { defineProps, nextTick, ref, watch } from 'vue-demi'
 import Prism from 'prismjs'
 
 const props = defineProps({
@@ -31,9 +31,8 @@ const preRender = (codeContent: string) => {
 }
 
 const render = () => {
-  if (!Prism.languages[props.language]) {
+  if (!Prism.languages[props.language])
     require(`prismjs/components/prism-${props.language}`)
-  }
 
   nextTick(() => {
     if (!code) return

demo/src/components/DemoBox.vue

@@ -26,7 +26,9 @@
 
     <div class="absolute cursor-pointer select-none top-6 right-8">
       <div class="flex flex-row items-center justify-end">
-        <button class="ml-4" @click="replay">🔃</button>
+        <button class="ml-4" @click="replay">
+          🔃
+        </button>
         <slot name="controls" />
       </div>
     </div>
@@ -36,9 +38,9 @@
 </template>
 
 <script setup="props" lang="ts">
-import CodeBlock from '../components/CodeBlock.vue'
 import { useToggle } from '@vueuse/core'
 import { nextTick } from 'vue'
+import CodeBlock from '../components/CodeBlock.vue'
 
 defineProps({
   text: String,

demo/src/demos/Editor.vue

@@ -34,15 +34,15 @@
     </template>
 
     <div>
-      <input type="range" max="360" min="0" v-model="input" step="1" />
+      <input v-model="input" type="range" max="360" min="0" step="1">
     </div>
   </DemoBox>
 </template>
 
 <script setup="props" lang="ts">
-import DemoBox from '../components/DemoBox.vue'
 import { useMotions } from '@vueuse/motion'
-import { ref, watch, computed } from 'vue'
+import { computed, ref, watch } from 'vue'
+import DemoBox from '../components/DemoBox.vue'
 import basic from '../examples/basic'
 
 const motions = useMotions()

demo/src/demos/Transitions.vue

@@ -46,9 +46,9 @@
 
 <script setup="props" lang="ts">
 import { computed } from 'vue'
-import DemoBox from '../components/DemoBox.vue'
 import { useMotions } from '@vueuse/motion'
 import { useToggle } from '@vueuse/core'
+import DemoBox from '../components/DemoBox.vue'
 import transitions from '../examples/transitions'
 
 const [show, toggleShow] = useToggle(true)

demo/src/main.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { MotionPlugin } from '@vueuse/motion'
 import 'prism-theme-vars/base.css'
 import { createApp } from 'vue-demi'

docs/.vitepress/components/Features.vue

@@ -6,8 +6,18 @@
           <div class="features">
             <section
               v-for="(feature, index) in features"
+              v-motion="{
+                initial: {
+        y: 200,
+        opacity: 0,
+      },
+      enter: {
+        y: 0,
+        opacity: 1,
+      }
+              }"
               :key="index"
-              :ref="`feature_${index}`"
+
               class="feature"
             >
               <h2 class="title" v-if="feature.title">
@@ -54,55 +64,7 @@ export default defineComponent({
       },
     ]
 
-    const feature_0 = ref()
-    const feature_1 = ref()
-    const feature_2 = ref()
-
-    useMotion(feature_0, {
-      initial: {
-        y: 200,
-        opacity: 0,
-      },
-      enter: {
-        y: 0,
-        opacity: 1,
-      },
-    })
-
-    useMotion(feature_1, {
-      initial: {
-        y: 200,
-        opacity: 0,
-      },
-      enter: {
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: 100,
-        },
-      },
-    })
-
-    useMotion(feature_2, {
-      initial: {
-        y: 200,
-        opacity: 0,
-      },
-      enter: {
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    })
-
-    return {
-      features,
-      feature_0,
-      feature_1,
-      feature_2,
-    }
+    return { features }
   },
 })
 </script>

package.json

@@ -30,8 +30,8 @@
   "scripts": {
     "build": "unbuild",
     "dev": "jiti scripts/watch.ts --cache",
-    "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
-    "lint:fix": "pnpm lint --write",
+    "lint": "eslint --ext .js,.vue,.ts,.tsx .",
+    "lint:fix": "eslint --ext .js,.vue,.ts,.tsx . --fix",
     "test:types": "tsc --build tsconfig.json",
     "test:unit": "vitest run",
     "test:coverage": "vitest run --coverage",
@@ -63,6 +63,7 @@
     }
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^0.16.1",
     "@types/prismjs": "^1.26.0",
     "@vitejs/plugin-vue": "^2.2.2",
     "@vue/server-renderer": "^3.2.31",
@@ -71,6 +72,7 @@
     "@vuedx/typescript-plugin-vue": "^0.7.4",
     "c8": "^7.11.0",
     "chokidar": "^3.5.3",
+    "eslint": "^8.9.0",
     "happy-dom": "^2.41.0",
     "lint-staged": "^12.3.4",
     "prettier": "^2.5.1",