VSCode plugin colors

Hey. I figured I’d run a quick test on the new VSCode plugin by converting one file in our code base to ReScript. The conversion itself produced a nice result and the build seems to work.

However, I’m wondering if there is something going on with the colors.

Here’s the difference: Reason code is on left, ReScript on right.

Is this just about VSCode theming or something, or has anyone else had similar experiences?

3 Likes

rescript-vscode’s syntax grammar is kinda minimalistic, there will be improvements in near future.

Thanks. That’s good to know. I shall wait a bit more before converting everything then :slight_smile:

it’s important to note that the current vscode grammar implementation is built with correct semantics in mind, while the old reasonml vscode plugin made tradeoffs with semantical correctness (faking tokens to be some other token to get a different color). I had some lengthy discussions with Maxim and Cheng on how to get closer to the original highlighting without sacrificing correctness, but it seems like this is non trivial.

Besides, did you try different color schemes like vscode dark+? Some themes deliberately ignore certain token highlighting, making our syntax look to sparse. For example, decorators should be colored in one consistent color afaik.

@ryyppy you’re correct but IMO it’s hard to be 100% correct, performant, have accetable experience and maintainable codebase at the same time. so standing somewhere between makes sense.

Yes sure, but in our case we absolutely need the correctness, because afaik the sublime integration will rely on that heavily as well.

What I want to say here is that it’s not so trivial and we will probably still need more time to verify the right approach that is semantically correct and provides more highlighting.

4 Likes

Agreed, I use vim and wish the colors were better and more like reason files :confused:

1 Like

In case of vim-rescript it should be as good as vim-reason-plus

1 Like

After tweaking my theme a bit based on stuff I found from this file, I managed to make the file pictured above look like this:

.
I also compared this to the default dark theme and I think now all should be in place. So it’s definitely not as bad as I made it look like in the original post. Sorry about that.

However, I tried to figure out what does this leave me missing. Not much, just a handful of things, maybe in this order:

  • type names (string, bool, option<>, myType, etc…) Adding these would have the highest impact by far, imo.
  • jsx html tags like <div>
  • props inside jsx components <MyComp prop1=.... Wondering if these are semantically labelled function arguments or what?
  • variable/function name highlight let foo = ... (would it be possible to just regex anything in between let and =)
1 Like

@TomiS you mind sharing your tweaks? This rescript default colors is hard to look at. It would be appreciated. Thank you in advance.