How to switch between TypeScript and HTML with one (or two) shortcuts in vscode?

Question

Working with Angular2, I often have typescript @Components with html template inside.

Atom supports syntax highlighting of both at the same time, while VSCode doesn't.

Right now you have to use the shortcut CTRL+K M and type "typescript" or "html" in order to switch between the two, which is fine but kind of tedious when developing new components.

I'd like to bind shortcuts change language on the fly using the "workbench.action.editor.changeLanguageMode" command into the keybindings.json file. Ideally would be something like this:

{ "key": "ctrl+win+h", "command": "workbench.action.editor.changeLanguageMode", **toggle="html,typescript"**  }

but would be also ok something like this:

{ "key": "ctrl+win+h", "command": "workbench.action.editor.changeLanguageMode", **value="html"**  }

{ "key": "ctrl+win+t", "command": "workbench.action.editor.changeLanguageMode", **value="typescript"**  }

Obviously the point is that keybindings.json doesn't support the "value" field.

Is there any way to achieve this?

Answer 1

Something like your "value" field does exist for keybindings, namely "args". It's mentioned here with an example for the insertSnippet command.

Unfortunately, it seems like the changeLanguageMode command does currently not support any args. This was discussed in this unresolved feature request: #1800

It's also not possible to do this using the VSCode extension API, as mentioned in the above issue. TextDocument#languageId is readonly.

Regarding HTML support in TypeScript files, there's a relevant issue here: #2000

In summary, it looks like you will have to wait for one of these two feature requests to be implemented.

The only alternative I can think of would be to write your own extension including a modified TypeScript grammar. You would have to adjust it to inject HTML highlighting at the correct place. In case you're interested in doing that:

• The source for the TS grammar file can be found here.
• Here's some information on how you would go about injecting one grammar into another.