以下解决办法如不生效,可尝试 重启 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.json 和 auto-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项目按需自动导入配置以及一些常见问题修复找到如下图所在位置,后面有解决方法说明
推荐文章
发表评论