JS semantic highlighting in some instances makes code actually harder to read

[CherryDT]

Issue Type: Bug

For a few days now I'm seeing an issue with JS syntax highlighting. I'm using latest VSCode Insiders and I tried with extensions disabled, and it still happens.

Suppose I have a JS file with these contents:

console.log('hi')

const test = {
  aaa: '1',
  bbb: String
}

When I start VSCode, initially it looks correct:

But after ~10 seconds, it changes to a slightly messed-up state:

Notice how the console became light-blue and bbb became yellow! (I noticed that what makes object keys yellow is when their value is a single word that happens to be highlighted in green.)

It stays this way from then on. This makes my JS files much harder to read.

VS Code version: Code - Insiders 1.43.0-insider (9c341b3, 2020-02-20T05:39:38.179Z)
OS version: Windows_NT x64 10.0.18363
Remote OS version: Linux x64 4.4.0-18362-Microsoft

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz (4 x 2808)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off_ok webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	15.83GB (5.65GB free)
Process Argv
Screen Reader	no
VM	0%

Item	Value
Remote
OS	Linux x64 4.4.0-18362-Microsoft
CPUs	Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz (4 x 2808)
Memory (System)	15.83GB (5.68GB free)
VM	0%

Extensions: none

[IllusionMH]

This works as intended after implementation of Semantic highlighting for TypeScript & JavaScrip

It is enabled by default in Insider builds and can be turned off with "editor.semanticHighlighting.enabled": false to always use highlight based on TM grammars.

/cc @aeschli

[aeschli]

Interesting example.

• console got classified as a variable, as that's what it is. (Semantic highlighting has no concept of library variables and functions)
• bbb got classified as member as String is callable. Although that's true (String(1)") that's not what users typically do with Strings.

[CherryDT]

Ah. It seems this feature is working against me. Thanks, I'll just disable it.

The problem is, it causes this sort of messed-up code for things like Mongoose model definitions:

(also I think it is very useful to have console green by default, at least for me. Makes it super easy to navigate code since log output typically gives information about the surrounding code. But that could just be how my habit developed - I noticed this only now that it didn't work anymore!)

[aeschli]

I fixed the String, Number and Date issue: aeschli/typescript-vscode-sh-plugin@102a3a1

[aeschli]

I created #91090 for supporting different rendering of the 'standard' types and variables (such as 'console'.

Closing this issue as dup of #91090

[IllusionMH]

Would it change what colors are applied in case of React component?

Will a instead will be colored as usual variable (same as b)? Or getProperties doesn't relate to keyof?