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

admin管理员组

文章数量:1345473

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

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

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

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

• javascript
• macos
• typescript
• visual-studio-code

Share Improve this question Follow edited May 1, 2015 at 12:13 jessehouwing 115k2323 gold badges279279 silver badges377377 bronze badges asked Apr 30, 2015 at 17:55 Richard FuhrRichard Fuhr 3,57544 gold badges2424 silver badges1515 bronze badges 2

• You just can't see it in solution explorer, or it's not producing at all? – Maciej Kwas Commented Apr 30, 2015 at 17:59
• 1 You can check my answer here stackoverflow./questions/30050262/… – khagesh Commented Jun 3, 2015 at 12:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 mands.

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 unment 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 piler (tsc) and 
// Compiles a HelloWorld.ts program
{
    "version": "0.1.0",

    // The mand is tsc.
    "mand": "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": {
        "mand": "tsc.exe"
    },

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

    // use the standard tsc problem matcher to find pile 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 piler error... (the icons below are showing one error - click on it in your editor for details).

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

Workaround:

Try executing the following mand 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 mand everytime you make a change, you can execute an auto-transpilation watch mand in tsc.

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

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 mand 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.

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

tsconfig.json

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

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

{
    "version": "0.1.0",

    // The mand is tsc.
    "mand": "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": {
        "mand": "tsc.exe"
    },

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

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

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

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 pile. Then, launching a build using CMD + SHIFT + B did successfully run the tsc piler and did successfully generate the corresponding JavaScript file.

本文标签：