Supporting Efficient Semantic Highlighting

[DanielRosenwasser]

There's been a bit of work invested from the VS Code team to implement semantic highlighting for TS/JS code in a reasonable efficient way. We want to see if there's a reasonable level of support that doesn't accidentally incur a full-program type-check.

[orta]

• Overview of current support: https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview
• Source code to be upstreamed into TSServices: https://github.com/aeschli/typescript-vscode-sh-plugin

[Sawtaytoes]

I wrote this article some years ago about Semantic Highlighting in Sublime Text and what I'd like to see from that in VS Code:
https://medium.com/@Sawtaytoes/why-i-dont-use-visual-studio-code-f5ac7274fb96

After reading every PR and Issue and docs page associated with this, I'm extremely confused what you guys mean when you say "Semantic Highlighting". Most of the screenshots didn't look like what I'd expect to see.

Also, I downloaded VS Code today, installed, it and added this in my config "editor.semanticHighlighting.enabled": true from this post. All I saw was regular VS Code syntax highlighting. I don't know why this feature is shrouded in mystery, but how do I test it out?

[RyanCavanaugh]

Most of the screenshots didn't look like what I'd expect to see.

Can you be more specific?

[orta]

• Semantic Highlight for TS = 'a class is highlighted differently from an object'
• Semantic Highlight from your blog post is 'a const object called a is a different color from a const object called b'

Here is an Xcode plugin I used back in the day shows the 2nd form:

You could probably build this vscode extension from TypeScript's APIs though @Sawtaytoes - but I guess it could you could request it be a core feature in vscode

[Sawtaytoes]

I'd prefer it was a core feature. In Sublime Text, it's a hack that requires modifying the syntax highlighter; not ideal.

I could code this myself, but I don't have enough information on how to do it. What I'd do is look at the CRC checker in Colorcoder for Sublime Text and duplicate that same behavior in VS Code (if possible).

https://github.com/vprimachenko/Sublime-Colorcoder

But I'd need to know quite a few things:

1. How do I create a plugin in VS Code?
2. What tools do I need to use so I can experiment?
3. How complex a task is this?

[niieani]

Another example of prior art for IntelliJ / WebStorm: https://plugins.jetbrains.com/plugin/8214-rainbow
Sadly, that's no longer maintained and doesn't work with recent builds either.
I too was under the same initial impression when I saw "semantic highlighting" touted as a new feature of VSCode, and was disappointed to see this is not what was meant by it.

I did just find this relatively new VSCode extension that has token-based coloring. Trying it out now.

In any case, this would be awesome to have natively.

[MartinJohns]

This feature should probably be removed from the 4.1 release on the roadmap.

[DanielRosenwasser]

Was this not implemented by #42438 for 4.1?

[Sawtaytoes]

Based on what @orta said, the first item appears to be in there now, the second is not:

• Semantic Highlight for TS = 'a class is highlighted differently from an object'
• Semantic Highlight from your blog post is 'a const object called a is a different color from a const object called b'

@orta I don't mind building the second solution myself; in fact, I've tried a few times, but I don't see anything in VS Code that lets me grab the words during syntax highlighting. Is there any way I could manually "parse the DOM" and replace the colors myself?

[orta]

I think you'd need vscode team buy-in and an extension API for that - this issue is specifically about the first bit, which did ship. I left the issue open because #40949 is really something I should go back to and try merge, but the feature itself did ship in 4.1

[Sawtaytoes]

@orta Thanks for the suggestion: microsoft/vscode#132689.

[andrewbranch]

This should have been closed by #39119 as far as I can tell. That PR says it’s part 1 of 2 but I’m not sure what part 2 was supposed to be, but it seems like it would have been asked for sometime in the last couple years if it still needed to be done.