如何让 VSCode 显示文件*未*在编辑器中打开的 TypeScript 错误?
How to get VSCode to show TypeScript errors for files *not* open in the editor?
在我的 create-react-app@2.1.8
TypeScript/React 应用程序中,TS 编译器错误仅显示在我在 VS 代码编辑器中打开的文件的“问题”窗格中。因此,我有时在实际 运行 应用程序之前不会发现错误。
如何让 TypeScript 在我打开工作区或保存对文件的更改时自动检查所有代码文件中的编译器错误?
我试过在 package.json
中添加 "watch": "tsc --watch"
作为脚本,然后在集成终端窗格中执行 npm run-script watch
,但这有两个问题:
- 错误显示在终端窗格中,但不会填充 VSCode
中的问题窗格
- 我必须手动 运行 它,而不是它在工作区加载时自动启动
有没有更好的解决方案?
顺便说一句,这是与 Show project wide TypeScript problems/errors in webstorm 相同的问题,但是关于 Visual Studio 代码而不是 webstorm。
截至 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"
}
}
]
}
请注意,auto-运行 任务似乎没有默认启用。要选择自动 运行 任务,请按照此处的说明进行操作:
此解决方案改编自下面 @molinx's answer in the GitHub issue linked above, and it was improved thanks to @kumar303 的评论。
自 2020 年 4 月 14 日起 正式发布 VS Code 中有一项实验性功能,可启用项目范围的问题报告。将以下内容添加到您的 settings.json
:
"typescript.tsserver.experimental.enableProjectDiagnostics": true
它仍然是一个实验性功能(经过几年的忽视),因此它可能同时令人难以抗拒和平淡无奇。好消息是它显然也适用于其他语言并且尊重您的配置文件。
观看这个 space。
在我的 create-react-app@2.1.8
TypeScript/React 应用程序中,TS 编译器错误仅显示在我在 VS 代码编辑器中打开的文件的“问题”窗格中。因此,我有时在实际 运行 应用程序之前不会发现错误。
如何让 TypeScript 在我打开工作区或保存对文件的更改时自动检查所有代码文件中的编译器错误?
我试过在 package.json
中添加 "watch": "tsc --watch"
作为脚本,然后在集成终端窗格中执行 npm run-script watch
,但这有两个问题:
- 错误显示在终端窗格中,但不会填充 VSCode 中的问题窗格
- 我必须手动 运行 它,而不是它在工作区加载时自动启动
有没有更好的解决方案?
顺便说一句,这是与 Show project wide TypeScript problems/errors in webstorm 相同的问题,但是关于 Visual Studio 代码而不是 webstorm。
截至 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"
}
}
]
}
请注意,auto-运行 任务似乎没有默认启用。要选择自动 运行 任务,请按照此处的说明进行操作:
此解决方案改编自下面 @molinx's answer in the GitHub issue linked above, and it was improved thanks to @kumar303 的评论。
自 2020 年 4 月 14 日起 正式发布 VS Code 中有一项实验性功能,可启用项目范围的问题报告。将以下内容添加到您的 settings.json
:
"typescript.tsserver.experimental.enableProjectDiagnostics": true
它仍然是一个实验性功能(经过几年的忽视),因此它可能同时令人难以抗拒和平淡无奇。好消息是它显然也适用于其他语言并且尊重您的配置文件。
观看这个 space。