Auto-Build TypeScript Project in Visual Studios Code 2015

Question

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.

Community · Accepted Answer · 2017-05-23 12:32:49Z

4

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.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jun 2, 2015 at 21:40

zlumer

7,0521 gold badge27 silver badges25 bronze badges

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

5 Comments

PhoenixLament Over a year ago

so there is no way to do it automatically?

zlumer Over a year ago

After you build it once (Ctrl+Shift+B), it will watch and re-compile all files on save automatically. You can always Terminate running task or close the project to stop the compiler.

PhoenixLament Over a year ago

I get the following error: tsc.js(25345, 17) JavaScript runtime error: Object doesn't support property or method 'watchFile'

zlumer Over a year ago

Probably you use TypeScript compiler from Visual Studio Tools and not the NPM one (it's possible only on Windows). Check your compiler: where tsc. If the one used is not in AppData\Roaming\npm folder (probably under Program Files), you should remove it and install from NPM: npm install -g typescript.

kamranicus Over a year ago

building on @zlumer, you will also need to remove the Program Files (x86)\Microsoft SDKs\TypeScript path from your system PATH environment variable, so it uses the one from npm. You can check which one is being used in Powershell: get-command tsc

Collectives™ on Stack Overflow

Auto-Build TypeScript Project in Visual Studios Code 2015

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related