vue3项目运行正常但vscode红色波浪线报错

news/2024/4/30 10:04:45

以下解决办法如不生效,可尝试 重启 vscode

一、Vetur插件检测问题

  • vetur 是一个 vscode 插件,用于为 .vue 单文件组件提供代码高亮以及语法支持
  • vue 以及 vetur 对于 ts 的支持,并不友好

1、原因

  • 如下图:鼠标放到红色波浪线处,出现提示小框,箭头所指有 Vetur 关键字,说明是这个插件的语法检测问题。

在这里插入图片描述

2、解决方法

  • 禁用 Vetur 插件
  • 安装 Vue-Official 插件,原名 Volar
  • 两个插件若同时存在,会冲突,若都不存在,则不会进行语法检测

注意: 安装这个插件时,当前工作区如果是V3的项目,还是要 “禁用” Vetur 以避免冲突。同理,要是工作区V2的,最好也 “禁用” Vue-Official

二、ts 不识别导入报错的问题

1、原因

  • 如下图:鼠标放到红色波浪线处,出现提示小框,箭头所指有 ts 关键字,说明是TS未识别到相应函数

在这里插入图片描述

  • TS未识别到相应函数的原因:项目使用了自动导入插件 unplugin-auto-import,且 没有相应的模块声明文件

2、解决方法

(1)第一种情况

  • tsconfig.json 中引入 auto-imports.d.ts 文件
  • *.d.ts 表示所有的.d.ts文件
  • 需满足 tsconfig.jsonauto-imports.d.ts 文件都在
    项目根目录
  • 若不满足,视情况在 tsconfig.json中修改
// tsconfig.json
{"include": [ "*.d.ts",      ],
}

(2)第二种情况

  • 如果 tsconfig.json 中内容如下:
{"files": [],"references": [{"path": "./tsconfig.node.json"},{"path": "./tsconfig.app.json"},{"path": "./tsconfig.vitest.json"}]
}
  • 则在 tsconfig.app.json 中引入 auto-imports.d.ts 文件
  • *.d.ts 表示所有.d.ts文件
// tsconfig.app.json
{"include": [ "*.d.ts",      ],
}

在这里插入图片描述

(3)第三种情况

  • 若以上两种都不满足,查看博文 Vue3+Vite项目按需自动导入配置以及一些常见问题修复
  • 找到如下图所在位置,后面有解决方法说明

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

数据挖掘中的PCA和KMeans:Airbnb房源案例研究

目录 一、PCA简介 二、数据集概览 三、数据预处理步骤 四、PCA申请 五、KMeans 聚类 六、PCA成分分析 七、逆变换 八、质心分析 九、结论 十、深入探究 10.1 第 1 步:确定 PCA 组件的最佳数量 10.2 第 2 步:使用 9 个组件重做 PCA 10.3 解释 PCA 加载和特…

【stm32】I2C通信协议

【stm32】I2C通信协议 概念及原理 如果我们想要读写寄存器来控制硬件电路,就至少需要定义两个字节数据 一个字节是我们要读写哪个寄存器,也就是指定寄存器的地址 另一个字节就是这个地址下存储寄存器的内容 写入内容就是控制电路,读出内容就…

ChatGPT 初学者指南

原文:ChatGPT for Beginners 译者:飞龙 协议:CC BY-NC-SA 4.0 介绍 如果您一直关注新闻和趋势,您可能已经在某个地方读到或听到过,Sam Altman 的生成式人工智能平台 ChatGPT 已经将人工智能推向了一个新的高度 - 许多…

Topaz Video AI for Mac v5.0.0激活版 视频画质增强软件

Topaz Video AI for Mac是一款功能强大的视频处理软件,专为Mac用户设计,旨在通过人工智能技术为视频编辑和增强提供卓越的功能。这款软件利用先进的算法和深度学习技术,能够自动识别和分析视频中的各个元素,并进行智能修复和增强&…

基于springboot实现影城管理系统项目【项目源码+论文说明】

基于springboot实现影城管理系统演示 摘要 随着现在网络的快速发展,网上管理系统也逐渐快速发展起来,网上管理模式很快融入到了许多生活之中,随之就产生了“小徐影城管理系统”,这样就让小徐影城管理系统更加方便简单。 对于本小…

FreeRTOS学习 -- 再识

工作中一直使用FreeRTOS进行着开发,但是没有进行过系统的总结过。现在将快速使用几天时间将FreeRTOS相关知识点加以总结。 官网: https://www.freertos.org/zh-cn-cmn-s/ 参看资料: 正点原子 STM32F1 FreeRTOS开发手册_V1.2.pdf The FreeRTOS…