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

Netbeans:

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:

VSCode:

• javascript
• syntax-highlighting
• visual-studio-code
• vscode-extensions

• related: stackoverflow./questions/13882241/…? – Bergi Commented Nov 20, 2019 at 17:04
• 1 @Bergi Kind of, I don't mind about each scope level, only globals. There is a vscode-levels extension but it seems a bit messy and highlights every scope. It's also not maintained and only a concept – ButchMonkey Commented Nov 20, 2019 at 17:12
• 1 I assume I need to be looking into extensions that bring "tree sitter" or LSP functionality to VSCode – ButchMonkey Commented Nov 20, 2019 at 17:27

2 Answers 2

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:

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.

I did some research but could't really find any sort of extension to achieve this.

But, I observed a difference in the way the variable declaration is shown when we mouse hover on it anywhere in our code.

Global Variable: It just shows the variable type and name.

Local Variable: Along with name and type, it also shows the method name indicating its declared locally inside the method.

This is the only way i see to differentiate.