Fixing a wrong path in the problem matcher of vscode while compiling using $tsc-watch: A step-by-step

  • My project workspace directory can be found at C:\salix\fantasy.
  • The TypeScript configuration file is located at C:\salix\fantasy\tsconfig.json

Despite my efforts, I'm struggling to have the problem matcher for my project direct to the right location. The TypeScript compiler is displaying error paths relative to the root of the drive, causing issues with vscode treating them as if they are relative to the workspace folder. Consequently, clicking on any problem results in a "file not found" error because of paths like this:

https://i.sstatic.net/3VKSI.png

This is my tsconfig.json file placed in the root of the workspace:

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "strictNullChecks": true,
    "exactOptionalPropertyTypes": true,
    "sourceMap": true,
    "moduleResolution": "Node",
    "removeComments": true,
    "outDir": "dist"
  },
  "include": [
    "source/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "**/node_modules/*",
    "source/shared/libraries/*"
  ]
}

This is my tasks.json file:

{
    "version": "2.0.0",
    "tasks": [
    {
      "label": "Server",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": "$tsc-watch",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}
  • I've attempted various options for the "cwd" setting without success.
  • I've experimented with changing the "problemMatcher" using 
    "fileLocation": "absolute"
    and 
    "fileLocation": "relative"
    , but neither fixed the issue.
  • I've manually adjusted root and source paths in tsconfig.json, yet TypeScript continues to report errors with paths including salix/fantasy/.
salix/fantasy/source/client/dom/h.dynamic.ts:66:44 - error TS2345: Argument of type '{ data: (writer: Writer<any, any>) => Lens<any, any>; changes: Stream<unknown[]>; invalidations: Stream<unknown[]>; sync(origin: TimelineOrigin, dtime: number, dpos: number, client: CursorClient<...>): JobInterface; }' is not assignable to parameter of type 'ConnectionDriver<any>'.

How can I align vscode and the TypeScript compiler on the root path or prohibit the inclusion of salix/fantasy/ in error paths?

EDIT:

After conducting manual compilation through the command line, it's evident that TypeScript correctly reports paths. This indicates an issue where vscode supplies the incorrect root path to the TypeScript compiler. To address this, I modified my task configuration to:

{
    "version": "2.0.0",
    "tasks": [
    {
      "label": "Server",
      "type": "shell",
      "problemMatcher": "$tsc-watch",
      "command": "cd ${workspaceFolder}; tsc -w",
      "isBackground": true,
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

This solution works, though I'm still keen on understanding why the standard "typescript" task type doesn't utilize the correct file location.

typescriptvisual-studio-codevscode-problem-matcher

Answer №1

I was able to resolve this issue by adjusting the Problem Matcher settings to specify the correct file location. While my setup may be slightly different, the underlying idea is still relevant. It might be worth a try to see if it works for you as well.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc",
            "type": "shell",
            "command": "npx",
            "args": ["tsc", "--noEmit"],
            "presentation": {
                "reveal": "never",
                "echo": false,
                "focus": false,
                "panel": "dedicated"
            },
            "problemMatcher": {
                "base": "$tsc-watch",
                "fileLocation": ["relative", "${workspaceFolder}/../MY_PROJECT_DIR"],
            },
        },
    ],
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing TypeScript to struggle with verifying the return type of a function?

I am facing an issue with a function that is supposed to return NetworkState. However, despite the code clearly showing that the function does not return the correct type in most cases, TypeScript does not flag any errors. Can someone point out what I migh ...

typescript

Creating an array with varying types for the first element and remaining elements

Trying to properly define an array structure like this: type HeadItem = { type: "Head" } type RestItem = { type: "Rest" } const myArray = [{ type: "Head" }, { type: "Rest" }, { type: "Rest" }] The number of rest elements can vary, but the first element ...

typescripttypes

I need a way to call a function in my Typescript code that will update the total value

I am trying to update my total automatically when the quantity or price changes, but so far nothing is happening. The products in question are as follows: this.products = this.ps.getProduct(); this.form= this.fb.group({ 'total': ...

angularformstypescriptcalculator

The request body doesn't meet the interface requirements, but it does not trigger an error response

I created a specific interface called NewTransactionPayload to ensure that only objects of this type are accepted in the request body. Strangely, TypeScript does not show any errors when I host the application. Why is that? // Sample interfaces interface ...

typescriptexpress

Is there a way to compile Node's global modules and objects using TypeScript while having the checkJs option enabled?

By including "checkJs": true in my tsconfig.json file, Node's global paths and objects are marked as "not found". For example, if I were to write: import path from "path"; const p = path.resolve(__dirname, 'dist/js') The TypeScript co ...

node.jstypescripttypescript-typings

Setting the paths property in a project with multiple tsconfig.json files: a step-by-step guide

My file structure is organized as follows: |__ app1/ | |__ tsconfig.json |__ utilities/ | |__ files.ts |__ base-tsconfig.json I have defined the paths property in base-tsconfig.json like this: "compilerOptions": { "baseUrl": ".", "pa ...

typescripttsconfig

Modify the ShortDate formatting from "2020/06/01" to "2020-06-01"

I am looking to modify the shortDate format in my template file. Currently, when I try to change it to use "-", it still displays the date with "/". What I actually want is for the output to be formatted as yyyy-MM-dd. <ngx-datatable-column name="C ...

angulartypescript

Highlighting the home page in the navigation menu even when on a subroute such as blog/post in the next.js framework

After creating a navigation component in Next JS and framer-motion to emphasize the current page, I encountered an issue. The problem arises when navigating to a sub route like 'localhost:3000/blog/post', where the home tab remains highlighted i ...

javascriptreactjstypescriptnext.jsframer-motion

What is the error message "Cannot assign type 'IArguments' to argument"?

Currently employing a workaround that is unfortunately necessary. I have to suppress specific console errors that are essentially harmless. export const removeConsoleErrors = () => { const cloneConsoleError = console.error; const suppressedWarnings ...

typescript

simulate express-jwt middleware functions for secure routes

I am currently facing an issue with my code snippet, which looks like this: import app from '../src/app'; beforeAll(() => jest.mock('../src/middleware/auth', () => (req: Request, res: Response, next: NextFunction) => { ...

typescriptexpressauth0express-jwt

My router-outlet is malfunctioning when trying to display my component

I am currently diving into learning Angular 2 in order to revamp my personal website. However, I've encountered an issue where my application fails to load the component when I navigate to the appropriate route by clicking on the navigation bar. Insi ...

javascriptangulartypescriptnpm

Ways to turn off a TypeScript error across the entire project

Due to an unresolved TypeScript bug causing a false positive, I am looking to disable a specific TypeScript error for my entire project. How can this be achieved? The requirements are: Disabling only one type of error Not limited to a single line or file ...

typescripttsconfig

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was

I encountered an issue while setting a value in the constructor of my page's constructor class. I made a call to the provider to fetch data. Within the service call, I was able to retrieve the data successfully. However, when I tried to access my vari ...

angulartypescriptionic2ionic3

What is the process for having "export default" convert to "module.exports" during compilation?

In my TypeScript project set to compile to CommonJS, using export default results in it compiling into exports.default instead of module.exports. I am creating an NPM package and need this issue resolved. How can I fix this? I have the tsconfig.json file ...

node.jstypescriptnode-modules

What is the process of creating a for loop in FindById and then sending a response with Mongoose?

Is there a way to get all the data in one go after the for loop is completed and store it in the database? The code currently receives user object id values through req.body. If the server receives 3 id values, it should respond with 3 sets of data to th ...

node.jsangulartypescriptmongooseserver

Can Typescript restrict a value to only exist within a specified set of key names within the same object?

I am completely new to Typescript and I am fascinated by the way it can check types. One thing I would like to know is if Typescript can be used to verify at compile time whether a value's domain falls within a predefined set of key names that are de ...

typescript

Guide to asynchronously loading images with Bearer Authorization in Angular 2 using NPM

I am in search of a recent solution that utilizes Angular2 for my image list. In the template, I have the following: <div *ngFor="let myImg of myImages"> <img src="{{myImg}}" /> </div> The images are stored as an array w ...

angulartypescriptnpmbearer-token

Integration of Mocha with WebStorm

WebStorm offers a useful feature that adds a small arrow next to describe() and it() keywords when writing tests with Mocha, allowing for easy manual execution. However, there is a challenge: I require additional setup before each test, leading me to use ...

typescriptidemocha.jswebstorm

Tips for troubleshooting a TypeScript create-react-app in Visual Studio Code

Instructions to replicate the issue: Place a breakpoint in any .tsx file execute my npm script "start": "react-scripts start", commence debugging with F5 or by choosing a configuration from the Run and Debug window in vscode. ...

typescriptvisual-studio-codewebpackcreate-react-app

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

htmlangulartypescriptangular-structural-directive