Better syntax highlighting for destructured variables

[trongthanh]

From what I observe in Firefox and Chrome's consoles, I notice that they provide good visibility on which identifiers are the variables, which are just object's key names in a destructuring assignment.

For example, with below code:

const obj = {
    prop: {
        deeperProp: 123,
    }
};

const {prop, prop: {deeperProp: renamed}, ...rest} = obj;

Firefox console display as:

in which, prop, renamed and rest are clearly variables.

IMO, destructuring assignment with renamed variable and nested selectors make it confusing to grope which name is the final variables. With this custom syntax, I think it will really help developers especially newbies to this powerful but not easy feature of the language.

Can you help suggest a config that I can achieve such effect?

[Thom1729]

JS Custom actually does the necessary work for this (actually, the core JavaScript syntax does). However, the default color schemes do not. Example:

const { key: variable } = obj;

key is scoped meta.object-literal.key and variable is scoped meta.binding.name variable.other.readwrite.

I'm using a modified version of the built-in Mariana color scheme:

{
    "variables": <snip>,
    "globals":  <snip>,
    "rules": [
        {
            "name": "JavaScript unquoted object literal key",
            "scope": "meta.object-literal.key, meta.object-literal.key string - punctuation, meta.mapping.key string - punctuation, meta.structure.dictionary.key string - punctuation",
            "foreground": "var(blue5)"
        },
    ]
}

This causes keys to be highlighted in object literals and destructuring assignments:

I find this change to be extremely useful. I think I'll bring up the idea of adding it to the default color schemes, though there's a high bar for that.

Does this change solve your problem?

[trongthanh]

@Thom1729 Thanks for your great explanation. I tried your patch to Mariana scheme and found a small issue. Here's how it look with some nested destructuring:

All destructuring bindings without rename have object literal's key color (in this case the first prop) which doesn't help distinguish from variables and just key names.

I have tweaked the scope selector a bit at this part:

meta.object-literal.key - meta.binding.name

And now I can see what come out of destructuring assignment as variables:

So I guess you can close this ticket now.