场景
现在vue3也慢慢开始流行起来了,相信很多页面中都会有这么一段代码
import { ref, reactive, computed, onBeforeMount, onMounted, watch } from 'vue'
每个页面都需要引入这么一段代码,我相信肯定有人跟我一样很烦,所以找到了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
}
}),
这里注意下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
关于这个,是最新的写法,一些旧的项目,可以这么写,不用强求,这里最终都只是获取文件的路径地址
dts: fileURLToPath(new URL('./auto-import.d.ts', import.meta.url))
dts: path.resolve(__dirname, './auto-import.d.ts')
dts: './auto-import.d.ts'
使用第一种fileURLToPath需要引入。
import { fileURLToPath, URL } from 'node:url'
使用第二种path需要引入。
import path from 'path'
- 注意2
eslintrc: {
// 已存在文件设置默认 false,需要更新时再打开,防止每次更新都重新生成
enabled: false,
// 生成文件地址和名称
filepath: fileURLToPath(
new URL('./.eslintrc-auto-import.json', import.meta.url)
),
globalsPropValue: true
}
这里的filepath也是跟上面说的那个dts是一样的,可以直接。
filepath: './.eslintrc-auto-import.json'
这个地方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",
],
目前为止你会发现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文件
],
最后
确保正确配置完成后,重启下VScode,希望各位能顺利解决,以上是我整理出来的解决方案,欢迎指点。
以上auto-import.d.ts文件名是我最初自己建的,默认生成是这个auto-imports.d.ts,带有个s,希望大家注意,不好意思