JavaScript: Using Object Property Value Shorthand loses semantic highlighting

[ImRodry]

TS Template added by @mjbvz

TypeScript Version: 4.4.-1

Search Terms

• semantic highlighting

---

Issue Type: Bug

Using the es6 syntax for object property value shorthand makes it so the used properties always have the light blue color, instead of the dark blue color of readonly properties. Here's a reproducible code snippet:

const someVariable = "value"
const someObject = {
    someProperty: "other value",
    someVariable
}

In VSCode: In the example above, someVariable shows up with a light blue color in the object declaration, whereas the expected behaviour would be a darker color that you could get from doing someVariable: someVariable:

VS Code version: Code 1.59.0 (379476f0e13988d90fab105c5c19e7abc8b1dea8, 2021-08-04T23:13:12.822Z) OS version: Windows_NT x64 10.0.19043 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz (12 x 3192)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|19.89GB (5.37GB free)| |Process Argv|D:\\Users\\rodri\\Documents\\GitHub\\hypixel-translators-bot --crash-reporter-id 1aa51578-c79e-468f-b062-c24334e21918| |Screen Reader|no| |VM|0%|

Extensions (17)

Extension|Author (truncated)|Version ---|---|--- better-comments|aar|2.1.0 jsdoc-markdown-highlighting|bie|0.0.1 vscode-eslint|dba|2.1.23 gitlens|eam|11.6.0 EditorConfig|Edi|0.16.4 prettier-vscode|esb|8.1.0 copilot|Git|1.3.2371 vscode-graphql|Gra|0.3.16 discord-vscode|icr|5.7.0 vscode-env|Iro|0.1.0 python|ms-|2021.8.1105858891 jupyter|ms-|2021.8.1236758218 remote-wsl|ms-|0.58.2 vsliveshare|ms-|1.0.4673 vetur|oct|0.34.1 vscodeintellicode|Vis|1.2.14 minecraft-lang-colorizer|zz5|1.0.0

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383cf:30185419 vspyt653:30270858 pythonvspyt602:30300191 vspor879:30202332 vspor708:30202333 vspor363:30204092 pythonvspyt639:30300192 pythontb:30283811 pythonptprofiler:30281270 vshan820:30294714 vstes263cf:30335440 pythondataviewer:30285071 pythonvsuse255:30340121 vscod805cf:30301675 pythonvspyt200:30340761 vscextlangct:30333562 binariesv615:30325510 pythonvssor306:30344512 bridge0708:30335490 pygetstartedc2:30351386 vstre464cf:30350173 bridge0723:30353136 ```

[infinnie]

You can modify someObject.someVariable and it is not a readonly property.

[ImRodry]

You can modify someObject.someVariable and it is not a readonly property.

Yeah I know but the point here is to make it easier to see where someVariable comes from and even though the property itself isn’t readonly, the property that was assigned to it is so it should be dark blue like in the second example

[mjbvz]

Highlighting someVariable as a property seems correct to me when it is being used as a property declaration

[fatcerberus]

It’s both a property declaration and a variable reference in this case, though. Kind of an ambiguous case but I would argue the latter is more useful information within the context of a larger object literal.

[ImRodry]

Well yeah since it's used as a variable I think it should have the readonly color

[RyanCavanaugh]

Its position in the object literal makes its meaning as a property name redundant, so showing the color as it would be if used as an Identifier in a normal expression position seems more useful.