Visual studio code - Compile only the file that is saved or changed

You surely have a build task which is running the TypeScript compiler, by running this command:

tsc

Hopefully you're using a tsconfig.json to configure the compilation.

That being the case, you can use the following command to engage the TypeScript compiler in a "watch" mode, also known as "compile-on-save":

tsc -w

This will start a process which will continuously watch your TypeScript files and compile only that which is necessary ("incremental compilation").

There are a few gulp plugins that target incrementally compiling TypeScript code:

• https://www.npmjs.com/package/gulp-typescript
• https://github.com/jrieken/gulp-tsb

We use gulp-tsb in the VSCode codebase and it performs very well

I was willing to share what is working for me in combination with VScode. Since the question is in the context of VScode.

Using the following tsconfig.json:

{
// This is the basic tsconfig recommended by vscode team for debugging.
// Info at: https://code.visualstudio.com/docs/typescript/typescript-tutorial
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "out",
        "sourceMap": true
    }
}

Using the following launch.json (which will lunch from the file we are editing): (If needed the "program" attribute can be changed to the desired file if wanted so it can launch always from that desired file instead of the one we are editing).

{
// This is de default debugging launcher created by vscode when having 
// a tsconfig.json and a .ts file to debug.
//
// Comments are provided to inform of attributes additions, deletions, or changes
"version": "0.2.0",
"configurations": [
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "outFiles": [
            "${workspaceFolder}/out/**/*.js"
        ],
        // attribute removed 
        // (use "tsc -w" from terminal instead, to compile only changed/saved files on the go)
        // "preLaunchTask": "tsc: build - tsconfig.json",
        //
        // attribute changed 
        // (it originally pointed to a specific file)
        "program": "${file}",
        //
        // attributes added
        "internalConsoleOptions": "openOnSessionStart"
        // , "args": [
        //    "anArgument"
        // ]
    }
]

}

Then to start coding, just run in a terminal, at the root of the project, the typescript compiler in watch mode, like this:

tsc -w

Give it some seconds or more to finish the first entire compilation.

From there, just go and edit your typescript files, and launch the debug if needed, it almost always get the file compiled automatically before the actual debuggin or execution, but if not, just launch it again, or instead, just save it and then launch, files get compiled when you save them, and if you do the process with the two steps save, then launch, it almost always will have it compiled when you launch.

Experience varies between environments due to machine resources, but for me (really not a super computer) it always or almost always has the file well compiled by just launching. When not I just launch it again, or do save, then launch, as mentioned, and it is incredibly better than compiling everything for every single launch/debug.

IMPORTANT UPDATE !!!:

An improved version is published as a template in the following repository (which automates the "tsc -w" task): https://github.com/Ortega-Dan/TypeScript-VScode-OptimalDebugConfig