VSCode 显示与 Vue CLI 构建不同的错误

Posted 2023-02-23

【中文标题】VSCode 显示与 Vue CLI 构建不同的错误

【英文标题】：VSCode shows different error than Vue CLI build

【发布时间】：2021-11-21 08:08:45

【问题描述】：

我有一个全新的 Vue 3 CLI 项目，其中 VSCode 向我显示了 CLI/Webpack 构建未显示的错误，即使我告诉 VSCode 使用项目中的 TS 版本（与 CLI/Webpack 相同） ) 而不是随 VSCode “发布”的版本：

虽然我确实知道如何通过从 HelloWorld 组件 (props: ,) 中删除“空”props 属性来解决此问题，但我真的很好奇为什么会发生这种情况以及如何防止这种情况导致未来会更加混乱。

环境

由于我不知道这是由 VSCode、Vue CLI、Webpack 还是某些插件引起的，我将在此处简单列出我的环境的所有可能因素：

VS 代码： 版本1.60.2 插件volar已安装 使用的操作Volar: Select Typescript Version -> Use workspace version 4.1.6 导致.vscode/settings.json 中的以下设置："typescript.tsdk": "node_modules/typescript/lib" Vue: 使用全局安装的 CLI 版本创建项目4.5.13 设置： 手动 TS & Linter/格式化程序 3.x 没有类样式组件，也没有 babel Linter：ESLint + 更漂亮 创建后我在项目中所做的唯一更改： 从组件HelloWorld.vue + 所有用法中删除属性msg 并保留“空”props: , 其他环境： 该项目是在 WSL2 Ubuntu 的文件系统中创建的，并在 VSCode 中远程打开 但是，将源文件保存在 Windows 文件系统中并直接从那里打开时会发生同样的事情（不涉及 WSL） NPM 版本6.14.15 节点版本14.17.6

复制设置

我已经上传了whole project here。 复制步骤（至少在我的机器上）：

解压项目 npm i在项目文件夹内 在 VSCode 中打开文件夹 （可能需要）通过从“所有命令”菜单Select TypeScript Version -> Use workspace version 4.1.6 调用来告诉 VSCode 使用正确的 TS 版本 VSCode 现在打开App.vue 时应该会显示错误 如果不是：关闭并重新打开 VSCode

【参考方案1】：

使用相同的 TypeScript 版本是不够的。在 Vue 3 和 Volar 语言服务器（或 VSCode 扩展）中有两个版本的 TypeScript 编译器：

tsc - 不理解 .vue 文件的标准编译器 vue-tsc - 编译器的 Volar 版本，可以理解 .vue 文件（但也支持常规 tsc 文件，如 .ts .json 等）。 Volar VS Code 扩展正在使用它，因此它也能理解 .vue 文件

您的问题是您的 webpack 配置使用了 tsc（与 Volar erxtension 不同），因此 TypeScript 甚至不会扫描 .vue 文件以查找错误。

您可以尝试执行以下操作吗？ 在您的项目目录中：

运行npm i vue-tsc 将 package.json 中的 build 脚​​本更改为：vue-cli-service build && vue-tsc --noEmit

步骤 2 中的示例有点浪费，因为它将首先运行 tsc 作为 vue-cli-service build 的一部分（并显示“DONE Build complete”，然后当您稍等片刻时，vue-tsc 将逐步启动并将重新开始TS编译，但是报错）

【讨论】：

我已经放弃了 Vue，所以我不能再尝试你的建议了。很抱歉您在这里浪费了时间，我仍然非常感谢您的努力，也许它可以帮助别人！谢谢！