Make VSCode Variables have Colour

Question

I would like to make variables displayed with colours.

This is how it looks:

This is how I want it to be:

Looking through here, I cannot find any settings that allow me to change this.

Answer 1

Try this setting in your settings.json:

 "editor.tokenColorCustomizations": {
    "variables": "#f00"
 },

There are a few such simple token color customizations available: variables, comments, keywords, functions, numbers, strings and types. Those only allow setting the color though.

If you use "textMateRules" you can set more properties. For example:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "comment",
      "settings": {
        "fontStyle": "italic",
        "foreground": "#C69650"
      }
    }
  ]
},

Answer 2

This is working for me. It makes it look like the default Javascript formatting as far as I can see.

In settings.json

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "meta.function-call.generic.python",
        "settings": {
          "foreground": "#DCDCAA"
        }
      },
      {
        "scope": "source.python",
        "settings": {
          "foreground": "#9CDCFE"
        }
      },
      {
        "scope": "punctuation.definition.string.begin",
        "settings": {
          "foreground": "#ce9178"
        }
      },
      {
        "scope": "punctuation.definition.string.end",
        "settings": {
          "foreground": "#ce9178"
        }
      },
      {
        "scope": "punctuation",
        "settings": {
          "foreground": "#dfdfdf"
        }
      }
    ]
}