Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VScode: how-to change the color of HTML open and closing tag

How can I change the color of the HTML open/close tags in VScode to match the image below? I have tried using the Highlight Matching Tag extension and the following settings, but this only works on selecting (onFocus) of the tags. I want the actual font color for open tags to be different than all the closing tags. Thank you!

  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        "custom": {
          "color": "#007fff",
        }
      }
    },
    "closing": {
      "name": {
        "custom": {
          "color": "#F02931"
        }
      }
    }
  },

desired-output

like image 559
jonnie Avatar asked Oct 16 '22 07:10

jonnie


1 Answers

You can do this by customizing the VS Code theme that you are currently using (see the end result on the last image).

CUTOMIZING THE THEME

In the VSCode open the Command Palette by pressing Ctrl + Shift + P, and type/select Preferences: Open Settings (JSON). This will open the editor Settings .json file. Set/add new rules for the editor token color customization.

Adding the below snippet to the settings.json will change the color of the closing tags (name) in JSX, for the theme Dark (Visual Studio).

TL;DR

Paste the below snippet to your editor settings JSON, to enable the color > rules for a particular theme.

settings.json

"editor.tokenColorCustomizations": {
  "[Visual Studio Dark]": { // Name of the theme that we want to customize, same as the value from "workbench.colorTheme"
  "textMateRules": [ // TextMate grammars tokenization settings
    {
      "name": "Opening JSX tags",
      "scope": [
        "entity.name.tag.open.jsx", // HTML opening tags (in JSX)
        "support.class.component.open.jsx", // JSX Component opening tags
      ],
      "settings": {
        "foreground": "#007fff",
      }
    },
    {
      "name": "Closing JSX tags",
      "scope": [
        "entity.name.tag.close.jsx", //  HTML closing tags (in JSX)
        "support.class.component.close.jsx", // JSX Component closing tags
      ],
      "settings": {
        "foreground": "#F02931",
      }
    },
  ]
 }
}

enter image description here

SETTING ADDITIONAL SCOPES:

Additionally you can inspect the particular token (e.g. tag) in order to see the name of the scope that you want to style.

In the the Command Palette Ctrl + Shift + P open the Developer: Inspect Editor Tokens and Scopes to see the TextMate scope names of the parts (opening tag, closing tag, etc.) that you want to modify.

enter image description here

enter image description here

For a more advanced matching and going beyond jsx you may want to reference the TextMate grammars

like image 178
ross-u Avatar answered Oct 19 '22 01:10

ross-u