VS代码：在保存文件上观看打字稿

Question

In Visual Studio Code, I have the following code in code in tsconfig.json

{
    "version": "1.6.0",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "watch": true,
        "experimentalAsyncFunctions": true,
        "isolatedModules": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true
    },
    ...
}

As you can see, the watch option is at true. Well, look like this isn't enough to compile a .ts file to .js just like the atom-typescript does. Basically, the new compiled .js should be in the same directory of the .ts file when saving the .ts.

Also, I'd like avoid using gulp in my root project, since I already use a gulpfile.coffee for other means. Anyone has a clue?

Answer 1

With the most recent versions of VS Code 1.7.2 and Typescript 2.0.10 you just need to have the following code in .vscode/tasks.json

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

The watch option in tsconfig.json is not needed.

Answer 2

you have to define a tasks.json in the .vscode folder looking something like this:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["HelloWorld.ts"],
    "problemMatcher": "$tsc"
}

you can find more information about it here: https://code.visualstudio.com/Docs/languages/typescript