How to compile a TypeScript file from new Visual Studio Code on Mac OS X
Microsoft just released new Visual Studio Code for the Mac OS X platform. It supports TypeScript as you can get autocomplete and error reporting for TypeScript code.
My question is, how can we compile a TypeScript file (to generate the corresponding JavaScript file) from Visual Studio Code? I created a default tsconfig.json file as recommended with only {} and tried to call shift + B, but this does not generate an updated JavaScript file.
source to share
You will need to create a task for this.
I apologize in advance if I get short cuts as I am sitting using a different operating system. For those using Windows, this will CTRL
- I think the OSX version means use CMD
instead.
If you press CTRL
+ SHIFT
+ P
, you should get an action menu that allows you to search for all commands.
Enter Configure Task Runner
. If you don't already have it, this will create a tasks.json file in the settings folder for you. Otherwise it will open the existing tasks.json file.
You can uncomment the TypeScript task that is inlined - it looks like this (my main file is app.ts, by default in this file 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 complete this task on demand using CTRL
+ SHIFT
+ B
.
If you have multiple tasks assigned, 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.
Your hands don't have to leave the keyboard for this!
Finally ... if you're still not doing anything, check this icon at the bottom of the window as you may have a compiler error ... (the icons below show one error - click on it in your editor for more details ).
source to share
I faced the same problem with the tsc transpiler (since it compiles the source code from one format to another) without generating the .js file.
Workaround:
Try the following command in Windows Command Prompt (cmd.exe - Run as Administrator):
tsc test.ts
Make sure you are in the correct folder path or provide an absolute path for the .ts file.
Hopefully it should generate a ".js" file in the same folder as the ".ts" file.
Now when the .js file is generated, to avoid running the above command every time you make changes, you can run the auto-expanding view command in tsc.
To automatically transpile the ".ts" file, try the following command:
tsc test.ts --watch
Now if you go back to your ".ts" file and make changes and click "Save", it will automatically transpile and update your ".js" file immediately. Remember to run the command line.
I have yet to investigate the reason why the tsc transpiler does not work with Visual Studio Code Ctrl + Shift + B
keypress, but my best guess would be the problem with the tsc version used by the Visual Studio Code installation or environment Certain PATH or npm variables were setting a different tsc version. The reasons can be brief.
Output:
But for those looking to get things done quickly, I hope this workaround helps.
source to share
You need a tsconfig.json file to define all the 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 "args" line with $ {file} to compile an open 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 information: http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx
source to share
I found a solution that worked on Mac. In the args line, I put the fully qualified pathname for the TypeScript file that I would like to compile. Then running the build using CMD + SHIFT + B successfully ran the tsc compiler and successfully generated the corresponding JavaScript file.
source to share