Adopt semantic highlighting

[aeschli]

Since 1.43, VSCode themes can take advantage of semantic highlighting.

Every theme controls whether semantic tokens are enabled. So far, only built-in themes have it enabled and I filed this issue to ask you to opt-in for the Monokai Pro themes as well.

Adoption is easy and there are new cool styling possibilities.

To turn on semantic highlighting for a theme, all you have to do is put "semanticHighlighting": true in the theme's definition file.

There's a good chance that no further change to the theme is needed (thanks to a default mapping from semantic tokens to TextMate scopes (if not, I'd be interested to know, so I can improve the defaults further)).

But, more interestingly, themes can tune and go wild by defining new styling rules against the semantic tokens:

"semanticTokenColors": {
    "variable.readonly": "#ff0000", 
    "parameter": { "fontStyle": "underline" },
    "*.declaration:java": { "fontStyle": "bold" }
} 

Check out our Semantic Highlighting Wiki and the Semantic Highlighting Guide for more details and feel free to ping me in this issue if I can help.

Thanks for the great work and looking forward to semantic highlighting in your theme.

[Monokai]

It's a nice idea, but for now I won't opt-in to let it be the default. I think most people are used to syntax highlighting as it is.

As I've read in some issues in the VSCode repo, it's not all roses. Syntax highlighting really is different from semantical highlighting and I somehow feel it requires you to think a little differently about your code.

Personally I'm not sure yet if semantic highlighting is beneficial. I'm not sure it adds clarity by coloring the same things differently depending on context. I'm postponing it for now, but I'm open to good arguments to enable it or adjust my theme to support it better.

[Elrendio]

Hello,

When updating to VSCode 1.52 my coloration was quite significantly changed for Rust. It didn't detect differences between types, enums, variants and structs as well as it did before. I'm not sure why it was broken, but enabling semantic highlighting solved the issue 🙂

For others that want to try it, you can activate it by adding

    "semanticHighlighting": true

to the file ~/.vscode-oss/extensions/monokai.theme-monokai-pro-vscode-${VERSION}/themes/${THEME_NAME}.json

Have a nice day !

[Mongkii]

or open VSCode Settings (JSON), and add:

  "editor.semanticTokenColorCustomizations": {
    "[the_theme_you_want_to_force_enable_semantic_highlighting]": {
      "enabled": true
    }
  },

In this way you can force enable semantic highlighting without modifying theme file.

[WoodyWoodsta]

I'm not sure it adds clarity by coloring the same things differently depending on context.

I'm not so sure this is actually true. Consider the following:

const [item1, item2] = makeATuple();

item2();

The function makeATuple does exactly that, the first item being a constant, and the next item being a function. Without semantic highlighting, the color of item2 is the color of a constant in the array destructuring assignment, and a function color when it is called as the function that it is. This difference in color actually makes much less clear the connection between the two occurances of the text.