Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Supporting Efficient Semantic Highlighting #38435

Closed
DanielRosenwasser opened this issue May 8, 2020 · 12 comments
Closed

Supporting Efficient Semantic Highlighting #38435

DanielRosenwasser opened this issue May 8, 2020 · 12 comments
Labels
Committed The team has roadmapped this issue Fix Available A PR has been opened for this issue Rescheduled This issue was previously scheduled to an earlier milestone Suggestion An idea for TypeScript
Milestone

Comments

@DanielRosenwasser
Copy link
Member

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.

@DanielRosenwasser DanielRosenwasser added this to the TypeScript 4.0 milestone May 8, 2020
@RyanCavanaugh RyanCavanaugh assigned orta and unassigned RyanCavanaugh May 12, 2020
@RyanCavanaugh RyanCavanaugh added Committed The team has roadmapped this issue Suggestion An idea for TypeScript labels May 12, 2020
@orta
Copy link
Contributor

orta commented May 12, 2020

@Sawtaytoes
Copy link

Sawtaytoes commented Mar 10, 2021

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
Copy link
Member

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

Can you be more specific?

@orta
Copy link
Contributor

orta commented Mar 10, 2021

  • 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:

Screen Shot 2021-03-10 at 8 16 00 PM

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
Copy link

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
Copy link

niieani commented Mar 18, 2021

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.

@andrewbranch andrewbranch removed this from the TypeScript 4.3.0 milestone Apr 2, 2021
@MartinJohns
Copy link
Contributor

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

@orta orta removed this from the TypeScript 4.4.1 (RC) milestone Jul 2, 2021
@DanielRosenwasser
Copy link
Member Author

Was this not implemented by #42438 for 4.1?

@Sawtaytoes
Copy link

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
Copy link
Contributor

orta commented Sep 8, 2021

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
Copy link

Sawtaytoes commented Sep 8, 2021

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

@orta orta added this to the TypeScript 4.1.1 milestone Sep 9, 2021
@andrewbranch
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Committed The team has roadmapped this issue Fix Available A PR has been opened for this issue Rescheduled This issue was previously scheduled to an earlier milestone Suggestion An idea for TypeScript
8 participants