[Feature request] Highlighting within inline templates

[christophbuehler]

🚀 feature request

Description

When the cursor is placed on any tag within an inline template, the entire template is highlighted. In external HTML templates, just the opening and the closing tag are highlighted. I assume this is the case because the language mode of the file is set to TypeScript, not HTML. I find this very annoying.

Feature Type

What does this bug affect

• Angular Language Service VSCode extension
• Angular Language Service server

Describe the solution you'd like

Ideally the language mode of inline templates would be set to HTML.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

I have tried using other extensions, like Inline HTML that should change the language mode of template strings with moderate success.

Anything else relevant?

How it is:

What I would expect:

[urielzen]

As a temporary workaround you can set the following in your settings.json

"workbench.colorCustomizations": {
    "editor.wordHighlightBackground": "#ffffff00",
    "minimap.selectionOccurrenceHighlight": "#ffffff00"
}

[jreidgreer]

This drives me insane, makes inline templates almost unusable.

You can sorta get around this by disabling Editor: Occurrences Highlight in the settings. The downside is that you miss out on occurrences highlighting (clicking on a symbol and seeing other instances of it highlighted).

It looks like this was actually a previous problem that was fixed at some point: microsoft/vscode#185267
microsoft/TypeScript#46531

So it's possible this is a TypeScript issue and not Angular.

[atscott]

This does seem like its due to the Occurrences Highlight feature. The language service already switches the language inside the template string to html and isn't actively providing a highlight for the whole string. It does seem like there's a potential regression in VSCode. The test added in microsoft/TypeScript#46531 to verify the multiline template string didn't highlight is now verifying baseline highlights at head

[jreidgreer]

Appreciate you looking into this @atscott! I'll go ahead and open an issue in the TypeScript repo.