Reputation: 5683

How to setup VSCode to show typescript error inline

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

Upvotes: 46

Answers (9)

Tiago

Reputation: 1991

Cmd + shift + P to open the command input, search for typescript and choose TypeScript: Select TypeScript Version and choose the one in your node_modules (it had VSCode's version by default).

This fixed it for me.

Upvotes: 0

Joe Van Leeuwen

Reputation: 335

In case it helps anyone coming here for the same reason but with a different root cause...

For me, the issue resided with my tsconfig.json where the "files" option was specified, which limited the "files to include in the program".

Upvotes: 0

Jatin Verma

Reputation: 73

VSCode IntelliSense supports Typescript without the need of ANY setup.

Ensure that typescript is globally installed: npm i -g typescript
No VSCode setting needs to be changed.
No tsconfig.json setting required.
Even if u do not create tsconfig.json, VSCode will still catch errors in Typescript.

References:

Upvotes: 0

Minh Tho Nguyen

Reputation: 1

1.Edit in setting.json

"editor.hover.enabled": true

2.Settings > TypeScript › Validate: Enable

Upvotes: -2

ShadowGames

Reputation: 1307

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:

In your settings.json add:

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

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.

Upvotes: 6

JimblyJambles

Reputation: 129

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.

Upvotes: 6