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

Question

I'm trying to migrate an ES6 project to typescript. This is my first attempt at writing a typescript module in NodeJS.

It seems to work better in Angular-CLI so far.

I've got it compiling using command line tsc , but I'm not sure how to display errors and intellisense in the code editor?

In a directory I have the two files shown below. When it compiles it, as expected throws a compile error: Supplied parameters do not match any signature of cal l target. . This is fine.

But VSCode is not showing any errors in the editor, even if I make a deliberate syntax error like taking out a bracket, or type errors like this one. How do I get VSCode to show inline syntax or compiler errors in the editor for.ts files?

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';
  }
}

Then I'm trying to write simple spec to test out the workflow:

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);
  });
});

Edited Here:

I'm still plugging away at this - I've setup tsc to run automatically with this job in 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
}

I suspect that if the errors were reported properly using $tsc-watch , the error would probably also show up in the editor. When I run the task I get output like:

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.

But there are no problems reported in the Problems view - even though clearly there's a compiler issue.

Got the $tsc-watch setting from this page of the docs: https://code.visualstudio.com/docs/editor/tasks

Answer 1

For me the problem was resolved by setting Typescript validation to true in VSCode settings:

"typescript.validate.enable": true,

I had turned this off in my workspace settings in the past and forgot!

So make sure to double check that this setting is not set to false in your user settings, workspace settings or folder settings .

For instance the rule I was trying to get work was checking for undefined variables which was immediately fixed when I set validate to true.

Answer 2

Even without having installed TypeScript locally or globally, the following setup provides inline errors.

C:/temp
  index.ts
  tsconfig.json

index.ts

let x: number;
x = "foo";

tsconfig.json

{ }

Here is a screenshot that shows the inline error in x .

Please try that setup and report back on what happens.

Answer 3

I just closed & restarted my VS Code and it started showing typescript errors like before.

If this doesn't work, I'd suggest restarting your computer system.

Answer 4

I ran aground with this issue, managed to solve it by adding "typescript.validate.enable": true to my local settings.json file in the .vscode directory. My settings tell me that the typescript validator is enabled for VS code globally, but I wasn't able to see inline TS errors until I added the local settings file.

Answer 5

The other answers (most before year 2020) did not work for me.

According to this feature request in Microsoft's VS Code repository, do the following steps:

1. In your settings.json add:

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

2. In your tsconfig.json add:

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

Wait a while (or restart VS Code) in order to see a list of errors shown in the open files and added in the problems panel.