CODEWITHSUNDEEP
visual-studiovisual-studio-2013typescript
PhoenixLament
PhoenixLament

Reputation: 741

Auto-Build TypeScript Project in Visual Studios Code 2015

I am just starting out in Type Script, and am using the new Visual Studios Code IDE. I am currently facing an issue where I can either use the visual studios type script plug-in, and run the javascript files using node. However it won't build the js file automatically when the ts file is saved. So i uninstalled the plugin, and installed typescript according to this video:

https://egghead.io/lessons/typescript-typescript-up-and-running-in-seconds

Now I can have one ts file be built by using the --watch option, but how would I accomplish auto building multiple .ts files when I move on to more complex projects that will require it?

Also is this the best way to write TypeScript using Visual Studios Code as my IDE? Currently I'm not a huge fan of this set up because I have to have a terminal open to watch a single ts file (which can mean a bunch of windows are required to watch each file, and also a terminal open to run the program.

Upvotes: 2

Views: 1373

Answers (1)

zlumer
zlumer

Reputation: 7004

I'm not sure whether you use Visual Studio Code or Visual Studio 2013. I assume it's VS Code (if it's not, consider switching. VS Code is really good!).

Now I'll quote myself from another answer.

You can do this with Build commands:

Create a simple tsconfig.json with watch = true (this will instruct compiler to watch all compiled files):

{
    "compilerOptions": {
        "target": "ES5",
        "out": "js/script.js",
        "watch": true
    }
}

Note that files array is omitted, by default all *.ts files in all subdirectories will be compiled.

Configure your task (Ctrl+Shift+P -> Configure Task Runner):

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"
}

Now press Ctrl+Shift+B to build the project. You will see compiler output in the output window (Ctrl+Shift+O).

See one of my projects for more info: tsconfig.json, .settings/tasks.json.

Upvotes: 4

Related Questions