unplugin-auto-import自动导入Eslint和Ts警告问题 找不到名称“ref”。ts(2304)_unplugin-auto-import eslint

场景

现在vue3也慢慢开始流行起来了，相信很多页面中都会有这么一段代码

import { ref, reactive, computed, onBeforeMount, onMounted, watch } from 'vue'
1

每个页面都需要引入这么一段代码，我相信肯定有人跟我一样很烦，所以找到了unplugin-auto-import插件，但是这个插件也带了警告，这个警告其实是有两个地方的，一个是eslint的警告，一个是ts的警告。如下

问题的意思其实很简单，就是找不到模块，很奇怪，明明安装了插件了，其实不影响实际功能的，但是我个人看的很难受哈，有点强迫症。

Eslint解决

在vite.config.ts或者vue.config.ts中引入unplugin-auto-import插件，我这里项目是vite的，以下就以vite为例哈。

autoImport({
  imports: ['vue', 'vue-router', 'pinia'],
  dts: fileURLToPath(new URL('./auto-import.d.ts', import.meta.url)),
  eslintrc: {
    // 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成
    enabled: false,
    // 生成文件地址和名称
    filepath: fileURLToPath(
      new URL('./.eslintrc-auto-import.json', import.meta.url)
    ),
    globalsPropValue: true
  }
}),
1
2
3
4
5
6
7
8
9
10
11
12
13

这里注意下autoImport里面的dts指向根目录文件生成的的auto-import.d.ts，这个文件安装unplugin-auto-import插件后在vite.config.ts里面加入imports后运行项目，会自动生成的，要是没有可以复制我的，正常来说会有的。
auto-import.d.ts文件

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const createPinia: typeof import('pinia')['createPinia']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const defineStore: typeof import('pinia')['defineStore']
  const effectScope: typeof import('vue')['effectScope']
  const getActivePinia: typeof import('pinia')['getActivePinia']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const mapActions: typeof import('pinia')['mapActions']
  const mapGetters: typeof import('pinia')['mapGetters']
  const mapState: typeof import('pinia')['mapState']
  const mapStores: typeof import('pinia')['mapStores']
  const mapWritableState: typeof import('pinia')['mapWritableState']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const setActivePinia: typeof import('pinia')['setActivePinia']
  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const storeToRefs: typeof import('pinia')['storeToRefs']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const toValue: typeof import('vue')['toValue']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useLink: typeof import('vue-router')['useLink']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {
  // @ts-ignore
  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
  import('vue')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

• 注意1
  关于这个，是最新的写法，一些旧的项目，可以这么写，不用强求，这里最终都只是获取文件的路径地址

dts: fileURLToPath(new URL('./auto-import.d.ts', import.meta.url))
1

dts: path.resolve(__dirname, './auto-import.d.ts')
1

dts: './auto-import.d.ts'
1

使用第一种fileURLToPath需要引入。

import { fileURLToPath, URL } from 'node:url'
1

使用第二种path需要引入。

import path from 'path'
1

• 注意2

eslintrc: {
  // 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成
  enabled: false,
  // 生成文件地址和名称
  filepath: fileURLToPath(
   new URL('./.eslintrc-auto-import.json', import.meta.url)
  ),
  globalsPropValue: true
 }
1
2
3
4
5
6
7
8
9

这里的filepath也是跟上面说的那个dts是一样的，可以直接。

filepath: './.eslintrc-auto-import.json'
1

这个地方enabled最开始要为true，filepath不要，运行项目会在项目根目录生成一个.eslintrc-auto-import.json文件，这个文件其实是根据auto-import.d.ts生成适应eslint能理解的文件，生成后enabled最开始要为false，filepath填写生成的.eslintrc-auto-import.json文件地址，之所以关闭就是避免每次更新
最后在.eslintrc.js里面增加以下代码

extends: [
  "./.eslintrc-auto-import.json",
],
1
2
3

目前为止你会发现eslint的警告去掉了，但是ts的警告会出来。

ts解决

ts的就很简单了，只要在tsconfig.json里面的include增加auto-import.d.ts的引用

"include": [
    "scripts/**/*.ts",
    "./**/*.ts",
    "./**/*.d.ts",
    "./**/*.tsx",
    "./**/*.vue",
    "scripts/index.mts",
    "scripts/templateTs/router/routes.ts",
    "scripts/templateTs/router/index.ts",
    "scripts/templateTs/main.ts",
    "./vite-env.d.ts",
    "types/*.d.ts",
    "./*.ts",
    "auto-import.d.ts", // 引入auto-import.d.ts文件
  ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后

确保正确配置完成后，重启下VScode，希望各位能顺利解决，以上是我整理出来的解决方案，欢迎指点。
以上auto-import.d.ts文件名是我最初自己建的，默认生成是这个auto-imports.d.ts，带有个s，希望大家注意，不好意思