报红:找不到名称ref ts(2304)、‘ref‘ is not defined. eslint(no-undef)

接上篇

在上篇介绍了使用 unplugin-auto-import 和 unplugin-vue-components

配置完成后,项目可以正常运行,并且页面也正常显示,但vscode里就是报红

这个报红可能是由于 ts 发出的,也可能是由于 eslint 发出的

具体可以用鼠标悬浮来查看问题源出自谁,以下是我这边的解决方案,大家可以参考:


源于TS 找不到名称ref ts(2304)

这个 ref 是源于vue,但我们没有在这个文件里导入ref,ts也查找不到它的来源,所以报红。

我们要做的就是让 ts 知道它是被引入的就可以,引入它的文件是unplugin-auto-import自动生成的auto-imports.d.ts文件:

我们把这个auto-imports.d.ts 给到 ts 配置文件中的 include ,把这个文件和 ts 做关联,这样 ts 就知道 ref 的确被引入,就不会报红了。


源于Eslint 'ref' is not defined

如果是源于 eslint 的报红,那相对 ts 的处理方法会稍多一丁点儿

需要回归到上篇所说的对 unplugin-auto-import 的配置中:

开启 eslintrc ,让其自动生成**.eslintrc-auto-import.json** 文件

TypeScript 复制代码
eslintrc: {
   enabled: true,
},

找到 eslint 的配置文件(我这里是eslint.config.js,你的可能是.eslintrc.js 或其他名称 )

在该配置文件中找到 extends(如果没有这个配置项追加即可),将自动生成的eslintrc-auto-import.json 添加到 extends 配置项中即可。

TypeScript 复制代码
extends: ['./.eslintrc-auto-import.json'],

保存后,关闭vscode,重新打开原来因该问题报红的文件,ref 的报红就消失了。

打开这个自动生成的文件,我们也可以看到其中有对自动导入的那些模块做全局配置------全局变量,全局变量是在所有文件中都可以访问的变量,不需要显示引入或声明即可使用

相关推荐
桂月二二35 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用?
前端·react.js·前端框架
qq_392794484 小时前
前端缓存策略:强缓存与协商缓存深度剖析
前端·缓存