如何设置 VSCode 以内联显示打字稿错误

Posted 2023-03-13

技术标签:

【中文标题】如何设置 VSCode 以内联显示打字稿错误【英文标题】：How to setup VSCode to show typescript error inline 【发布时间】：2017-10-10 01:35:54 【问题描述】：

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

到目前为止，它似乎在 Angular-CLI 中运行得更好。

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

在一个目录中，我有如下所示的两个文件。当它编译它时，正如预期的那样引发编译错误：Supplied parameters do not match any signature of cal l target.。这可以。

但是 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);
  );
);

在此编辑：

我仍在努力解决这个问题 - 我已将 tsc 设置为在 tasks.json 中自动运行此作业：


  // 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.

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

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

【问题讨论】：

你的项目中有tsconfig.json文件吗（打开的目录）？我已经有了。 【参考方案1】：

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

C:/temp
  index.ts
  tsconfig.json

index.ts

let x: number;
x = "foo";

tsconfig.json

这是显示x 中的内联错误的屏幕截图。

请尝试该设置并报告发生的情况。

【讨论】：

有趣。我想知道为什么我的不工作，我从某个地方复制了tsconfig，所以也许有一些版本问题或什么的。无论如何，我最终确实在昨天使用 tsc 问题解决程序让它工作了——至少我认为这就是它工作的原因。这似乎是一个错误，在第一次编译时它没有在 VS Code 中列出错误，但是如果我在监视模式下更改了文件，那么错误会按预期显示。因此，这可能只是我的设置中某些事物组合的错误。【参考方案2】：

对我来说，通过在 VSCode 设置中将 Typescript 验证 设置为 true 解决了问题：