如何让 VSCode 显示 TypeScript 文件*未*在编辑器中打开的错误？

Question

在我的create-react-app@2.1.8 TypeScript/React 应用程序中，TS 编译器错误仅显示在我在 VS 代码编辑器中打开的文件的问题窗格中。 因此，有时我在实际运行应用程序之前不会发现错误。

如何让 TypeScript 在我打开工作区或保存对文件的更改时自动检查所有代码文件中的编译器错误？

我尝试在package.json中添加"watch": "tsc --watch"作为脚本，然后在集成终端窗格中执行npm run-script watch ，但这有两个问题：

• 错误显示在终端窗格中，但不填充 VSCode 中的问题窗格
• 我必须手动运行它，而不是在工作区加载时自动启动

有更好的解决方案吗？

顺便说一句，这与Show projectwide TypeScript questions/errors in webstorm 相同，但与 Visual Studio Code 而不是 webstorm 的问题相同。

Answer 1

截至2020年 4 月 14 日，普遍可用的VS Code中有一个实验性功能，可启用项目范围的问题报告。 将以下内容添加到您的settings.json ：

"typescript.tsserver.experimental.enableProjectDiagnostics": true

它仍然是一个实验性功能（经过几年的忽视），因此它可能同时令人不知所措。 好消息是它显然也适用于其他语言并且尊重您的配置文件。

注意这个空间。

Answer 2

不幸的是，截至 2019 年 11 月，开箱即用的 VS Code 不支持此功能。 请参阅https://github.com/Microsoft/vscode/issues/13953 。

我能找到的最佳解决方法是向 tasks.json 添加一个将运行tsc --watch的任务，并将其配置为在打开工作区或文件夹时运行。

下面是 tasks.json 的示例配置。 请注意，以下代码段中的“www”是指您要检查的带有tsconfig.json的文件夹。 将其替换为您自己的文件夹的名称，相对于您的工作空间的根目录。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc watch",
            "type": "shell",
            "command": "./node_modules/.bin/tsc",
            "isBackground": true,
            "args": ["--watch", "--noEmit", "--project", "www"],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "never",
                "echo": false,
                "focus": false,
                "panel": "dedicated"
            },
            "problemMatcher": "$tsc-watch",
            "runOptions": {
                "runOn": "folderOpen"
            }
        }
    ]
}

请注意，默认情况下似乎未启用自动运行任务。 要选择自动运行任务，请按照此处的说明进行操作： https ://stackoverflow.com/a/58866185/126352

该解决方案改编自@molinx在上面链接的 GitHub 问题中的回答，并且由于下面的@kumar303评论而得到改进。

Answer 3

如果您因为没有打开该引用文件/模块而从错误的引用中得到 typescript 错误。 您必须 go 到 Options->TextEditor->Javascript/typescript -> Project -> 并取消选中忽略 Visual Studio 解决方案文件。

祝你有美好的一天;