Vscode: HTML string inside TypeScript and JavaScript files?

[mohsen1]

When using Angular 2 and TypeScript I noticed that editing template strings of components in TypeScript files are not working as one expect. There is not autocomplete for tags and other usual HTML editing features.

For example

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Of course it's because the type definition has declared template as a String and no part of VSCode knows that it's an HTML string.

My proposal is to define a HTMLString type where it's basically just string but helps tooling in cases like this.

If it was possible to do this, then we can define CSSString, JavaScriptString, SCSSString and so on...

[cebor]

:+1:

[dbaeumer]

I copied the item to the TS repository to hear their opinion: https://github.com/Microsoft/TypeScript/issues/6778

[sheldonbarnes]

Consider using templateUrl, and specifying a HTML file name. You can then get all the autocomplete in that HTML file. I think that is better than mixing code and HTML like Classic ASP.

Example:

https://github.com/sheldonbarnes/Angular2Learning/blob/master/app/app.customerdetailscomponent.ts

[felixfbecker]

1751

[MarkPieszak]

I don't know if this would help in VSCodes case, but @GregOnNet came up with a brilliant solution for adding HTML highlighting to the back-tick section here for Atom-typescript

https://github.com/TypeStrong/atom-typescript/pull/948

Hoping that might help potentially add this ability to VSCode!

[dbaeumer]

@aeschli please see the latest comment. With what we discussed last week can we achieve the same?

[aeschli]

@dbaeumer @egamma The solution mentioned above adds the html/angular syntax highlighting directly to the TypeScript grammar. That's one of the options we discussed last week. It would be up to the TypeScript team to decide that. Alternatively we work on adding injection support: https://github.com/Microsoft/vscode/pull/6331.

[juliusl]

In the meantime looks like this extension works pretty well:
https://marketplace.visualstudio.com/items?itemName=nwallace.language-vscode-javascript-angular2

[stefanaerts]

@dbaeumer @egamma @juliusl @aeschli
Well the color works with the extension, but the autocomplete of
-> custom html tags, in a angular2 component we call it a selector:.
template: `

          <color-pi...      

will not complete.

[MarkPieszak]

True, it doesn't autocomplete html but at least it'll help you with variables you have within that file.

Let's say you had public someString : string; in your class, when you do {{ som...(it'll show someString). Better than nothing I suppose ;)

[icenold]

https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline

[ntziolis]

Just for other people finding this thread the link above is the working one. The other extension from the same author no longer works with the current version of vscode as far as I know.

The extension does provide:

• intellisense
• and coloring

But sadly NO formatting. There is an open feature request for formatting, give it some love if you also wanne see it included too: https://github.com/natewallace/angular2-inline/issues/6

[robhaswell]

Is it desirable to turn this into a more generic solution? What if my backtick contained some JS code for evaulating (yuck), or more likely, I'm providing some inline scripting to an Elasticsearch query?

[felixfbecker]

https://github.com/Microsoft/vscode/issues/1751

[n1ru4l]

@robhaswell SQL would be awesome too!

[kenchris]

This would be quite useful for hyperHTML/viperHTML and lit-html as well

https://github.com/PolymerLabs/lit-html
https://viperhtml.js.org/

[motss]

Meanwhile I found this. https://github.com/Microsoft/typescript-lit-html-plugin

[mjbvz]

Yes, for angular try the angular-inline extension and for lit-html, try:

• lit-html syntax highlighting extension: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
• Lit-html IntelliSense TypeScript plugin: https://github.com/Microsoft/typescript-lit-html-plugin

---

I posted more information about embedded language support in https://github.com/Microsoft/vscode/issues/5961#issuecomment-335964652 as well. To sum up, you can already write extensions and TypeScript plugins that contribute support for embedded languages. The main remaining work is to polish the experience so that you only need to install a single vscode extension to get syntax highlighting and intellisense for your template strings. This work is now being tracked by #5961

Closing this issue in favor of #5961