How can I configure visual studio code to compile typescript files on save? I see it is possible to configure a task to build the file in focus using the ${file} as an argument. But I would like this to be done when a file is saved.

12 Answers 12


May 2018 update:

As of May 2018 you no longer need to create tsconfig.json manually or configure task runner.

  1. Run tsc --init in your project folder to create tsconfig.json file (if you don't have one already).
  2. Press Ctrl+Shift+B to open a list of tasks in VS Code and select tsc: watch - tsconfig.json.
  3. Done! Your project is recompiled on every file save.

You can have several tsconfig.json files in your workspace and run multiple compilations at once if you want (e.g. frontend and backend separately).

Original 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. You can provide any other parameters or change target/out, just make sure that watch is set to true.

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+U).

The compiler will compile files automatically when saved. To stop the compilation, press Ctrl+P -> > Tasks: Terminate Running Task

I've created a project template specifically for this answer: typescript-node-basic

  • 7
    Problem with this is it keeps a task running, VS Code knows when I save a less file, or ts file, it feels like redundant to have another watcher just because we can't hook to "On save" command easily. I wonder if someone's already done a extension to run something when specific filetype is saved, would be much better. – Ciantic Dec 31 '15 at 10:42
  • 2
    @Ciantic this answer was written before VS Code had extensions support. There's just an extension you're talking about, but it's actually faster to have TypeScript compiler watch files and re-compile only the changed ones. – zlumer Dec 31 '15 at 14:53
  • 1
    @Kokodoko bc compileOnSave only works in VS 2015, not Code – scape Apr 10 '16 at 10:37
  • 2
    @scape It works in VS Code as well, if you add "-w" to the command line arguments in tasks.json ! – Kokodoko Apr 11 '16 at 11:12
  • 1
    Actually VSCode does the configuration stuff for you: On configure task: VSCode will auto-detect that there is a tsconfig.json and prompt a dialog where you can choose either tsc: build - tsconfig.json or tsc: watch - tsconfig.json. Choose the latter and VSCode generates the tasks.json file (if there was no before) and adds the right configuration for you. – Daniel Apr 3 '18 at 2:12

If you want to avoid having to use CTRL+SHIFT+B and instead want this to occur any time you save a file, you can bind the command to the same short-cut as the save action:

        "key": "ctrl+s",          
        "command": "workbench.action.tasks.build" 

This goes in your keybindings.json - (head to this using File -> Preferences -> Keyboard Shortcuts).

  • 1
    This should just be an add-on to the above answer (edited). This made my day! – chrissavage Jun 10 '16 at 19:26
  • good answer... ?how to filter whats will be launched... for example: I only want to execute command if the file has html extension ??? – ZEE Jul 21 '16 at 14:20
  • @ZEE yes, this is possible, please see this bit of documentation for keybindings and also httpete's answer for a brief example. Specifically, the when condition` using editorLangId is of import. – BobChao87 Apr 11 '17 at 1:22

If pressing Ctrl+Shift+B seems like a lot of effort, you can switch on "Auto Save" (File > Auto Save) and use NodeJS to watch all the files in your project, and run TSC automatically.

Open a Node.JS command prompt, change directory to your project root folder and type the following;

tsc -w

And hey presto, each time VS Code auto saves the file, TSC will recompile it.

This technique is mentioned in a blog post;


Scroll down to "Compile on save"


I have struggled mightily to get the behavior I want. This is the easiest and best way to get TypeScript files to compile on save, to the configuration I want, only THIS file (the saved file). It's a tasks.json and a keybindings.json.

enter image description here

  • Thanks, the {$file} did the trick ! – Amitbe Dec 19 '15 at 5:36
  • 7
    for lazy developers: { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["--module","amd","--target","ES5","${file}"], "showOutput": "silent", "problemMatcher": "$tsc" } keybingings: { "key": "cmd+s", "command": "workbench.action.tasks.build", "when":"editorTextFocus && editorLangId == 'typescript'" } – Dariusz Filipiak May 7 '16 at 10:45
  • I can say with the latest version of TypeScript 1.8.X and 1.0 of Visual Studio code, the technique I showed is obsolete. Simply use a tsconfig.json at the root level of your project and all works automatically for syntax checking. Then use tsc -w on the command line for watching / recompiling automatically. { "compilerOptions": { "module": "amd", "target": "ES5", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "inlineSourceMap": true }, "exclude": [ "node_modules" ] } – httpete May 9 '16 at 14:07

