VS Code extension: setting custom semantic token colors

Question

Is it possible to modify the styling of semantic token modifiers received from LSP inside an extension without the need to create custom themes?

I am able to use editor.semanticTokenColorCustomizations in my settings.json file and add the custom rules I want, but this setting is not available for configurationDefaults in the package.json file for a VS Code extension.

So the following snippet does work in settings.json, while the same does not work in package.json for an extension under the configurationDefaults field.

"editor.semanticTokenColorCustomizations": {
  "enabled": true,
  "rules": {
    "*.declaration": {
      "bold": true
    },
    "*.definition": {
      "italic": true
    },
    "*.readonly": "#ff0000"
  }
}

Is there another way?

Ideally, I would like to change both token types and token modifiers for the language I introduce with the extension, but I don't want to create custom themes a user would need to use to get proper highlighting.

Note: I am forced to stick with the token types and modifiers supported by the language-client provided by Microsoft. Those are defined in the LSP specification.

Edit: I use LSP with semantic tokens to get the token types and modifiers of a file. This should be similar to using TextMate grammar. The problem I have, is applying correct styling/highlighting to those tokens. Since the language client limits the usable tokens, I apply a mapping between tokens of my language and the default LSP ones.

Meaning: token modifier declaration is in fact bold in my markup language

I added rules that work in settings.json. Not sure how I can clarify my question further. Hope this helps. — mhatzl
– mhatzl, Commented May 10, 2022 at 20:28
If all this is for adding support to VS Code for a language, then you need a grammar. It sounds like your trying to create a language. Whether your writing your own, or adding support for a small, lesser known language, the place to start with every language that has ever exsisted is with a grammar. I think thats why your so confused. Semantic tokens are customized and modified using the tokens for a language which are defined by the languages grammar. VSCode uses TextMate grammars, but typically those grammars are created from a standard, or a pre existing grammar. — JAYD3V
– JAYD3V, Commented May 10, 2022 at 21:44
If your language already has a grammar introduce that, if not, then its pretty typical to start with a Backus Naur grammer. en.wikipedia.org/wiki/Backus%E2%80%93Naur_form You will also need a lexer or parser or both. — JAYD3V
– JAYD3V, Commented May 10, 2022 at 21:46
thanks for your answers. I do already have parsing setup and use LSP with semantic tokens. So I have the token types and modifiers as you would get by using TextMate grammars, but now I would like to properly highlight them. — mhatzl
– mhatzl, Commented May 10, 2022 at 23:33

Radu Diță · Accepted Answer · 2023-02-13 14:58:56Z

6

You can introduce all your custom semantic tokens without the need to restrict yourself to the built-in ones. Personally I prefer the way proposed in the official sample file: semantic-tokens-sample.

As for the styling, you can easily modify an extension incl. semantic token colors via the package.json file as follows.

{
    ...
    "editor.semanticHighlighting.enabled": true, // not necessary, just make sure it is not disabled
    "contributes": {
        "semanticTokenTypes": [ // not necessary if you use own parsing with "DocumentSemanticTokensProvider"
            {
                "id": "myToken",
                "superType": "myToken",
                "description": "myToken"
            }
        ],
        "configurationDefaults": {
            "editor.semanticTokenColorCustomizations": {
                "rules": {
                    "comment": "#969896",
                    "string": "#B5BD68",
                    "myToken": "#323232" // custom
                }
            }
        }
    }
}

For that I personally introduced myToken in the legend in an extension.ts file.

To check if your semantic token logic is working, you can use the [view/Command Palette/>Developer: Inspect Editor Tokens ans Scopes] functionality that will reveal what semantic scope is attached to your keyword, if any.

If the provided code is not working for you, check your package.json and make sure the language settings are all correct: settings that could be of relevance for you:

{
    ...
    "activationEvents": ["onLanguage:myLanguage"], // make sure your extension is activated
    "contributes": {"languages": [{"id": "myLanguage", "extensions": [".myLang"], "configuration": "./language-configuration.json"}]}
}

Furthermore check if your User / Workspace settings are interfering with your package.json settings.

edited Feb 13, 2023 at 14:58

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

answered May 25, 2022 at 12:18

elod008

1,3821 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mhatzl Over a year ago

Thank you very much for your answer. My fault was in the contributes section of package.json. Taking your example as reference, I was able to achieve what I wanted. Due to the restriction of the language-client package, I am not able to add custom tokens, but I will mark your answer as correct. Thanks again.

Collectives™ on Stack Overflow

VS Code extension: setting custom semantic token colors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related