Vscode: [angular] Syntax highlight for inline HTML templates

[idooo]

It would be really cool if there was syntax highlighting and autocompletion for inline HTML templates

VS Code:

IDEA:

[zachlysobey]

With the recent VSCode update, this actually got _worse_ for me.

My experience was similar to @idooo, but now I'm experiencing fairly major problems. See the screenshot below.

I would absolutely LOVE if VSCode would syntax-highlight html in these multi-line strings. I _think_ a MS rep said this was coming soon (at AngularConnect)...?

[aeschli]

duplicate of #133

[jbicks]

This is still an issue - yet it has been closed. So has the duplicate #133. Is this being addressed somewhere else, or can this be re-opened?

[aeschli]

You are right, there's more to do.

[aeschli]

This is related to #2000 and #2793

[wmertens]

Also related to #5961 (which asks for broader, configurable support)

[kevjames3]

+1

[albertodenatale]

+1

[ntziolis]

+1

[KTITS-Kevin]

+1

[zekida]

+1

[zachlysobey]

@albertodenatale @ntziolis @KTITS-Kevin @zekida @kevjames3 please just subscribe and/or use reactions instead of +1s. When you do that it sends an email to everyone subscribed to this thread.

[trash]

This plugin seems to work pretty well in the meantime.

[doctorc30]

+1

[mjbvz]

I've created an example extension that demonstrates how extensions can inject grammars into JS/TS template strings: https://github.com/mjbvz/vscode-js-template-string-grammar-injection-example

The example shows how colorizing two forms of html template strings can be supported, tagged templates:

html`<a>text</a>` 

and looking at the first character of the string body to see if it is possibly an html tag:

`<a>text</a>` 

The example example is not complete but it should give a starting point for extension authors to build on

[wmertens]

Ok, but how does it handle interpolations and escaped ` symbols?

That is the real problem. It's unpractical to change all injected grammars
so they can handle those cases… if vscode would treat template strings as
special, it would be easy.

On Fri, Aug 25, 2017, 12:48 AM Matt Bierner [e-mail]
wrote:

I've created an example extension that demonstrates how extensions can
inject grammars into JS/TS template strings:
https://github.com/mjbvz/vscode-js-template-string-grammar-injection-example

The example shows how colorizing two forms of html template strings can be
supported, tagged templates:

html<a>text</a>

and looking at the first character of the string body to see if it is
possibly an html tag:

<a>text</a>

The example example is not complete but it should give a starting point
for extension authors to build on

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/130#issuecomment-324777979,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADWlpvHOHoC3xGnraDQGc1PC92cSHU-ks5sbf3JgaJpZM4GlMTz
.

[mjbvz]

This is a hard problem and I don't think VS Code can offer an automatic solution.

Consider a css template string:

const img = 'url(https://example.com/cat.png)';
const style = css`background: ${img} no-repeat;`

And let's say you have two grammars, VS Code's standard css grammar and one that parses ${...} expressions. I don't think VS Code can mechanically combine these grammars to parse the background: ${img} no-repeat; expression properly.

A few approaches that come to mind:

Run both grammars and then combine the tokens somehow

This doesn't work because the css grammar parses the string background: ${img} no-repeat; incorrectly:

Run the template expression grammar, then run the css grammar with template expressions removed

This works in some cases but not generally. In our example, I think this may work because the css grammar would see: background: no-repeat;. However, it is easy to come up with cases that break this:

const rule = 'background'
css`${rule}: red;`

Inject the template expression grammar into the css grammar

Depending on how this is performed, this may no not be a purely mechanical operation. Let's say you can use injection so that the css grammar knows that ${...} is a valid property value and a valid property name. That solves background: ${img} no-repeat; and ${rule}: red;, but break once you start getting more creative:

css`back${'ground:'} red

I actually don't think you can ever properly support that case though.

The core problem is that template expressions are operating at different level than the grammar, they are more like text macros from the css grammar's point of view.

---

I'd love to hear if someone has other suggested approaches here.

This example extension I provided shows how you can get a custom grammar to run inside the template string. It is then up the the grammar author to make sure JS template strings are properly handled inside their custom grammar. This may involve injecting the template grammar into a few rules, or it may require writing a completely new grammar

I've updated the example extension to show one way the injection can be done. The approach is similar to Atom's language-javascript grammar

