How to add color to component tags in Visual Studio Code?

Question

I am learning React, and I observe some people made the color of Component tags different from normal HTML tags under JSX format. However I am not really able to find extensions that do this (tried prettier and react snippets etc.). I wonder what enables that behavior?

Answer 1

In "settings.json":

"textMateRules": [
    {
        "name": "component tags",
        "scope": [
            "entity.name.tag", // HTML tags
            "support.class.component", // JSX/TSX Component tags
        ],
        "settings": {
            "foreground": "red",
        }
    }

Answer 2

All you have to do go to C:/->Users->"Your Username"-> .vscode->extensions and in there open the monokai pro folder, go into "themes", and edit the monokai pro json file in vscode or another suitable editor.

Using the token inspector tool I searched up the scope of the JSX custom components which is "entity.name.tag support.class.component" and then made a new rule object separating regular "entity.name.tag" which are the built-in HTML elements from the react custom components. And made the color a nice greeny aqua (See the edited JSON file below)