When using $tsc-watch to compile TypeScript in Visual Studio Code, the problem matcher may sometimes produce incorrect file paths, leading to issues with error highlighting and navigation. To fix this problem, you can use the problemMatcher.background option in your tasks.json file.

Here's how you can adjust your tasks.json to fix the incorrect path issue when compiling with $tsc-watch:

  1. Open the tasks.json file for your TypeScript build task in Visual Studio Code. This file can be found in the .vscode directory at the root of your project.

  2. Locate the configuration for your TypeScript build task. It should look something like this:

{ "version": "2.0.0", "tasks": [ { "label": "tsc-watch", "command": "npm", "type": "shell", "args": ["run", "tsc-watch"], "problemMatcher": [] } ] }
  1. Add the problemMatcher.background option to the task configuration. Set its value to true to indicate that the problem matcher should run in the background, which allows it to correctly map the error paths:
{ "version": "2.0.0", "tasks": [ { "label": "tsc-watch", "command": "npm", "type": "shell", "args": ["run", "tsc-watch"], "problemMatcher": { "background": { "activeOnStart": true, "beginsPattern": { "regexp": "^\\s*(?:Parsing '.*'...|" }, "endsPattern": { "regexp": "^(?:Watching for file changes.|\\s*Found [0-9]+ errors\\. Watching for file changes\\.)" } } } } ] }
  1. Save the tasks.json file.

The problemMatcher.background option instructs Visual Studio Code to run the problem matcher in the background while the task is running. This helps to correctly map the error paths produced by $tsc-watch, fixing any incorrect path issues.

After making these changes, when you run the TypeScript build task with $tsc-watch, the error highlighting and navigation in Visual Studio Code should work correctly, and the error paths should be displayed with the correct file paths.

Have questions or queries?
Get in Touch