search

jdinhify / vscode-theme-gruvbox

Gruvbox theme for vscode based on https://github.com/morhetz/gruvbox
https://marketplace.visualstudio.com/items?itemName=jdinhlife.gruvbox
MIT License
274 stars 63 forks source link

JavaScript syntax highlighting color improvements #30

Closed dziku86 closed 3 years ago

dziku86 commented 3 years ago

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 image
variable.property.string HTMLOrForeignElement.dataset.DOMStringMap image
variable.property.property ElementCSSInlineStyle.style.property image
interface.property.property Document.documentElement.property image
parameter=>variable.property Arrow function expressions image


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

jdinhify commented 3 years ago

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 commented 3 years ago

@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.