vue.js - VSCode 显示与 Vue CLI 构建不同的错误

Question

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

虽然我确实知道如何通过从组件 ( ) 中删除“空”props属性来解决这个问题，但我真的很好奇为什么会发生这种情况以及如何防止这种情况在未来造成进一步的混乱。HelloWorldprops: {},

环境

由于我不知道这是由 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"
• 视图：
  • 使用全局安装的 CLI 版本创建项目4.5.13
  • 设置：
    • 手动
    • TS & Linter/格式化程序
    • 3.x
    • 没有类样式组件，没有 babel
    • Linter：ESLint + prettier
  • 创建后我在项目中所做的唯一更改：
    • msg从组件+所有用法中删除属性HelloWorld.vue并保留“空”props: {},
• 其他环境：
  • 该项目是在 WSL2 Ubuntu 的文件系统中创建的，并在 VSCode 中远程打开
  • 但是，在 Windows 文件系统中保存源并直接从那里打开它时会发生同样的事情（不涉及 WSL）
• NPM 版本6.14.15
• 节点版本14.17.6

复制设置

我已经在这里上传了整个项目。
复制步骤（至少在我的机器上）：

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

标签： vue.jsvisual-studio-codewebpackvuejs3vue-cli

Answer 1

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

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

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

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

1. 跑npm i vue-tsc
2. build将package.json 中的脚本更改为：vue-cli-service build && vue-tsc --noEmit

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