make "compileOnSave" option of tsconfig.json recognized by vscode

[zpdDG4gta8XKpMCd]

Currently "compileOnSave" option of tsconfig.json is ignored by the VS Code:

• http://stackoverflow.com/questions/29996145/visual-studio-code-compile-on-save

There is no a workaround to this problem. Please consider doing something about bringing it to life.

[dbaeumer]

Added a comment to stackoverflow. This is supported right now via a watch task. But I agree that the tsconfig.json option should be supported as well, which has to come from the TS team though.

[dbaeumer]

I opened microsoft/TypeScript#8884 since the support has to go there. I will close this issue as upstream.

[zpdDG4gta8XKpMCd]

the problem with "watch" is that vscode doesn't allow to run the test command while watching typescript, saying there is another command running, so at least with having to run the tests from under vscode "watch" isn't an option

[dbaeumer]

We have feature request to allow more than one command.

[dbaeumer]

As said I close this one since it will be addressed in tsserver.

[zpdDG4gta8XKpMCd]

Merged microsoft/TypeScript#9837

[styfle]

@dbaeumer Now that it is merged in tsserver will it simply work with vscode or will there need to be more work to integrate it?

[dbaeumer]

@styfle it should work with VS Code without additional integration effort. But please note that VS Code still ships with 1.8.10 and I think the feature will not make it out of the box into 2.0 either.

[mrcrowl]

@dbaeumer From what I can see, there is additional integration effort needed to enable compile on save in VSCode for TypeScript. Since v2.0.5, tsserver has supported the new API methods compileOnSaveAffectedFileList and compileOnSaveEmitFile, but they need to be called from the typescript extension. I've done some prelim work on getting this going for myself and would be happy to make a pull request if there was support? (WIP here if you want to have a look: https://github.com/mrcrowl/vscode/tree/master/extensions/typescript)

[dbaeumer]

@mrcrowl you are correct that the current implementation in the tsserver does require quite some work in the extensions. I started a discussion with the TS team about this here: microsoft/TypeScript#11526

The bottom line is that this doesn't belong into the extension since the extension can never implement this in a efficient way (and the TS team agrees on this). Especially since compileOnSave must also do problem checking. Doesn't make to much sense to write a new JS file without telling the user that you now have compile errors in dependent files.

So I would opt that instead of adding this to the extension your effort is better put into the tsserver to make this work. I started this along time ago here: https://github.com/Microsoft/TypeScript/blob/dbaeumer/9125/src/server/builder.ts and parts of the work made it into 2.0.6. But still no full builder. Their current builder only manages dependencies: https://github.com/Microsoft/TypeScript/blob/master/src/server/builder.ts

[Ciantic]

Shouldn't this be re-opened if there is more work to be done in VSCode code base? I'm running 2.2.0-dev in stable VSCode, the compile on save does not work with it.

Edit: Reason this bug would be nice to be open, so one could track when it becomes feasible to use.

Edit2: Or is this the main bug microsoft/TypeScript#11526 one could track for this feature?

[dbaeumer]

Yes, microsoft/TypeScript#11526 is the right item to track. We had again discussions with the TS team and there was agreement that something like compileOnSave and building is best implemented in the TSServer and not in VS Code. There still might be some little adoption needed in VS Code but it is currently not clear how that would look like. We will open an issue when the tsserver is ready.

[saschanaz]

I'm running 2.2.0-dev in stable VSCode, the compile on save does not work with it.

Sorry for pinging on a closed old issue, but it is still not working, right? I want to make sure that this is not my settings problem.

[mrcrowl]

As far as I'm aware, Compile on Save is still not officially supported by VS Code. If you need an interim solution—while the tsserver approach is being developed—you can compile your own TypeScript extension for VSCode (which replaces the overrides the built in one) from my fork of the vscode repo here: https://github.com/mrcrowl/vscode (specifically https://github.com/mrcrowl/vscode/tree/master/extensions/typescript). I'm happy to provide a precompiled .vsix if that is easier.

