Vscode工具开发Vue+ts项目时vue文件ts语法报错-红波浪线等

Vscode工具开发Vue+ts项目时vue文件ts语法报错-红波浪线等

解决方案

问题如题描述,主要原因是开发工具使用的代码检查与项目的中的ts不一致导导致,解决办法,修改 vscode 中, 快捷键:command + shift + p, 输入:TypeScript.selectTypeScriptVersion / 选择TypeScript版本,如下图:
在这里插入图片描述
点击之后,出现如下图,选择工作区版本即可。
在这里插入图片描述

原始问题如下图

在这里插入图片描述

情况2:如果在命令中无法找到以上命令(TypeScript:select … version…)

command + shift + p ,如下图:
在这里插入图片描述

在这里插入图片描述
构选后,再次打 命令框,如下图:
在这里插入图片描述
即可重新选择了。选择后会在当前目录下新建一个[.vscode]文件夹,里面有一个settings.json文件,里面自动生成的配置如下:

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

我们自己加也可以。

### 解决 VSCode 中导入和运行 Vue 项目报错的方法 #### 修改 TypeScript 接口报错 当遇到模块 `"*.vue"` 没有导出成员 `FormType` 的 TS 插件 (2614) 错误,可以尝试修改 import 语句来匹配实际存在的导出项。如果确实存在该成员,则需确认路径无误,并确保编译器能够识别 `.vue` 文件中的组件定义[^1]。 对于此类问题,在 `shims-vue.d.ts` 或者类似的声明文件里添加相应的类型声明可能是必要的解决方案之一: ```typescript declare module '*.vue' { import { DefineComponent } from 'vue'; const component: DefineComponent<{}, {}, any>; export default component; } ``` 这有助于让 TypeScript 正确解析来自单文件组件(SFCs)的数据结构。 #### 处理 Vite 架构下的常见配置错误 针对基于 Vite 创建的新建 Vue3 工程,在编辑器内可能遭遇多处语法检查异常。具体表现为 App.vue 及其他核心配置文档内的波浪线警告。这类现象通常源于 IDE 对新特性支持不足或是插件版本不兼容所致[^2]。 建议更新 Visual Studio Code 至最新稳定版,并同步升级所有关联扩展包至官方推荐版本。此外还需验证 tsconfig.json 下各细分节点设置是否合理有效,特别是 paths 字段应指向正确的源码位置以便于自动补全功能正常运作。 #### 调整 package.json 和工作区环境变量 有即便已正确设置了 serve 命令但仍会触发意想不到的告警框。此应当仔细审查 package.json 内部脚本指令是否存在拼写失误或逻辑缺陷;同留意操作系统的全局环境参数是否会干扰本地构建流程执行效率[^3]。 例如,某些情况下 NODE_ENV 设定不当可能会引起不必要的混淆模式激活从而影响性能表现甚至造成渲染失败等问题的发生。 #### 清除缓存与重置开发工具状态 最后一种较为极端但也屡试不爽的办法便是通过清理 node_modules 文件夹以及重新安装依赖库的方式来排除潜在隐患。即先卸载现有软件集合再依据锁定清单重建整个生态系统以达到最佳适配效果[^4]。 值得注意的是,尽管重启计算机看似简单粗暴却往往能起到意想不到的作用——尤其是在面对那些由临资源冲突所引发的技术难题面前尤为奏效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值