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

以下解决办法如不生效,可尝试 重启 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中修改
typescript 复制代码
// tsconfig.json
{
	"include": [ 
	    "*.d.ts",      
    ],
}

(2)第二种情况

  • 如果 tsconfig.json 中内容如下:
typescript 复制代码
{
  "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文件
typescript 复制代码
// tsconfig.app.json
{
	"include": [ 
	    "*.d.ts",      
    ],
}

(3)第三种情况

相关推荐
Caesar Zou14 小时前
ssh远程连接服务器,vscode不显示claude
服务器·vscode·ssh
JoannaJuanCV17 小时前
vscode debug Transformer源码说明
ide·vscode·transformer·qwen3
ZJU_统一阿萨姆19 小时前
Windows系统VSCode配置Rust开发环境(超详细保姆级教程)
windows·vscode·rust
GOATLong20 小时前
MySQL内置函数
android·数据库·c++·vscode·mysql
傅科摆 _ py20 小时前
Vscode 如何配置远程环境的 ssh 连接
ide·vscode·编辑器·1024程序员节
zhangfeng113321 小时前
在 R 医学数据分析中,关于 RStudio 和 VSCode 哪个效率更高
vscode·数据分析·r语言
HIT_Weston21 小时前
14、【Ubuntu】【VSCode】VSCode 断联问题分析:hostname(二)
linux·vscode·ubuntu
Aevget21 小时前
DevExpress WinForms v25.1亮点 - 电子表格组件、富文档编辑器全新升级
c#·编辑器·界面控件·devexpress·ui开发·winforms
快秃头的码农1 天前
vscode搭建python项目隔离的虚拟环境
ide·vscode·python
R-G-B1 天前
【23】MFC入门到精通——MFC资源视图 报错“在另一个编辑器中打开” ,MFC Dialog窗口消失 资源视图“在另一个编译器中打开”
c++·编辑器·mfc·“在另一个编辑器中打开”·mfc dialog窗口消失