Write an Extension

Now that vscode is extensible, it is possible to hook into the on save event via an extension. A good overview of writing extensions for VSCode can be found here: https://code.visualstudio.com/docs/extensions/overview

Here's a simple example that just calls echo $filepath and outputs stdout in a message dialogue:

import * as vscode from 'vscode';
import {exec} from 'child_process';

export function activate(context: vscode.ExtensionContext) {

    vscode.window.showInformationMessage('Run command on save enabled.');

    var cmd = vscode.commands.registerCommand('extension.executeOnSave', () => {

        var onSave = vscode.workspace.onDidSaveTextDocument((e: vscode.TextDocument) => {

            // execute some child process on save
            var child = exec('echo ' + e.fileName);
            child.stdout.on('data', (data) => {


(Also referenced on this SO question: https://stackoverflow.com/a/33843805/20489)

Existing VSCode Extension

If you want to just install an existing extension, here is one that I wrote available in the VSCode gallery: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Source code is available here: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts


Instead of building a single file and bind Ctrl+S to trigger that build I would recommend to start tsc in watch mode using the following tasks.json file:

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

This will once build the whole project and then rebuild the files that get saved independent of how they get saved (Ctrl+S, auto save, ...)

  • some of these props are deprecated. – Ebru Güngör Sep 21 '17 at 12:19

I implemented compile on save with gulp task using gulp-typescript and incremental build. This allows to control compilation whatever you want. Notice my variable tsServerProject, in my real project I also have tsClientProject because I want to compile my client code with no module specified. As I know you can't do it with vs code.

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps');

var tsServerProject = ts.createProject({
   declarationFiles: false,
   noExternalResolve: false,
   module: 'commonjs',
   target: 'ES5'

var srcServer = 'src/server/**/*.ts'

gulp.task('watch-server', ['compile-server'], watchServer);
gulp.task('compile-server', compileServer);

function watchServer(params) {
   gulp.watch(srcServer, ['compile-server']);

function compileServer(params) {
   var tsResult = gulp.src(srcServer)

   return tsResult.js


Select Preferences -> Workspace Settings and add the following code, If you have Hot reload enabled, then the changes reflect immediately in the browser

    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000

Current status of this issue:



I can say with the latest version of TypeScript 1.8.X and 1.0 of Visual Studio code, the technique I showed is obsolete. Simply use a tsconfig.json at the root level of your project and all works automatically for syntax checking. Then use tsc -w on the command line for watching / recompiling automatically. It will read the same tsconfig.json file for options and config of ts compile.

// tsconfig.json

    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "inlineSourceMap": true
    "exclude": [ "node_modules" ]

tried the above methods but mine stopped auto-compile when it felt like it, due to maximum files to watch have passed the limit.

run cat /proc/sys/fs/inotify/max_user_watches command .

if it's showing fewer files count including node_modules then open the file /etc/sysctl.conf in root privilege and append

fs.inotify.max_user_watches=524288 into the file and save

run again the cat command to see the result. It will work! hopefully!



In your tsconfig.json

"compileOnSave": true, // change to true

if problem is still there then change any route and revert it back and save the application. It'll start compiling i.e.

const routes: Routes = [
    path: '', // i.e. remove , (comma) and then insert and save, it'll compile
    component: VersionsComponent

I hope this will help someone. Although this is not the permanent solution but it works until you get a better solution.

  • 1
    Does VS code nowadays support that feature? Last time when I checked, it could not save and I needed to use extension to do it. – Antti Jan 14 at 20:03
  • Now it does support – WasiF Jan 15 at 10:23

Your Answer

