search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
164.49k stars 29.37k forks source link

Highlight each identifier with a different color #132689

Closed Sawtaytoes closed 3 years ago

Sawtaytoes commented 3 years ago

I searched and looked through all issues relating to Semantic Highlighting and found none about this particular topic.

I want to add word-based Semantic Highlighting to VS Code. This is not the same as token-based Semantic Highlighting which is already part of VS Code.

NOTE: I've been using the Colorcoder plugin for Sublime Text, a Semantic Highlighting plugin, since 2013.

What is Semantic Highlighting?

Semantic Highlighting is a revolutionary way of highlighting code not by syntax selectors or token names, but by variable names. In this way, a variable fun would be colored the same no matter where it appeared in the code. Even .fun would have the same coloring.

It's a fundamentally different way of highlighting; although, it's different from, and works side-by-side with syntax highlighting.

word-based semantic highlighting

Prior Art

These are own sources showing Colorcoder in action in Sublime Text:

There were a bunch of articles written on Semantic Highlighting from 2013-2014:

Implementations:

Colorcoder for Sublime Text

This is the plugin I still use today.

It has 2 modes:

  1. Modify a TextMate theme with a bunch of CRC32 hash scopes for every possible scope and color based on a lightness and saturation calculation.
  2. Read from the theme and process word colors based on the hashes in the theme file.

Thinking about it, the theme file modifications most-likely don't even need to be there and could be generated on-the-fly or statically added to the Colorcoder plugin's Python file.

There are a few reasons this solution no longer works for me:

  1. All the latest JavaScript development is happening in VS Code, and I'm a JavaScript developer.
  2. The JavaScript world is moving to TypeScript and that plays best with VS Code.
  3. VS Code has no equivalent Semantic Highlighter.
  4. Colorcoder for Sublime Text is no longer maintained.
  5. The Babel-Sublime plugin for Sublime Text (which adds JSX syntax highlighting) got some major updates, but that version is no longer compatible with Colorcolor. At this time, I'm using an older version of the plugin.
  6. The TextMate theme modification code no longer works in Sublime Text 4. I'm stuck with the color schemes I've already modified.

VS Code Implementation Ideas

I've looked at possible methods of implementing Semantic Highlighting in VS Code, but I'm not sure where to start:

  1. Create a plugin that runs a callback anytime the text is inserted and goes through the available "variable name" scopes, hashes the name, and changes the color. As far as I understand it, this is absolutely not possible in VS Code. You can't even listen to inputs from the document view.
  2. Use the webview API and make my own text renderer. This could work, but would be me making my own VS Code at that point.
  3. Download VS Code's source and add this into core. I would love to do this, but I have no clue where to start. Everything in VS Code is class-based, which is hard enough to follow, but it's also in TypeScript, which I don't know. The VS Code API docs page crawls to a stop because it's literally every possible piece of code thrown in the DOM. This doesn't help me when trying to figure out how it works. On top of that, nothing's documented. Sure, function names and members exist, but I have no clue what anything does. I'm missing the context of "here's a thing, here's why it's important, here's how you use it".

If anyone knows where to point me on how I can get this into VS Code, that would be incredible. To me, this is an accessibility feature that assists with my ability to read, understand, and skim code.

If I can get this integrated into VS Code core, then it's only a setting away to turn it on. At that point, it'll no longer be this niche idea that died in 2015.

aeschli commented 3 years ago

I think there's already an extension that goes in the direction you want: https://marketplace.visualstudio.com/items?itemName=MatthewNespor.vscode-color-identifiers-mode?

Maybe connect with the author from the extension to help and join forces.

Sawtaytoes commented 3 years ago

I think there's already an extension that goes in the direction you want: https://marketplace.visualstudio.com/items?itemName=MatthewNespor.vscode-color-identifiers-mode?

Maybe connect with the author from the extension to help and join forces.

That's a good plan. I'll take a look.

The important piece for me is the existence of these docs: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide.

I had no clue a language server even existed.

I've been scouring the API docs trying to find an event listener to register that listens for keystrokes and gives access to the document.