…

On Thu, 2 Feb 2017 at 17:44 Kagami Sascha Rosylight < ***@***.***> wrote: I'm running 2.2.0-dev in stable VSCode, the compile on save does not work with it. Sorry for pinging on a closed old issue, but it is still not working, right? I want to make sure that this is not my settings problem. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7015 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABtooCxSkAgy9AJvUoQUAZsZ4BGuBEcHks5rYV8ygaJpZM4IpX8S> .

[mrcrowl]

... one caveat (to my previous message) is that my version of CompileOnSave doesn't report errors. I use it in conjunction with a standard Build watch process to capture errors—but it still allows me to do super-fast edits and refresh in browser, without waiting for full compile. On Thu, 2 Feb 2017 at 19:59 Ben Crowl <[email protected]> wrote: As far as I'm aware, Compile on Save is still not officially supported by VS Code. If you need an interim solution—while the tsserver approach is being developed—you can compile your own TypeScript extension for VSCode (which replaces the overrides the built in one) from my fork of the vscode repo here: https://github.com/mrcrowl/vscode (specifically https://github.com/mrcrowl/vscode/tree/master/extensions/typescript). I'm happy to provide a precompiled .vsix if that is easier. On Thu, 2 Feb 2017 at 17:44 Kagami Sascha Rosylight < [email protected]> wrote: I'm running 2.2.0-dev in stable VSCode, the compile on save does not work with it. Sorry for pinging on a closed old issue, but it is still not working, right? I want to make sure that this is not my settings problem. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7015 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABtooCxSkAgy9AJvUoQUAZsZ4BGuBEcHks5rYV8ygaJpZM4IpX8S> .

[dbaeumer]

What we usually do is to run the tsc compiler in watch mode (which gives you compile on save) via the task runner. Here is that tasks.json I use:

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

and a package.json

{
        ....
	"devDependencies": {
		"typescript": "^2.1.5",
	},
	"scripts": {
		"compile": "tsc -p ./src",
		"watch": "tsc -w -p ./src"
	}
}

This gives you project wide errors and compile on save.

[httpete]

This is pretty nice.

I have updated dbaemuer's example for the latest version of VS Code.

{
	"version": "0.1.0",
	"command": "npm",
	"isShellCommand": true,
	"args": ["run", "watch"],
	"showOutput": "silent",
	"isBackground": true,
	"problemMatcher": "$tsc-watch"
}

 "scripts": {
    "dist": "node ./scripts/dist",
    "compile": "node ./node_modules/typescript/lib/tsc --pretty",
    "watch": "node ./node_modules/typescript/lib/tsc -w"
  }

The only thing I still don't like is CTRL+SHIFT+B.

[MicahZoltu]

So it seems that microsoft/TypeScript#11526 indicates that TSServe work is done and ready to be used. Should this issue be re-opened or another one created to get everything working together correctly?

[ShaharHD]

@dbaeumer Can we re-open this issue?
As it seems it can be fixed within the next minor version iteration of VSCode, or I'm mistaken?

The workaround I have now is basic on emeraldwalk.RunOnSave
But it would be nicer if it was automatically handled by VSCode.

[dbaeumer]

@ShaharHD I followed up with the TS team on this in microsoft/TypeScript#11526. To my understanding the current solution would still need quite some work in VS Code that is better done in TSServer.

@mjbvz @waderyan did you talk to the TS team about the builder lately? What is the current state of this?

[ShaharHD]

I'm assuming this microsoft/TypeScript#8884 (which was opened by you) haven't got any traction either.

[mrcrowl]

@dbaeumer, @httpete I agree that the watch mode of tsc is great, and works perfectly for many projects.

In my workplace, though, I've found that watch doesn't scale well to our project size (approx 4,500 typescript files). A change to a single file in our project can take 15-20 secs to finish compiling. This is why I care about compileOnSave still being a supported feature.

