Search code examples
visual-studio-codecolor-scheme

How can I find out what syntax highlighting tokens and modifiers a language support extension for VS Code contributes?


I'm trying to make my own colour scheme for VS code (I have a fairly particular taste and none of the themes I like work particularly well with the rust language - which is largely what I code in). I've done the styling of the editor itself (i.e. everything but the syntax) using this: https://themes.vscode.one/ but I to do a number of things with the syntax e.g. making structs and enums different colours, that it won't let me do.

However, I'm struggling to understand VSCode's names for syntax tokens or find a guide them. Does anyone know of a good resource? (Particularly for rust code).


Solution

  • For semantic highlighting

    For semantic highlighting, "standard" semantic token and modifier IDs are detailed in https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#standard-token-types-and-modifiers.

    If a theme enables semantic highlighting, but a semantic token is not provided by the theme, the scope map is used: https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#semantic-token-scope-map.

    If a language support extension you use supports semantic highlighting and provides custom scopes / modifiers, you'll either need to find those out from documentation (if it exists- Ex. for Rust Analyzer, see https://rust-analyzer.github.io/manual.html#semantic-syntax-highlighting), from experimentation / trial and error (use the Developer: Inspect Editor Tokens and Scopes command in the command palette), or from reading the source code of the language server (if it's open source- Ex. for Rust Analyzer, see https://github.com/rust-lang/rust-analyzer/blob/master/crates/ide/src/syntax_highlighting/tags.rs).

    For TextMate-based highlighting

    Some common token IDs can be found by opening the settings.json file, writing the editor.tokenColorCustomizations setting, and triggering suggestions in the scope property of a textMateRules property object.

    For specific token IDs of a specific extension, you'll need to either find those out from documentation (if it exists), from experimentation / trial and error (use the Developer: Inspect Editor Tokens and Scopes command in the command palette), or from reading the .tmLanguage file (TextMate grammar file, which you can find either in the source code (if it's open source), or in the extension's installation directory in ~/.vscode/extensions/<ext-id>/...).

    For a builtin language support extension for VS Code, you can find its tmLanguage file (if it has one) under https://github.com/microsoft/vscode/tree/main/extensions.