Setting color not displayed in editor in VS code

user_11232091 0
Viewed 99

I am trying to customize the color of HTML tags in react (.tsx files). So, I included the code below in settings.json file.

"editor.tokenColorCustomizations": {    
    "textMateRules": [
      // TextMate grammars tokenization settings
      {
        "name": "JSX tags",
        "scope": [
          "entity.name.tag", // HTML tags (in JSX)
          "entity.name.tag.html", // JSX Component tags
          "meta.tag",
          "meta.jsx"
        ],
        "settings": {
          "foreground": "#18da32"
        }
      }
    ]
  },

However, even after the settings is applied, the color does not change (the color should be like so enter image description here)

What is being displayed

enter image description here

However, when I use the developer tools it shows the right Hex code! enter image description here

The other tag is displayed correctly (the dark orange color) enter image description here

Is this some kind of bug or am i doing something wrong? I even closed VS code & started again but no use.

vscode-settings
1 Answers

your settings.json is not a valid json it is missing outer curly braces.

{
    "editor.tokenColorCustomizations": {    
    "textMateRules": [
      // TextMate grammars tokenization settings
      {
        "name": "JSX tags",
        "scope": [
          "entity.name.tag", // HTML tags (in JSX)
          "entity.name.tag.html", // JSX Component tags
          "meta.tag",
          "meta.jsx"
        ],
        "settings": {
          "foreground": "#18da32"
        }
      }
    ]
  }
}
user_82536620
Related