Certain valid expression fragments in Angular attributes break syntax highlighting

[dannymcgee]

This extension currently works by looking for HTML attribute names that match the pattern of an Angular directive (e.g., enclosed in brackets or parens or beginning with an asterisk), and tokenizing everything in the value of that attribute as embedded JavaScript. This is a pretty elegant solution for the most part, because VS Code's JavaScript grammar correctly handles most expressions that can be passed to an Angular directive.

How to Reproduce the Issue

There are, unfortunately, some pretty common exceptions. This pattern, for example, appears frequently in Angular's docs:

<div *ngFor="let item of someArray; let i = index">
  ...
</div>

This causes everything after the index to be highlighted incorrectly. The same issue occurs with a handful of other common patterns, such as...

<ng-container *ngIf="someObservable$ | async as someObservable">
  ...
</ng-container>

Inspecting the TM scopes in VS Code reveals that something is preventing the JS grammar from recognizing the closing quotation mark as the end of the embedded JavaScript block, so it attempts to continue parsing the rest of the file as JavaScript.

Workaround

Currently, the issue can be worked around by simply adding a semicolon to the end of the problematic code fragment, like so:

<div *ngFor="let item of someArray; let i = index;">
  ...
</div>

<ng-container *ngIf="someObservable$ | async as someObservable;">
  ...
</ng-container>

Pull Requests Welcome

Unfortunately I'm working more than full-time as an Angular developer in addition to working on unrelated side projects and trying to find time for family, so I have little to no time to debug this issue in the immediate future. If anyone else would like to tackle it, I'd be more than happy to lend a hand by pointing you in the right direction or answering any questions you may have. The following are some of the resources I have used and reference frequently when writing VS Code grammars:

• TextMate Language Grammars
• TextMate Regular Expressions
• Rubular (a realtime RegExp tester using an engine very similar to Oniguruma)

[dannymcgee]

I did some research and played around attempting some solutions, but unfortunately it seems like this is an underlying issue with VS Code/TextMate grammars which the VS Code team is not planning to fix: microsoft/vscode#20488

The only (viable) workaround is to define an embedded JavaScript grammar specifically for this extension (or for the TM HTML grammar as suggested here: textmate/html.tmbundle#85), but that is way outside the scope of this extension — for now. (In case I do eventually end up going that route, here is a note for future me: microsoft/vscode-textmate#49 (comment))

Closing this for now, but might take a look at actually implementing that solution the next time I get a free minute, because this issue has been a consistent pain in my ass, and I'm sure there will eventually come a day when my coworkers get sick of me sneaking superfluous semicolons into unrelated PRs for the sake of my syntax highlighter.

[wSedlacek]

This issue has come up in my personal projects.
It seems like prettier is removing the semicolon whenever I try to add it as well.
Is there any setting for prettier enforces the use of semicolons here rather then removing them?

[dannymcgee]

This issue has come up in my personal projects.
It seems like prettier is removing the semicolon whenever I try to add it as well.
Is there any setting for prettier enforces the use of semicolons here rather then removing them?

Yep, Prettier has an option to enforce semicolons or no semicolons: https://prettier.io/docs/en/options.html#semicolons

FWIW, I'm in the process of helping to move the functionality provided by this extension directly into the Angular Language Service extension, and I'm trying to come up with a solution for this issue as part of that work, so hopefully the semicolon workaround won't be necessary for too much longer.