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
:
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.Locate the configuration for your TypeScript build task. It should look something like this:
json{
"version": "2.0.0",
"tasks": [
{
"label": "tsc-watch",
"command": "npm",
"type": "shell",
"args": ["run", "tsc-watch"],
"problemMatcher": []
}
]
}
- Add the
problemMatcher.background
option to the task configuration. Set its value totrue
to indicate that the problem matcher should run in the background, which allows it to correctly map the error paths:
json{
"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\\.)" }
}
}
}
]
}
- 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.