Svelte 5 events lack syntax highlight

[ilblog]

Description

While legacy mode events, like on:click={} of on:scroll={} etc... is nicely highlighted (combination of red and green), using Svelte 5 events, displays events in green colour, which is the same, as any other attribute. Thus it degrades a readability of the code.

Proposed solution

Make events onclick, onsomething... coloured in different colour

Alternatives

No response

Additional Information, eg. Screenshots

No response

[jasonlyu123]

For components, this would only be possible at the type level. For elements, checking whether the attribute starts with on is relatively safe. However, it would be quite weird if it only works in elements. If we were to use semantic highlight —the type-level highlight —you still need to use a supported theme and need the theme highlight method/function in a different colour.

*And note to self, removing the quote in the generated object property could achieve it, but it also highlights the normal property to yet another different colour, which might not be ideal. Another potential reason against this is that TypeScript also doesn't highlight jsx attribute that is a function.

[cofl]

From an alternative perspective: I find not splitting attribute names into two halves or mixing colors among attribute names far more readable.

Readbility is a weird and oftentimes extremely subjective thing.