Issue with path generation in Run Build Task for VSCode while running the tsc build command

Currently, I am going through the Typescript tutorial found at https://code.visualstudio.com/docs/languages/typescript.

While attempting to run the build task and selecting "tsc: build", VSCode is encountering an issue:

Executing task: tsc -p c:\work\JavascriptTypescript\test-apr-2018\tsconfig.json <

error TS5058: The specified path does not exist: 'c:workJavascriptTypescripttest-apr-2018tsconfig.json'.
The terminal process terminated with exit code: 1

The error stems from how it's handling the full path of the tsconfig.json file by removing slashes. It's evident that this method will not lead to the correct file.

If I manually input tsc -p tsconfig.json in the command line, everything works as expected.

This seems like a configuration hiccup within VSCode, but being new to this environment, I'm unsure of how to rectify it.

typescriptvisual-studio-code

Answer №1

An issue has been identified (as of 2018-04-20) when using VSCode on Windows with Git Bash as a terminal. More information can be found at https://github.com/Microsoft/vscode/issues/35593.

One workaround is switching to CMD for a terminal. Another option is manually invoking tsc as outlined above.

Answer №2

Make a switch in the shell for tasks to cmd.exe

    "terminal.integrated.automationProfile.windows": {
        "path": "C:\\Windows\\System32\\cmd.exe"
    }

Now you can have bash as your terminal shell while still executing build tasks using cmd.exe

To adjust this setting

  1. access settings editor by pressing CTRL+, or selecting File->Preferences->Settings
  2. type Automation into the search bar
  3. Choose Edit in settings.json https://i.sstatic.net/aDIhq.png

Just so you know
Can a task use a different shell than the one specified for the Integrated Terminal?

Answer №3

One way to address this issue is by setting up an npm script that executes tsc, and then triggering that script in the VSCode launch.json.

package.json:

"scripts": {
    "debug": "tsc --sourcemap"
  },

.vscode/launch.json:

{
      "type": "node",
      "request": "launch",
      "name": "Debugger",
      "program": "${workspaceFolder}/app.ts",
      "preLaunchTask": "npm: debug",
      "outFiles": [
        "${workspaceFolder}/*.js"
      ]
    }

Answer №4

When entering the command: "tsc -p c:\work\JavascriptTypescript\test-apr-2018\tsconfig.json" in gitbash, you will encounter an error. However, if you modify it to "tsc -p c:/work/JavascriptTypescript/test-apr-2018/tsconfig.json" the command will execute successfully.

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

Tips for effectively documenting interface properties within compodoc for Angular 2

Recently, I started using compodoc to document my app and I am facing some challenges in writing clean code while documenting the openWeather API interface. I attempted to use the conventional @property JSDoc marker but it does not seem to work well with ...

angulartypescriptdocumentation-generationcompodoc

Converting an array into an object by using a shared property in each element of the array as the key

I have an item that looks like this: const obj = [ { link: "/home", title: "Home1" }, { link: "/about", title: "About2" }, { link: "/contact", title: "Contact1" } ] as const and I want to p ...

typescriptconditional-types

ANGULAR - Creating Specific Query Parameters When Navigating Backwards

Is there a way to automatically include query parameters when navigating back to the previous page using the browser's default back button? For instance, when calling a customer-hierarchy component view, you can add query parameters like this: <a ...

angulartypescriptangular-routingangular-routerquery-string

What is the most efficient way to retrieve child entity ids in TypeORM without having to fetch all the child entities?

