chore: migrate to eslint (#111)

* chore: migrate to eslint

* chore: ignore `vue/one-component-per-file`

* chore: fix ts error

Author: harlan-zw

.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+examples/vite-ssr
+tests/e2e/vite-ssr

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: '@antfu/eslint-config',
+  rules: {
+    'vue/one-component-per-file': 'off'
+  },
+}

.github/workflows/export-sizes.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           registry-url: https://registry.npmjs.org/
-          cache: "pnpm"
+          cache: pnpm
       - uses: antfu/export-size-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
 jobs:
   release:

.github/workflows/test.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   test:
-    if: "!contains(github.event.head_commit.message, 'ci skip')"
+    if: '!contains(github.event.head_commit.message, ''ci skip'')'
 
     strategy:
       matrix:

.prettierrc

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useHead } from "#head"
+import { useHead } from '#head'
 
 useHead({
-  title: "Title",
-  titleTemplate: (title) => `${title} | Title Site`,
+  title: 'Title',
+  titleTemplate: title => `${title} | Title Site`,
 })
 </script>
+
 <template>
   <div>
     <NuxtPage />

examples/nuxt3/app.vue

@@ -2,12 +2,13 @@
 const props = defineProps<{
   title: string
 }>()
-await new Promise((resolve) => setTimeout(resolve, 1000))
+await new Promise(resolve => setTimeout(resolve, 1000))
 
 useHead({
   title: computed(() => props.title),
 })
 </script>
+
 <template>
   <div>final title test</div>
 </template>

examples/nuxt3/components/ModifyTitle.vue

@@ -1,41 +1,41 @@
-import { defineNuxtConfig } from "nuxt/config"
-import { fileURLToPath } from "url"
-import { addPlugin } from "@nuxt/kit"
-import { resolve } from "pathe"
+import { fileURLToPath } from 'url'
+import { defineNuxtConfig } from 'nuxt/config'
+import { addPlugin } from '@nuxt/kit'
+import { resolve } from 'pathe'
 
