How to Run the TypeScript build in Visual Studio code?

Question

I am following this document to run a hello-world typescript program in Visual Studio Code Editor.

I have done following steps

Installed the TypeScript compiler tsc --version shows Version 4.2.4
Transpiled TypeScript into JavaScript

When i try to run the type script build, by Executing Run Build Task (⇧⌘B) I DONOT see any task to build in that.

So I am stuck at this point. Can some one tell me if we need to manually create this task? OR is there a pre-requisite that I am missing?

Thanks!

Have you tried restarting Visual Studio Code

MrCodingB
– MrCodingB

2021-05-16 12:41:50 +00:00
Commented May 16, 2021 at 12:41 — MrCodingB
– MrCodingB, Commented May 16, 2021 at 12:41
@MrCodingB Yes, I did restart, but no relief

Rohit
– Rohit

2021-05-16 12:50:25 +00:00
Commented May 16, 2021 at 12:50 — Rohit
– Rohit, Commented May 16, 2021 at 12:50

MrCodingB · Accepted Answer · 2021-05-16 15:59:30Z

3

Try restarting VSCode. If that doesn't work try configuring the task via:

Command palette (Ctrl+Shift+P / F1) > Tasks: Configure default build task

If that doesn't work here are the default task configurations:

{
    "version": "2.0.0",
    "tasks": [
        {  // For build
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": "build",
            "label": "tsc: build - tsconfig.json"
        },
        {  // For watch
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": "build",
            "label": "tsc: watch - tsconfig.json"
        },
        { // If both of the above don't work you could create an npm script and run it via this task
            "type": "npm",
            "script": "build", // This should be the name of your script
            "problemMatcher": [],
            "label": "npm: build typescript"
        }
    ]
}

For these to be detected create a .vscode Folder at the root of your workspace and create a file tasks.json in it. If you put the above json in it, VSCode will find your tasks.

edited May 16, 2021 at 15:59

answered May 16, 2021 at 12:43

MrCodingB

2,3241 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rohit Over a year ago

Thanks, can you please also explain a bit where and how to use default task configurations.

MrCodingB Over a year ago

Added a little explanation to my answer

Rohit Over a year ago

Thanks so much. A minor suggestion Please also open the command to open the command pallet. Ctrl+Shift+P will bring you directly to the editor commands. I just ran the command you mentioned and was able to build. Thanks!

Suncat2000 Over a year ago

Those first two tasks only work right (on WIndows) if VS Code is using the Windows command line interpreter as the shell. The tsc.js script detects the OS it's running on and sets the path separator to match it. If you are using a Unix shell, like bash, the path characters disappear into the command and won't find the command being executed.

Collectives™ on Stack Overflow

How to Run the TypeScript build in Visual Studio code?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related