JavaScript syntax highlighting color improvements

[dziku86]

Language: JavaScript


It would be super nice to color-wise distinguish things like:

Syntax to improve	E.g., API	E.g., Screenshot
variable.property	Node.parentElement
variable.property.string	HTMLOrForeignElement.dataset.DOMStringMap
variable.property.property	ElementCSSInlineStyle.style.property
interface.property.property	Document.documentElement.property
parameter=>variable.property	Arrow function expressions

I hope this clearly represents what I mean. ¯\\\_(ツ)_/¯

[jdinhify]

Thanks @dziku86 , I think I get what you meant. However, there's a few issues that we might need to think more about:

1. The syntax highlighting of vscode doesn't seem to provide much difference between stuff like variable.property.string in your suggestion. Or at least I haven't been able to get any difference using some of the sample codes that I have. Note that we're relying on the Editor Tokens and Scopes to be able to tell vscode what/how to highlight. You can check it out yourself by using the command Developer: Inspect Editor Tokens and Scopes (pressing Cmd + Shift + P on OSX).
2. We only have limited colours to use (technically we can introduce more colours but it won't be gruvbox anymore), it might not be possible to use unique colour for each level
3. We're only talking about 2-3 level depth, what about deeper objects? We could get the same problem as no.2, and potentially confuse users with having too much colours

I checked some of the more popular themes and they don't seem to support those as well.
Maybe I just misinterpret your suggestions, perhaps having some code examples that we can use & discuss would be easier?

[dziku86]

@jdinhify thank you for breaking this down. Sadly I was expecting that this can't be done (easily).
My main objective is to distinguish user defined code (variables, etc.) from programming language syntax.
Even italic font style would be sufficient to achieve this goal.