如何设置VSCode以内联显示TypeScript错误

Question

我正在尝试将一个ES6项目迁移到typescript。这是我第一次在NodeJS中编写typescript模块。

到目前为止，在Angular-CLI中似乎工作得更好。

我已经使用命令行tsc进行了编译，但我不确定如何在代码编辑器中显示错误和智能感知？

在一个目录中，我有下面展示的两个文件。当它进行编译时，按预期会抛出一个编译错误：提供的参数与任何调用目标的签名都不匹配。这很好。

但是，即使我故意制造语法错误（比如删掉括号）或类型错误，VSCode也不会在编辑器中显示任何错误。如何让VSCode在.ts文件中显示内联语法或编译器错误？

validation-error.ts

/**
 * Wrapper for a particular validation error.
 */
export class ValidationError extends Error {
  private type: string;

  constructor(error: any) {
    super(error);
    Error.captureStackTrace(this, this.constructor);
    this.message = error.message;
    this.type = 'ValidationError';
  }
}

接下来我尝试编写一个简单的规范以测试工作流程：

validation-error.spec.ts

import { ValidationError } from './validation-error';
import * as should from 'should';

describe('Validation Error', () => {
  it('should create a new instance', () => {
    const instance = new ValidationError();
    should.exist(instance);
  });
});

这里有修改：

我还在继续努力 - 我已经在tasks.json中设置了tsc自动运行的任务：

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "taskName": "tsc",
  "command": "tsc",
  "isShellCommand": true,
  "args": ["-w", "-p", "."],
  "problemMatcher": "$tsc-watch",
  "echoCommand": true
}

我怀疑如果使用$tsc-watch正确报告错误，错误可能也会显示在编辑器中。当我运行任务时，输出如下：

running command$ tsc -w -p .
src/hello.ts(15,1): error TS2346: Supplied parameters do not match any signature of call target.
4:24:40 PM - Compilation complete. Watching for file changes.

但是在“问题”视图中没有报告任何问题 - 尽管显然存在编译器问题。

从文档的这个页面获取了$tsc-watch设置：https://code.visualstudio.com/docs/editor/tasks

- Richard G

---

你的项目（打开的目录）中是否有 tsconfig.json 文件？ - known-as-bmf

我已经有了。 - Richard G

Answer 1

对我而言，问题是通过在VSCode设置中将TypeScript验证设置为true来解决的：

"typescript.validate.enable": true,

我曾经在工作区设置中关闭了这个功能，然后就忘记了！

请务必仔细检查您的用户设置、工作区设置或文件夹设置中是否将此设置为false。

例如，我试图使规则检查未定义变量，但只要将验证设置为true，问题就立即解决了。

- protoEvangelion

---

我曾经在工作区设置中关闭了这个选项，然后就忘记了！哈哈哈，天啊...我想要回我的五个小时。谢谢！！！ - Eric Guan

Answer 2

其他答案（大多数在2020年之前）对我没有用。

根据微软VS Code存储库中的功能请求，请执行以下步骤：

1. 在您的settings.json中添加：

"typescript.validate.enable": true,
"typescript.tsserver.experimental.enableProjectDiagnostics": true,

在您的tsconfig.json中添加以下内容：

"include": [
    "src",
    "global.d.ts",
  ],
"exclude": [
    "node_modules",
    "plugins",
    "public"
  ]

请稍等片刻（或重新启动 VS Code），以便在打开的文件中看到显示的错误列表，并添加到问题面板中。

- ShadowGames

Answer 3

我在这个问题上遇到了困境，通过在.vscode目录下的本地settings.json文件中添加"typescript.validate.enable": true来解决了它。我的设置告诉我全局启用了VS Code的TypeScript验证器，但是直到我添加了本地设置文件，我才能看到内联的TS错误。

- JimblyJambles

Answer 4

即使没有安装TypeScript本地或全局，以下设置也可以提供内联错误。

C:/temp
  index.ts
  tsconfig.json

index.ts

let x: number;
x = "foo";

tsconfig.json

{ }

下面是一张屏幕截图，显示了x的内联错误。

请尝试该设置并报告发生了什么情况。

- Shaun Luttin

---

有趣。我想知道为什么我的代码没有运行，我从某个地方复制了tsconfig，可能是版本问题或其他原因。不过昨天我终于用 tsc 问题解决器解决了这个问题 - 至少我认为是这样。似乎是一个 bug，在第一次编译时它没有在 VS Code 中列出错误，但如果我在监视模式下更改文件，那么错误会按预期显示出来。所以很可能只是我设置中某些组合的错误。 - Richard G

一个空的tsconfig.json？我怀疑这不是一个可行的解决方案。 - ShadowGames

Answer 5

我刚刚关闭并重新启动了VS Code，它开始像以前一样显示TypeScript错误。

如果这不起作用，我建议重新启动您的计算机系统。

- Jamshed

---

您还可以发出“重启 TS 服务器”命令，只需重新启动显示出错的部分即可。 - Lucas

Answer 6

1. 在 setting.json 中进行编辑。

"editor.hover.enabled": true

2. 设置 > TypeScript › 验证：启用

- Minh Tho Nguyen