报红:找不到名称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 文件

eslintrc: {enabled: true,
},

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

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

extends: ['./.eslintrc-auto-import.json'],

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875288.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打卡第22天------回溯算法

开始学习了,希望我可以尽快成功上岸! 一、回溯理论基础 什么是回溯法?回溯法也可以叫做回溯搜索法,它是一种搜索的方式。 回溯是递归的副产品,只要有递归就会有回溯。 回溯法的效率回溯法的本质是穷举,穷举所有可能,然后找出我们想要的答案。如果想让回溯法高效一些,可…

Docker-Compose实现MySQL之主从复制

1. 主服务器(IP:192.168.186.77) 1.1 docker-compose.yml services:mysql-master:image: mysql:latest # 使用最新版本的 MySQL 镜像container_name: mysql-master # 容器的名称environment:MYSQL_ROOT_PASSWORD: 123456 # MySQL root 用户的密码MYSQL_DATABASE: masterd…

我用Tauri开发的待办效率工具开源了!

开源仓库地址 gitee Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git 应用地址 windows应用地址下载 https://kestrel-task.cn 具体内容 也可以看🎉使用Taurivitekoa2mysql开发了一款待办效率应用 这篇文章。 💻技术栈 Tauri: Tauri…

传统自然语言处理(NLP)与大规模语言模型(LLM)详解

自然语言处理(NLP)和大规模语言模型(LLM)是理解和生成人类语言的两种主要方法。本文将介绍传统NLP和LLM的介绍、运行步骤以及它们之间的比较,帮助新手了解这两个领域的基础知识。 传统自然语言处理(NLP&…

Angular中component和directive的区别?

在Angular中,Component和Directive都是重要的构建块,用于构建和组织应用程序的UI。然而,它们有不同的用途和特点。以下是Component和Directive的主要区别: Component(组件) 1、定义:Component…

采集PCM,将base64片段转换为wav音频文件

需求 开始录音——监听录音数据——结束录音 在监听录音数据过程中:客户端每100ms给前端传输一次数据(pcm数据转成base64),前端需要将base64片段解码、合并、添加WAV头、转成File、上传到 OSS之后将 url 给到服务端处理。 {num…

Redis分布式系统中的主从复制

本篇文章主要对Redis的主从复制进行讲解。主要分析复制的原理,包括:建立复制、全量复制、部分复制、全量复制、心跳检测等。希望本篇文章会对你有所帮助。 文章目录 一、主从复制简介 二、配置主从复制模式 断开主从复制 安全性 只读 传输延迟 三、拓扑结构 四、主…

【git】太大了失败: fatal: fetch-pack: invalid index-pack output

#‘’ Git仓库过大致使clone失败的解决方法 上述大神的方法,亲测有效 中途失败: 太大了 fetch-pack: unexpected disconnect while reading sideband packet fatal: early EOF fatal: fetch-pack: invalid index-pack output关闭压缩 git config --global core.…

如何利用VPN和NAT技术实现高效安全的网络连接

文章目录 **什么是VPN?****专用地址的使用****VPN的工作原理****远程接入VPN****VPN的应用实例****什么是NAT?****NAT的工作原理****NAPT(网络地址与端口号转换)****NAT的优势和局限****NAT的应用实例****VPN和NAT的结合****常见问…

C++ | Leetcode C++题解之第279题完全平方数

题目: 题解: class Solution { public:// 判断是否为完全平方数bool isPerfectSquare(int x) {int y sqrt(x);return y * y x;}// 判断是否能表示为 4^k*(8m7)bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7;}int numSquares(i…

详细带你彻底搞懂 Spring Security 6.0 的实现原理

​ 博客主页: 南来_北往 系列专栏:Spring Boot实战 前言 Spring Security 6.0是一个功能强大且可扩展的身份验证和访问控制框架,它用于保护基于Java的应用程序。其主要目标是提供一个全面的安全解决方案,包括身份验证、授权、防止跨站请…

IPv6过渡技术之网络工程师软考中级

IPv6过渡技术 IPv4/IPv6双栈 1.设备支持IPV4/IPv6,IPv4及IPv6在网络中独立部署,在一段时间内并存。对现有IPv4业务影响较小。 2.演进方案相对简单、易理解。网络规划设计工作量相对更少 3.现有软硬件(网络设备、终端、操作系统等)已经有很大一部分支持…

IDEA-安装插件 驼峰下划线转换

第一步:安装 file-settings-plugins-在marketplace搜索“CamelCase”-点击安装 第二步:设置 file-settings-editor-camel_case 第三步:使用 选中想转换的遍历 使用快捷键 Alt Shift U

用excel能做出这些报表吗?

用excel能做出这些报表吗? 有什么办法不安装OFFICE也能显示出来?

SQLLIte [SQLITE_BUSY] The database file is locked (database is locked) 问题

SqlLite是一个嵌入式轻量级文件数据库 侵入式 。 方便,不需要安装数据库,仅需要一个目录轻量级。支持的数据量不大。单文件。有文件锁。标题出现的问题就是触发了锁。 所以,sqlLite的锁是库锁,因为sqlLite的数据库就是一个后缀为…

解释Spring Data中的PagingAndSortingRepository

PagingAndSortingRepository是Spring Data仓库层次结构中的一个接口,它扩展自CrudRepository接口。正如其名称所暗示的,PagingAndSortingRepository为实现分页和排序的数据访问提供了额外的方法。通过使用这个接口,你可以更容易地管理和访问大…

ARM体系结构和接口技术(十)按键中断实验

文章目录 一、按键中断实验(一)分析按键电路图(二)芯片手册 二、按键中断实验分析(一)查看所有外设的总线以及寄存器基地址(二)RCC章节(三)GPIO章节&#xff…

Known框架实战演练——进销存业务单据

本文介绍如何实现进销存管理系统的业务单据模块,业务单据模块包括采购进货单、采购退货单、销售出货单、销售退货单4个菜单页面。由于进销单据字段大同小异,因此设计共用一个页面组件类。 项目代码:JxcLite开源地址: https://git…

2024最新Uniapp的H5网页版添加谷歌授权验证

现在教程不少,但是自从谷歌升级验证之后,以前的老教程就失效了,现在写一个新教程以备不时之需。 由于众所周知的特殊原因,开发的时候一定注意网络环境,如果没有梯子是无法进行开发的哦~ clientID的申请方式我就不再进…

HTML开发笔记:3.图形化开发软件与模版网站

一、Google Web Designer 下载网址:webdesigner.withgoogle.com(得挂梯子) 可以编辑文字 可以插入图片,快捷键是ctrlshiftI 右侧“大纲”属性中可以调节大小 可以点击右上角在浏览器中预览效果: 二、模版网站 https://…