With the changes I made to the typescript extension in my fork of vscode, I'm able to compile changes to individual files in <200ms and leave the watch running in the background to catch refactoring errors.

I realise this "unchecked" approach is not the way you'd like it to work, but I would like to raise awareness that watch by itself is not working for us.

[dbaeumer]

@mrcrowl we are aware of the fact that tsc -watch doesn't scale well for larger project. An alternative to tsc -watch is to use gulp-tsb an incremental builder we maintain to incrementally compile VS Code itself. It is here: https://www.npmjs.com/package/gulp-tsb. Downside is that you need to use gulp and gulp watch to use it. You can also look at VS Code's gulp files to see how we use it.

We are working with the TS team to get this builder approach into the TS project.

[dbaeumer]

one more comment: the builder might not work in all cases perfectly. So for example for internal module systems it recompiles the world on every file change.

[mihailik]

This feature request is for compile on SAVE, not compile on filesystem change.

Neither TSServer, nor tsc.js, nor gulp have any clue when a "file save" operation happens, so any solutions based on filesystem watchers are workarounds.

The two fundamental downsides of filesystem watch workarounds are:

• latency -- feedback taking seconds versus a fraction of a second
• CPU/battery overhead

The ideal is to compile while your fingers lift off the Ctrl key. On a commodity laptop without spare battery.

There is also a costly non-fundamental downside.

• VSCode+TS does NOT work out of the box

Makes boasting about beauties of VSCode so much harder: 'hey you just download it and spend 1/2 hour to 45 minutes scouring blogs and GitHub issues for the right snippets of them taskings, there was a combination to paste them like Alt-P or whatever'

I'd much rather said: 'hey you just download it and to enable feature X set flag X in config'

[dbaeumer]

The tasks for compile the whole project and to run tsc in what mode will come preconfigured with the next release without the need of tweaking a tasks.json file.

And yes, I agree that the best solution would be the tsserver doing this on file change / save events.

[desertdev]

Looking forward to giving VSCode another try after the next release! The excellent points brought up @mihailik caused too much friction for my dev team to adopt VSCode at this time.

This is unfortunate because VSCode seems to have the best tooling available to help developers work with Typescript, except for a simple, sane approach to "turning on" compile on save.

[Dashue]

Good stuff! When might that release be exp?

[Dashue]

Latest release landed, was this part of it? @dbaeumer

[dbaeumer]

@Dashue zes, but you still need to opt into it. Create an tasks.json like this:

{
    "version":"2.0.0"
}

and you should see build tasks to compile TS -> JS without any further config steps.

[Dashue]

@dbaeumer [Info - 14:17:13] Using tsserver from: c:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\node_modules\typescript\lib\tsserver.js [Info - 14:17:13] Forking TSServer PATH: undefined

[Dashue]

Not sure whether you got the mention, as it was added during an edit @dbaeumer

[dbaeumer]

@mjbvz does comment #7015 (comment) ring a bell ?

[dbaeumer]

@Dashue this is unrelated to tasks and it comes from the TypeScript extensions. I pinged the corresponding dev.

[mrcrowl]

For anyone still interested in compile-on-save, here's an unofficial .vsix you can manually install in vs code 13.x that replaces the built-in typescript extension, with one that supports the compileOnSave setting in tsconfig.json:
https://github.com/mrcrowl/vscode/releases/tag/13.10.8

edit: added "unofficial"

[Dashue]

@mrcrowl @dbaeumer Installing that would be a hack around right? When is it officially landing in vscode? I'm running on the latest typescript afaik.

[mrcrowl]

@dbaumer, your comment from May 18 refers to a preview feature in vscode 13.x that simplifies build tasks for TypeScript (see release notes), which is great... but this feature hasn't yet addressed "compileOnSave", right?

---

@Dashue, yes, installing this extension is a hack that is not officially supported. Here's a bit of background:

As I see it, there are two groups of people wanting "compileOnSave":

• Group 1 just want TypeScript compilation with minimal configuration, for small-to-medium sized projects.