-const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url))
-const rootDir = fileURLToPath(new URL("../../", import.meta.url))
+const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+const rootDir = fileURLToPath(new URL('../../', import.meta.url))
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   alias: {
-    "@vueuse/head": `${rootDir}/src`,
+    '@vueuse/head': `${rootDir}/src`,
   },
   app: {
     head: {
-      title: "default title",
+      title: 'default title',
     },
   },
   workspaceDir: rootDir,
   hooks: {
-    "modules:before": async ({ nuxt }) => {
+    'modules:before': async ({ nuxt }) => {
       const newModules = nuxt.options._modules
       // remove the nuxt meta (head) module
       for (const k in newModules) {
-        if (typeof newModules[k] === "function") {
-          if ((await newModules[k].getMeta()).name === "meta") {
+        if (typeof newModules[k] === 'function') {
+          if ((await newModules[k].getMeta()).name === 'meta') {
             // we can't use an undefined key so use a duplicate
-            newModules[k] = "@nuxt/telemetry"
+            newModules[k] = '@nuxt/telemetry'
           }
         }
       }
       nuxt.options._modules = newModules
     },
-    "modules:done"({ nuxt }) {
+    'modules:done': function ({ nuxt }) {
       // Replace #head alias
-      nuxt.options.alias["#head"] = runtimeDir
+      nuxt.options.alias['#head'] = runtimeDir
 
-      addPlugin({ src: resolve(runtimeDir, "plugin") }, { append: true })
+      addPlugin({ src: resolve(runtimeDir, 'plugin') }, { append: true })
 
       nuxt.options.build.transpile.push(runtimeDir)
     },

examples/nuxt3/nuxt.config.ts

@@ -1,29 +1,32 @@
 <script lang="ts" setup>
-import { useHead } from "#head"
+import { useHead } from '#head'
 
 const page = ref({
-  title: "Home",
-  description: "Home page description",
-  image: "https://nuxtjs.org/meta_400.png",
+  title: 'Home',
+  description: 'Home page description',
+  image: 'https://nuxtjs.org/meta_400.png',
 })
 
 useHead({
   title: computed(() => `${page.value.title} | Nuxt`),
   meta: [
     {
-      name: "description",
+      name: 'description',
       content: computed(() => page.value.description),
     },
     {
-      property: "og:image",
+      property: 'og:image',
       content: computed(() => page.value.image),
     },
   ],
 })
 </script>
+
 <template>
   <div>
     <h1>Index</h1>
-    <nuxt-link to="/second">second page</nuxt-link>
+    <nuxt-link to="/second">
+      second page
+    </nuxt-link>
   </div>
 </template>

examples/nuxt3/pages/index.vue

@@ -1,38 +1,43 @@
 <script lang="ts" setup>
-await new Promise((resolve) => setTimeout(resolve, 1000))
+await new Promise(resolve => setTimeout(resolve, 1000))
 
-const title = ref("Intermediately title with 1s delay")
+const title = ref('Intermediately title with 1s delay')
 
 useHead({
   title,
   bodyAttrs: {
-    class: "new-bg",
+    class: 'new-bg',
   },
   style: [
     // this is an example of the side effects of this rendering strategy
     // this style won't be hydrated at all
     {
       children: `.new-bg { background-color: lemonchiffon; } h2 { color: ${
-        process.server ? "red" : "lime"
+        process.server ? 'red' : 'lime'
       }; }`,
     },
   ],
 })
 
 const changeTitle = () => {
-  title.value = "Intermediately title updated"
+  title.value = 'Intermediately title updated'
 }
 
 const finalTitle = computed(() => {
-  return title.value.replace("Intermediately", "Final")
+  return title.value.replace('Intermediately', 'Final')
 })
 </script>
+
 <template>
   <div>
     <h2>second page</h2>
     <p>has a 1 second delay on rendering</p>
     <ModifyTitle :title="finalTitle" />
-    <button @click="changeTitle">change title</button>
-    <nuxt-link to="/">first page</nuxt-link>
+    <button @click="changeTitle">
+      change title
+    </button>
+    <nuxt-link to="/">
+      first page
+    </nuxt-link>
   </div>
 </template>

examples/nuxt3/pages/second.vue

@@ -1,5 +1,5 @@
-import type { HeadObject } from "@vueuse/head"
-import { useNuxtApp } from "#app"
+import type { HeadObject } from '@vueuse/head'
+import { useNuxtApp } from '#app'
 
 export type MetaObject = HeadObject
 

examples/nuxt3/runtime/index.ts

@@ -1,16 +1,15 @@
-import { createHead, renderHeadToString } from "@vueuse/head"
+import { createHead, renderHeadToString } from '@vueuse/head'
+import type { ComputedGetter } from 'vue'
 import {
   computed,
+  getCurrentInstance,
+  onBeforeUnmount,
   ref,
   watchEffect,
-  onBeforeUnmount,
-  getCurrentInstance,
-  ComputedGetter,
-} from "vue"
-import defu from "defu"
-import type { MetaObject } from "."
-import { defineNuxtPlugin, useRoute } from "#app"
-import { useRouter, watch } from "#imports"
+} from 'vue'
+import defu from 'defu'
+import type { MetaObject } from '.'
+import { defineNuxtPlugin } from '#app'
 
 // Note: This is just a copy of Nuxt's internal head plugin with modifications made for this issue
 
@@ -20,7 +19,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(head)
 
   const headReady = ref(false)
-  nuxtApp.hooks.hookOnce("app:mounted", () => {
+  nuxtApp.hooks.hookOnce('app:mounted', () => {
     watchEffect(() => {
       head.updateDOM()
     })
@@ -31,30 +30,28 @@ export default defineNuxtPlugin((nuxtApp) => {
     const meta = ref<MetaObject>(_meta)
     const headObj = computed(() => {
       const overrides: MetaObject = { meta: [] }
-      if (meta.value.charset) {
-        overrides.meta!.push({ key: "charset", charset: meta.value.charset })
-      }
-      if (meta.value.viewport) {
-        overrides.meta!.push({ name: "viewport", content: meta.value.viewport })
-      }
+      if (meta.value.charset)
+        overrides.meta!.push({ key: 'charset', charset: meta.value.charset })
+
+      if (meta.value.viewport)
+        overrides.meta!.push({ name: 'viewport', content: meta.value.viewport })
+
       return defu(overrides, meta.value)
     })
     head.addHeadObjs(headObj as any)
 
-    if (process.server) {
+    if (process.server)
       return
-    }
 
-    if (headReady) {
+    if (headReady.value) {
       watchEffect(() => {
         head.updateDOM()
       })
     }
 
     const vm = getCurrentInstance()
-    if (!vm) {
+    if (!vm)
       return
-    }
 
     onBeforeUnmount(() => {
       head.removeHeadObjs(headObj as any)

examples/nuxt3/runtime/plugin.ts

@@ -1,26 +1,30 @@
 <script setup>
-import { ref } from "vue"
-import { Head } from "../../src"
+import { ref } from 'vue'
+import { Head } from '../../src'
 
 const count = ref(0)
 
-const style = `button {color: red}`
+const style = 'button {color: red}'
 </script>
 
 <template>
   <Head>
     <title>{{ count }}</title>
-    <html lang="en"></html>
-    <body class="body"></body>
-    <meta name="description" content="desc" />
+    <html lang="en" />
+    <body class="body" />
+    <meta name="description" content="desc">
     <component is="style">
-      body { background: lightgreen; } {{ style }}</component
-    >
+      body { background: lightgreen; } {{ style }}
+    </component>
   </Head>
 
-  <router-link to="/">Back Home</router-link>
+  <router-link to="/">
+    Back Home
+  </router-link>
 
-  <hr />
+  <hr>
 
-  <button @click="count++">{{ count }}</button>
+  <button @click="count++">
+    {{ count }}
+  </button>
 </template>