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

Question

在我的create-react-app@2.1.8 TypeScript/React应用程序中，TS编译器仅会在我在VS Code编辑器中打开的文件中的“问题”窗格中显示错误。因此，有时只能在运行应用程序后才能发现错误。

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

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

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

是否有更好的解决方案？

顺便说一句，这与Show project wide TypeScript problems/errors in webstorm相同，但是关于Visual Studio Code而不是webstorm。

- Justin Grant

Answer 1

截至2023年10月24日，VS Code中有一个实验性功能可用于启用项目范围的问题报告。请将以下内容添加到您的settings.json文件中。

"typescript.tsserver.experimental.enableProjectDiagnostics": true

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

有人报告说，这个选项会扫描node_modules的内容，即使它在exclude列表中，但添加'skipLibCheck'有所帮助。

请留意这个空间。

- Jurijs Kovzels

---

对我有用的配置是 "typescript.tsserver.experimental.enableProjectDiagnostics": true。团队正在积极开发相关功能。 - Dawson B

@DawsonB感谢您提供的信息，我已经更新了工单。 - Jurijs Kovzels

我添加了这个设置，重新启动了VS Code，但它没有显示任何问题？（尽管我有一些问题） - stefan.at.kotlin

您可以在 VSCode 的用户界面中打开设置，搜索“实验性 TypeScript”，然后将“启用项目诊断”选项勾选。勾选后，它对我起作用了。 - Kiran

这仍然是一个实验性的功能，截至2022年6月2日。 - Ivandez

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://dev59.com/Lrfna4cB1Zd3GeqPt4A_#58866185

此解决方案是从上面链接的 GitHub 问题中@molinx的答案进行了改编，也得益于下面@kumar303的评论。

- Justin Grant

---

版本1.30添加了"runOn": "folderOpen"。详情请见https://code.visualstudio.com/updates/v1_30#_run-on-folder-open。 - kumar303

@kumar303，这是一个有用的改进！我相应地更新了我的答案。谢谢！ - Justin Grant

这个功能之前是正常工作的，只是被新的更新所取代了吗？ - aviya.developer

我需要稍微改变任务，以使其在Windows中运行"command": "call"并将tsc的路径添加到args中，例如 "args": ["node_modules/.bin/tsc", "--watch", "--noEmit", "--project", "www"], - Arikael

Answer 3

如果您因为没有打开引用文件/模块而收到 TypeScript 错误。 您需要前往选项 -> 文本编辑器 -> Javascript/typescript -> 项目 -> 并取消勾选忽略 Visual Studio 解决方案文件。

祝您有美好的一天；

- Miroslav Lalík

Answer 4

这个答案与其他发送的答案非常相似，但我稍微有些不同，并且对我非常有效。

1. 将此行添加到您的.vscode/settings.json文件中：

"eslint.lintTask.enable": true

1. 在.vscode/tasks.json中添加此任务或如果该文件不存在则创建：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "problemMatcher": ["$eslint-stylish"],
      "label": "eslint: lint whole folder",
      "script": "lint",
      "presentation": {
        "reveal": "never",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" },
      "detail": "Run eslint for all files on the workspace folder",
      "options": {
        "configFile": ".eslintrc.js",
        "ignorePath": ".eslintignore"
      }
    }
  ]
}

附注： problemMatcher 是在问题选项卡上实现“魔法”的关键。

- Rodrigo Cipriani da Rosa