• Group 2 want performant TypeScript compilation for larger projects (this is the promise of TypeScript, right? "JavaScript that scales")

Group 1 are well-covered by a combination of tsconfig.json + watch + tasks.json, i.e. file-system watcher that incrementally builds when a file change is detected.

I'm concerned with Group 2, who are working on larger projects where even the incremental build takes too long to run. Based on @dbaeumer's May 5 comment there is an awareness of this within the TypeScript and vscode teams (...is there an issue for this?)

In the meantime, my team needed a way to continue fast TypeScript compiles, often for individual files within the context of a large project. Hence, the provided extension which uses existing tsserver apis to achieve a pragmatic compile-on-save behaviour, while we wait for an official solution to materialize.

The built-in TypeScript extension runs a tsserver instance in the background, which is synchronised with editor changes. In order to take advantage of that same tsserver instance my version of the extension has to replace the built-in TypeScript extension. It's possible a similar result could now be achieved as a typescript server plugin, although I haven't investigated that route yet.

[dbaeumer]

@mrcrowl here some issues in the TS land about compile on save and a full builder in the TS server:

microsoft/TypeScript#9125
microsoft/TypeScript#11229

Building a performant incremental builder for large projects is not trivial (as you might have noticed as well). The TS team is still on this but it might be helpful if you start to vote on microsoft/TypeScript#11229

[mrcrowl]

@dbaeumer would you consider #28912 as an alternative for now?

[dbaeumer]

@mrcrowl I think having TS exposing its API is useful regardless of this issue.

[josh-sachs]

The vsix provided by @mrcrowl does EXACTLY what vscode should do by default.

[meriturva]

Right now TypeScript 2.4 is landed, but i think there is no news about compileOnSave fix on TS Server or language service. Do we have to wait also VSCode new version to have a productive environment? Vsix from @mrcrowl is really a good start (thanks again) but i think that we have to expect an official solution. am i wrong?

[bkniffler]

The best solution for me was using a build task and ONLY compile the saved file:

// project: .vscode/task.json
{
  "version": "0.1.0",
  "command": "node",
  "isShellCommand": true,
  "args": ["${workspaceRoot}/.vscode/task.js", "${file}"],
  "showOutput": "silent",
  "problemMatcher": "$tsc"
}

// project: .vscode/task.js
const { spawn } = require('child_process');
const { resolve } = require('path');

const root = resolve(__dirname, '..');
const json = require(resolve(root, 'tsconfig.json')).compilerOptions;

const args = [resolve(root, 'node_modules', '.bin', 'tsc')];
Object.keys(json).forEach(key => {
  args.push(`--${key}`);
  args.push(`${json[key]}`);
});

spawn(`node`, args.concat(process.argv.slice(2)), {
  detached: true,
  stdio: 'ignore',
}).unref();

// keybindings
{
    "key": "cmd+s", 
    "command": "workbench.action.tasks.build", 
    "when":"editorTextFocus && editorLangId == 'typescript'"
},{
    "key": "cmd+s", 
    "command": "workbench.action.tasks.build", 
    "when":"editorTextFocus && editorLangId == 'typescriptreact'"
}

The script will pick up the tsconfig.json compilerOptions. Only downside is that it will not output any errors whatsoever since the process is detached to allow for parallel executions of the task in case multiple files are saved.

[xygahs0801]

I just write a little extension.
https://github.com/xygahs0801/ts-compile-on-save
https://marketplace.visualstudio.com/items?itemName=liuwei.ts-compile-on-save
this will execute ts -w for workspace if it contains the tsconfig.json file.

[fuyifan]

@xygahs0801 It works great. Thank you very much.

[josh-sachs]

It sucks that this issue has been closed, as it doesn't appear any official support addressing this has been provided. Visual Studio seems to do this out of the box, without the need to run a battery draining background process during development.

[carlpaten]

Could this issue please be re-opened? It's not exactly resolved.

[mjbvz]

@LilRed This is issue is still being tracked by #973 and #7342