How to compile a TypeScript file from within the new Visual Studio Code on Mac OS X

Question

Microsoft has just released the new Visual Studio Code for the Mac OS X platform. It supports TypeScript, in that one can get autocomplete and error reporting for TypeScript code.

My question: How can we compile a TypeScript file (to produce the corresponding JavaScript file) from within Visual Studio Code? I have created a default tsconfig.json file as recommended, with just {}, and have tried invoking shift+command+B but this does not produce an updated JavaScript file.

You just can't see it in solution explorer, or it's not producing at all? — Maciej Kwas, Apr 30 '15 at 17:59
You can check my answer here http://stackoverflow.com/questions/30050262/visual-studio-code-compile-typescript-module/30619684#30619684 — khagesh, Jun 03 '15 at 12:43

Fenton · Answer 1 · 2015-05-01T08:33:39.547

You will need to set up a task to do this.

I apologise in advance if I get the short-cuts a bit wrong as I am sat using a different operating system. For anyone using Windows, it will be CTRL - I think the OSX version just means using CMD instead.

If you press CTRL + SHIFT + P, you should get an action menu appear that allows you to search all commands.

Type Configure Task Runner. If you don't already have one, this will create a tasks.json file in a settings folder for you. Otherwise, it will open the existing tasks.json file.

You can uncomment the TypeScript task that is built in - it looks like this (my main file is app.ts, the default in this file is HelloWorld.ts):

// A task runner that calls the Typescipt compiler (tsc) and 
// Compiles a HelloWorld.ts program
{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["app.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

You can then this task on demand using CTRL + SHIFT + B.

If you have multiple tasks defined, you can use CTRL + E and type task (note the space after "task") and it will give you a list of all tasks for you to choose from.

Your hands don't need to leave the keyboard for any of this!

Lastly... if you are still getting nothing, check this icon at the bottom of the window as you may have a compiler error... (the icons below are showing one error - click on it in your editor for details).

Building / Errors / Warnings

I have a tasks.json file as described above in Steve Fenton's post (except I have coded the name of my TypeScript file in place of app.ts). When I launch it via CMD + SHIFT + B I see this vertical line spin around, indicating that some activity is taking place, but no new JavaScript file output is generated that corresponds to my most recent TypeScript code. — Richard Fuhr, May 01 '15 at 01:38
@RichardFuhr can you share your files with me so I can see if I can recreate the problem. I mainly need your tsconfig.json and your tasks.json file. — Fenton, May 01 '15 at 09:56

score 2 · Answer 2 · answered Sep 15 '15 at 20:31

I had faced the same issue with the tsc transpiler (since it compiles a source code from one format to another) not generating the ".js" file.

Workaround:

Try executing the following command in your Windows Command Prompt (cmd.exe - Run as Administrator):

tsc test.ts

Ensure that you are in the right folder path or else provide the absolute path for the ".ts" file

Hopefully, it should generate the ".js" file in the same folder as the ".ts" file.

Now that the ".js" file is generated, inorder to avoid executing the above command everytime you make a change, you can execute an auto-transpilation watch command in tsc.

To perform an auto-transpilation for the ".ts" file, try running the following command:

tsc test.ts --watch

Now if you go back to your ".ts" file and make changes and hit Save, it will perform an auto-transpilation and update your ".js" file instantly. Remember to keep the command prompt running.

I am yet to explore the reason as to why the tsc transpiler is not working on Visual Studio Code's Ctrl + Shift + B keypress, but my best guess would be an issue with the tsc version used by my Visual Studio Code installation or the environment PATH variables defined or npm installed a different tsc version.. reasons could be multiple.

Output:

But for those who want to get things done quickly, i hope this workaround helps.

score 1 · Answer 3 · answered May 14 '15 at 10:09

You need a tsconfig.json file to define all options for the TypeScript Compiler, and a tasks.json file to set the compiler options.

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "amd",
        "sourceMap": false
    }
}

tasks.json ... See the line "args" with ${file} to compile the opened file.

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["${file}"],

    // Use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

More info: http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx

score 0 · Answer 4 · answered May 02 '15 at 02:05

I found a solution that worked on the Mac. In the args line, I put the full path name for the TypeScript file that I wanted to compile. Then, launching a build using CMD + SHIFT + B did successfully run the tsc compiler and did successfully generate the corresponding JavaScript file.

How to compile a TypeScript file from within the new Visual Studio Code on Mac OS X

4 Answers4