Request adding new 'decorator' semantic token scopes for Javascript/Typescript

[gaplo917]

Current Limitation

In the current Typescript development, after enabling Semantic Highlighting, the typescript decorators are identified as a function. I have no way to specify the decorator syntax color.

Consider the color scheme extension contains the following configuration

    "semanticTokenColors": {
        "function": {
            "foreground": "#A6E22E"
        },
     },
     "tokenColors" :  {
          "name": "Typescript / Javascript Decorator",
          "scope": [
              "meta.decorator.ts variable.other.readwrite.ts"
          ],
          "settings": {
              "foreground": "#BBB529"
          }
      },

Let's check the following rendered images.

Disabled Semantic Highlighting (Expected Color I want)

Enabled Semantic Highlighting (No way configure as function semantic token type overwrite)

Motivation

This limitation is an obstacle for syntax highlighting color scheme developers to use rich color to represent different syntax.

Real World Codebase example and IDE Competitor

Consider in a typescript graphql development with

• type-graphql : Use lots of decorator with typescript reflect meta data to generate GraphQL schema
• typedi : Use decorator to register/indicate the dependencies injection

those two libraries heavily use decorators to abstract and simplify the code bases.

However, current VSCode Typescript development lacking decorator semantic token causing a limitation that decorator syntax highlighted color must be the same color with function.

Others IDE Competitor(Intellij Ultimate / WebStorm), has no limitation with its "Semantic highlighting" implementation

It would be great if VSCode can solve this limitation and gives more flexibility for syntax highlighting color scheme developer to use more color to represent different syntax. In my opinion, the more consistent syntax color representation, the more productivity on reading source code just like the design philosophy of Dark and Dark+.

Suggestion

Adding a new semantic token type can solve this problem. To keep the backward compatibility of the wide range of typescript color schemes, entity.name.function should be used as a fallback for those color themes that might not yet be adding the new color, i.e. semanticTokenColors.decorator.

Semantic token type	Fallback Textmate scopes
decorator	meta.decorator, entity.name.function

[dannymcgee]

Just wanted to throw in my two-cents as a theme creator and someone who fusses about syntax highlighting more than any sane human should:

While I do think it would be great to have a dedicated semantic token for decorators/annotations/attributes (which has also been brought up on another issue), I also think it would be great if themes (or user color customizations) could set something like an !important flag on a color definition targeting a TM grammar scope.

One huge pet peeve of mine is that my theme slightly fades the delimiters on strings by targeting the punctuation.definition.string scope, but most of the time the LSP client for any given language will just stomp on that with a "String" semantic token that includes the quote marks. I don't want to turn off semantic tokens, because there's a lot of situations where they'll be more accurate than the TM grammar and I value that accuracy. But having the ability to explicitly override a semantic token in certain contexts could solve both my string-delimiter issue and the TS/JS decorator issue.

[aeschli]

To verify:

• open and run the semantic-tokens-sample
• In the [Extension Development Host] window, open sample/sample.semanticLanguage in the editor
• check that [decorator] gets the decorator semantic token (use the Inspect Editor Tokens and Scopes command