[wmertens]

There is another option, that I proposed earlier: Have grammars define what
an interpolation should be replaced with. This would already help with sane
CSS interpolations, just replace all interpolations with the literal string
'INTERPOLATION'.

In the case of more complex interpolations, perhaps there could be a bridge
function that gets the template string and transforms it to the grammar.
This transformer would look exactly like a template function, except that
it would get only the static strings.

So maybe to cover all cases, always have a bridge function for template
string grammars and have it default to

const injectLiterals = strings => strings.join('INTERPOLATION')

On Fri, Aug 25, 2017 at 8:42 PM Matt Bierner [e-mail]
wrote:

This is a hard problem and I don't think VS Code can offer an automatic
solution.

Consider a css template string:

const img = 'url(https://example.com/cat.png)';const style = cssbackground: ${img} no-repeat;

And let's say you have two grammars, VS Code's standard css grammar and
one that parses ${...} expressions. I don't think VS Code can
mechanically combine these grammars to parse the background: ${img}
no-repeat; expression properly.

A few approaches that come to mind:

Run both grammars and then combine the tokens somehow

This doesn't work because the css grammar parses the string background:
${img} no-repeat; incorrectly:

[image: screen shot 2017-08-25 at 11 18 14 am]
https://user-images.githubusercontent.com/12821956/29727675-c9dbf22a-8989-11e7-8f08-d8bd0515ef25.png

Run the template expression grammar, then run the css grammar with
template expressions removed

This works in some cases but not generally. In our example, I think this
may work because the css grammar would see: background: no-repeat;.
However, it is easy to come up with cases that break this:

const rule = 'background'
css${rule}: red;

Inject the template expression grammar into the css grammar

Depending on how this is performed, this may no not be a purely mechanical
operation. Let's say you can use injection so that the css grammar knows
that ${...} is a valid property value and a valid property name. That
solves background: ${img} no-repeat; and ${rule}: red;, but break once
you start getting more creative:

css`back${'ground:'} red

I actually don't think you can ever properly support that case though.

The core problem is that template expressions are operating at different
level than the grammar, they are more like text macros from the css

grammar's point of view.

I'd love to hear if someone has other suggested approaches here.

This example extension I provided shows how you can get a custom grammar
to run inside the template string. It is then up the the grammar author to
make sure JS template strings are properly handled inside their custom
grammar. This may involve injecting the template grammar into a few rules,
or it may require writing a completely new grammar

I've updated the example extension to show one way the injection can be
done. The approach is similar to Atom's language-javascript grammar

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/130#issuecomment-325005190,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADWlrleWUztoG-xzd1y8GD8M2wRZHA1ks5sbxWqgaJpZM4GlMTz
.

[I-NOZex]

👍

[asfktz]

Hi, I only read this issue briefly so forgive me if it's not related.

Thought to share with you that I realized that this extension for angular 2 also works with angular 1
https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline

[kevjames3]

Nice, thanks for sharing

On Thu, Oct 5, 2017 at 3:46 PM Asaf Katz [e-mail] wrote:

Hi, I only read this issue briefly so forgive me if it's not related.

Thought to share with you that I realized that this extension for angular
2 also works with angular 1

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

[image: image]
https://user-images.githubusercontent.com/199747/31255887-f09d4d5e-aa37-11e7-8106-31637d1cfe6e.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/130#issuecomment-334612760,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAa3SjtjVj36ftSIMzogpiptHYfcQ9fYks5spVxRgaJpZM4GlMTz
.

>

Kevin McIntosh
Software Engineer - Seattle, WA

[vscodebot[bot]]

This issue has been closed because it is not within the scope of the core product, but could be addressed by an extension. The VS Code Marketplace shows all existing extensions and you can get started writing your own extension in a few simple steps. See also our issue reporting guidelines.

Happy Coding!

[wmertens]

Well, I disagree that this can be handled by an extension :(

On Mon, Nov 20, 2017, 10:49 PM vscodebot[bot], [e-mail]
wrote:

Closed #130 https://github.com/Microsoft/vscode/issues/130.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/130#event-1350809247, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AADWluY8TaAABtRxRc5Dt5fJ5CLcRXGuks5s4fPYgaJpZM4GlMTz
.

[mjbvz]

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

https://marketplace.visualstudio.com/items?itemName=bierner.lit-html