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

乆夨(jiuze)

已于 2024-07-12 11:35:44 修改

阅读量5.8k

点赞数 9

分类专栏：前端文章标签： vue.js javascript 前端

于 2024-04-08 19:38:21 首次发布

本文链接：https://blog.csdn.net/weixin_44846945/article/details/137520006

版权

场景

现在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']