CODEWITHSUNDEEP
typescriptvisual-studio-codesyntax-highlighting
lmonninger
lmonninger

Reputation: 961

What is the token name for types in VSCode Typescript syntax highlighting?

I'd like to change the styling of my VSCode syntax highlighting, so that I can differentiate between types and classes.

class Thing; // should be one color
type ThingT; // should be another color

What is the name the token name I would need to specify? Will I need TODO Highlight?

Upvotes: 2

Views: 1396

Answers (1)

Connor Low
Connor Low

Reputation: 7226

The foreground color of class uses the scope entity.name.type.class.ts. type uses entity.name.type.alias.ts.

Update: If overriding in settings.json, use:

"editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
        "type": {
            "foreground": "#ff0000" // color here
        }
    }
}

FYI, you can see scopes with the Developer: Inspect Editor Tokens and Scopes command. For example, I got this for my TypeScript class:
language typescript
standard token type Other
foreground #FFCB6B
background #0F0F0F
contrast ratio 12.78
--- ---
textmate scopes entity.name.type.class.ts meta.class.ts source.ts
foreground entity.name.type.class { "foreground": "#FFCB6B" }

View Scopes Command

Screenshot

You might also use the Developer: Generate Color Theme From Current Settings command:

generate theme

generated theme token

Upvotes: 3

Related Questions