Search code examples
javascriptsyntax-highlightingvisual-studio-codevscode-extensions

How to highlight global variables in VSCode?

Is there a way to highlight global variables in VSCode using either config or extensions? I'm looking for something similar to Netbeans.

Netbeans:

Netbeans example

VSCode:

VSCode example

Solution

  • Since I posted this question, there have been some updates to how semanticTokenColorCustomizations and scopes work so I was able to highlight globals with the following settings:

        "editor.semanticTokenColorCustomizations": {
        "enabled": true,
        "rules": {
            "variable": {"bold": true}, // Bold all variables
            "variable.local": {"bold": false}, // Un-bold local variables
            "variable.defaultLibrary": {"bold": false}, // Un-bold defaultLibrary "variables" such as "console"
            "property.declaration": {"bold": false}, // Un-bold object property value shorthand
        }
    },

    However, this seems to only highlight globals that are declared (or declared in the same file). The work-around for this is to add the editor.tokenColorCustomizations to grab any variables that the semantic highlighting does not select.

        "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "variable.other.readwrite",
                "settings": {
                    "fontStyle": "bold"
                }
            }
        ]
    },

    This results in the following: Example result

    This is fairly untested and designed to work for JavaScript but I hope it's a starting point for anyone that might need this in the future.