I am working with two models: @Entity('user') class UserModel { @PrimaryColumn({ name: 'id', type: 'varchar', }) id: Ulid = generate() ... @OneToMany(() => CourseModel, (course) => c ...

typescripttypeorm

Angular throws an error when attempting to access a property that is undefined

I created the following angular template: <section class="section"> <div class="container"> <form [formGroup]="testForm"> <div class="columns is-multiline"> <div class="column is-2"> ...

javascriptangulartypescript

Error in TypeScript logEvent for Firebase Analytics

Currently utilizing firebase SDK version 8.0.2 and attempting to record a 'screen_view' event, encountering an error message stating: Error: Argument of type '"screen_view"' is not assignable to parameter of type '" ...

typescriptfirebasefirebase-analytics

Tips for efficiently constructing a Docker container using nodejs and TypeScript

Struggling for the past couple of days to get the project running in production, but it keeps throwing different errors. The most recent one (hopefully the last!) is: > rimraf dist && tsc -p tsconfig.build.json tsc-watch/test/fixtures/failing.t ...

node.jstypescriptdocker

Creating an object key using a passed literal argument in TypeScript

Can the following scenario be achieved? Given an argument, how can we identify the object key and access it? Any potential solutions? async function checkKey(arg:'key1'|'key2'){ // fetchResult returns an object with either {key1:&apo ...

javascripttypescriptobject

Using the useEffect hook with Redux-Toolkit dispatch causes an endless cycle of execution

Issue I am encountering an infinite loop problem when using useMutation from react-query to make post requests, retrieve user information from JSON, and then store it in my redux store using useEffect based on the status provided by the useMutation hook. ...

reactjstypescriptreduxreact-hooksreact-query

TypeScript implementation of a reusable component for useFieldArray in React Hook Form

I'm currently working on a dynamic form component using react-hook-form's useFieldArray hook and facing issues with setting the correct type for field. In order to configure the form, I have defined a type and default values: export type NamesAr ...

reactjstypescripttypescript-genericsreact-hook-form

Obtaining a value from HTML and passing it to another component in Angular

I am facing an issue where I am trying to send a value from a web service to another component. The problem is that the value appears empty in the other component, even though I can see that the value is present when I use console.log() in the current comp ...

javascriptangulartypescript

Typescript offers a feature where we can return the proper type from a generic function that is constrained by a lookup type,

Imagine we have the following function implementation: type Action = 'GREET' |'ASK' function getUnion<T extends Action>(action: T) { switch (action) { case 'GREET': return {hello: &a ...

typescriptgenerics

What is the proper way to implement a function with a value formatter when the column definition is already predefined within quotation marks in AG-Grid?

When working with JSON data that specifies columnDefs and uses valueFormatters as a function, it is essential to correctly format the valueFormatter. For instance, if the JSON data reads valueFormatter: "dateFormatter" instead of valueFormatter: ...

angulartypescriptag-gridag-grid-angular

There was an issue: Control with the name 'name' could not be located

Whenever I submit the form and try to go back, an error pops up saying "ERROR Error: Cannot find control with the name: 'name'". I'm not sure what I might be missing. Do I need to include additional checks? Below is my HTML file: <div ...

angulartypescript

Angular: Clicking on a component triggers the reinitialization of all instances of that particular component

Imagine a page filled with project cards, each equipped with a favorite button. Clicking the button will mark the project as a favorite and change the icon accordingly. The issue arises when clicking on the favorite button causes all project cards to rese ...

javascriptangulartypescript

Invoke the Organize Imports function using code and then proceed to save the updated file automatically

My current task involves: async function doItAll(ownEdits: Array<TextEdit>) { const editor: TextEditor = await getEditor(); applyOwnChanges(editor, ownEdits); await commands.executeCommand('editor.action.organizeImports', ...

typescriptvisual-studio-codepluginsasync-awaitvscode-extensions

Tips for utilizing programmatic object keys as TypeScript type?

Consider the object shown below: const obj = { foo: "bar", hello: "world", } and this function for processing objects: const process = (obj) => { const processedObj = {} for (const key in obj) { processedObj[`--${key}`] ...

typescript

An error occurred within Angular 8 while attempting an HTTP post request, as it was unable to access the 'message' property of

After conducting a search on Stack Overflow, I found a similar question that relates to my issue. Login OTP Component: onSubmitValidOTP() { this.authenticationService.ValidOTP(this.fo.OtpControl.value, username, role) .pipe(first ...

angulartypescriptasp.net-corerxjsangular8

"Code snippets customized for React are not functioning properly in the javascriptreact.json file within Visual Studio Code

I'm looking to incorporate some customized React.js code snippets into my Visual Studio Code setup. I am aware of the two files in VSCode that handle this - javascript.json and javascriptreact.json. Although the snippets work well in javascript.json, ...

javascriptjsonreactjsvisual-studio-codecode-snippets

Angular 14 introduces a new feature that automatically joins open SVG paths when dynamically rendered from a data object

I developed an application to convert SVG code into a JSON object that can be stored in a database. Another app was created to dynamically display the rendered result on a webpage. The rendering output appears as shown in this image: https://i.sstatic.net/ ...

angulartypescriptsvg