Semantic highlighting changes colors of JSX tags

[vasilenka]

Version: 1.42.0-insider
Commit: fd13e44
Date: 2020-01-17T16:30:38.851Z
Electron: 7.1.7
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.0.0

Steps to Reproduce:

1. On a fresh-installed of VS code insiders, open a .js or .jsx file.
2. Watch carefully for some syntax colors changing after a few seconds.

Check this link for the demo: https://imgur.com/3CkhTIn
As seen on the demo, the syntax highlight on the <LatestBlog/> and <div> turned to plain color a few seconds after changing Color Theme.

Here's a snippet for testing purpose:

import React from 'react'

import Default from '../layouts/Default/Default'
import SEO from '../utils/seo'
import Intro from '../components/Intro/Intro'
import LatestBlog from '../components/LatestBlog/LatestBlog'

const Homepage = () => {
  return (
    <Default>
      <SEO
        lang="en"
        title="Home"
        author="Ongki Herlambang"
      />
      <Intro />
      <LatestBlog data={edges} />
      <div>
        Hello world!
      </div>
    </Default>
  )
}

export default Homepage

Does this issue occur when all extensions are disabled?: Yes

[IllusionMH]

Look like you need to change language from JavaScript to JavaScript React otherwise < are treated as regular less them operators.

Just add next file association to you User config or only to project using .vscode/settings.json

"files.associations": {
    "*.js": "javascriptreact"
}

[vasilenka]

@IllusionMH thank you, but still not working.

It's working just fine before with the default setup. So, unless there are some breaking changes on the latest update, I don't think we need to add additional settings just to work with JSX.

Also as you can see in my demo, the syntax highlight is working for a few seconds, but then the color changed.

[fmusayev]

Experiencing the same issue with JSX highlight

[bryonsigawin]

Version: 1.42.0-insider
Commit: fd13e44
Date: 2020-01-17T16:30:38.851Z
Electron: 7.1.7
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0

Also experiencing the same issue, even with the javascriptreact file association.

[povilasbaranovas]

Experiencing the same issue. Colors unfortunately disappear after few seconds. Same version as above.

[IllusionMH]

/confirmed

After couple of reloads I was able to reproduce it too (even with TS@next) and in TSX files.
Looks like only class components are highlighted (same color as regular class names in other places).

May be related to #86390 ?

[codewithfeeling]

Confirming this issue. Quitting the app and reloading the file fixes it but only for a few seconds. Any saves break the syntax colouring.

[synoptase]

Confirmed. Incidentally, it seems to be working in the Source Control diff tab:

[mjbvz]

Likely caused by semantic highlighting. Try setting "editor.semanticHighlighting.enabled": false to disable it