CODEWITHSUNDEEP
typescriptvisual-studio-codesyntax-highlighting
Duncan
Duncan

Reputation: 179

Is it possbile to dim the typescript type annotations in vscode?

I'm reading a bunch of typescript code at the moment in vscode and to my tastes having the type annotations syntax highlighted the same as the code makes it harder to skim.

I've been trying to adjust the syntax highlighter to dim (or even gray out) the type annotations using vscode.settings, but without too much luck.

Is it possible to achieve a change like shown in the attached image or am I just wasting my time on this?

(above: current syntax highlighting, below: desired highlighting)

@emeraldsanto suggested this (modified to just apply to all themes)

"editor.tokenColorCustomizations": {
  "types": "#C0C0C0"
}

almost

But it's only halfway there... is there anything that can be done about the nested types?

{edit 2} Actually it's nowhere near where I wanted to be because this greys out all types, even things like new Promise<> in the code get greyed out. That's not optional type information but critical code :(

The best I've managed to date is to look at it the other way around and highlight the parameter names in bold.

    "editor.semanticTokenColorCustomizations": {
        "rules": {
            "parameter.declaration": {
                "bold": true
            },
            "interface": "#C0C0C0"
        }
    }

I think my conclusion is that what I really want is simply not doable at the moment.

Upvotes: 3

Views: 766

Answers (2)

Magne
Magne

Reputation: 17223

Yes. Credits to @Parasomnopolis over at reddit, reproduced here for your convenience (and for quicker reference for googlers that didn't find it there):

if you are using the Visual Studio Light theme, you would put the following in your vscode settings .json file:

"editor.tokenColorCustomizations":
{
    "[Visual Studio Light]":
    {
        "textMateRules": [
        {
            "scope": [
                "support.type.primitive.ts",
                "entity.name.type.ts",
                "meta.type.tuple.ts",
                "meta.type.annotation.ts",
                "meta.type.parameters.ts",
                "keyword.operator.type.ts",
                "meta.return.type.arrow.ts",
                "keyword.operator.type.annotation.ts",
                "meta.return.type.ts",
                "punctuation.definition.typeparameters.begin.ts",
                "punctuation.definition.typeparameters.end.ts"
            ],
            "settings":
            {
                "foreground": "#0000005e"
            }
        }]
    }
},

Change the "[Visual Studio Light]" ti the name of the theme you are using.

Change the "foreground" to any color you like.

You can add and remove scopes.

You can find out the scopes of text in vscode by opening the command pallet, then chose Developer:Inspect Tokens and Scopes, then click on the text you want to inspect.

Screenshot:

enter image description here

Upvotes: 2

emeraldsanto
emeraldsanto

Reputation: 4731

Yes, you can add the following to your VSCode settings.json:

"editor.tokenColorCustomizations": {
  "[Verdandi]": {
    "types": "#C0C0C0"
  }
},

You will need to replace Verdandi with the name of your current theme.

Upvotes: 2

Related Questions