How to customize color of HTML template props in Visual Studio Code?

Question

Inspecting the mustache content in the below code with Developer: Inspect TM scopes

<p>name: {{ name }}</p>

I get text.html.basic, meaning there is no separate scope for changing the color of name inside the mustache tags. Is there any other way of changing the color of template props in Visual Studio Code?

Answer 1

If you don't find a better way with scopes, you could try the highlight extension.

And this setting seems to work:

"highlight.regexes": {

    "({{[/!^>#]*\\s*)([^}]+)(\\s*}})": [
         {},  // first match group "{{" gets no color, must be here
         {
            // "overviewRulerColor": "#ffcc00",
            "color": "#f00",
            // "fontWeight": "bold"
         },
         {} // third match group "}}" gets no color, does not need to be here
     ],
}