Unique syntax highlighting for reactive variables?

[thedamon]

Using composition API one of the biggest hurdles for those used to options API (and maybe for others as well) is getting used to having to know the nature of the reactivity of any given variable.

I think it would be really helpful if the editor was able to highlight ref/reactive, and maybe also shallowRef/shallowReactive in a different way so they can be visually identified immediately without needing to find their definition to check.

Maybe with an underline: 1 line for shallow, 2 lines for deep and a different color for ref vs reactive?

Would this be possible?

[localjo]

After spending a whole day debugging a problem that ended up being caused by a reactive variable that I needed to call toRaw on, I agree that this feature would be useful.

Being new to this codebase, I may be overlooking some of the finer details, but I think the solution should be to update the language server to add semantic tokens for reactive variables, and then update the editor extensions to add some custom styles for reactive tokens. As far as I can tell, the editor extensions aren't currently applying custom themes, but rather inheriting the themes from the base language, so after adding new semantic tokens for reactive variables, it might be necessary for users to manually update their themes to style the reactive variables. Since the base language doesn't have a concept for "reactive variables", I'm not sure if there is a theme color that makes sense to inherit from that's different from the standard variable color.