Syntax highlighting breaks after inline Typescript cast (:attr="x as foo")

[richardtallent-erm]

Consider this example:

<RouterLink :to="action as string" class="mx-2 bg-red-400">My Link</RouterLink>

Syntax highlighting is breaking for the " class=" -- basically from the end quote through the starting quote of the next attribute of that tag/component.

Wrapping the expression in () fixes this, but then Prettier removes the unnecessary parenthesis.

Using :to="<string>action" works, but I tend to avoid that syntax option (for consistency, and because <> inside attributes feels wrong even though it's legal).

• This is not limited to string, it's any cast.
• The problem presents for any bound attribute/prop.
• Still happens if the next attribute is wrapped to the next line

[so1ve]

Duplicate of #520

[tomvdk]

We have the same issue. Too bad this item is closed here too.
Prettier doesn't want to provide an option to keep the parenthesis #15201 - Removal of parentheses in a Vue directive that uses type casting destroys syntax highlighting in vs code

Thanks @richardtallent-erm for your post because changing the syntax to :to="<string>action" is the only thing that works for us on how to resolve this. We were already using <> inside attributes because of generic usage:
v-for="(_, slot) in ($slots as Readonly<QBtnSlots>)"
It's unfortunate that we have to change this everywhere to:
v-for="(_, slot) in <Readonly<QBtnSlots>>$slots"
See: #14415 (Quasar discussion - Typescript in dynamic slots)