Semantic highlighting changes colors of JSX tags
vasilenka opened this issue ยท 20 comments
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:
- On a fresh-installed of VS code insiders, open a
.js
or.jsx
file. - 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
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"
}
@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.
Experiencing the same issue with JSX
highlight
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.
Experiencing the same issue. Colors unfortunately disappear after few seconds. Same version as above.
/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 ?
Confirming this issue. Quitting the app and reloading the file fixes it but only for a few seconds. Any saves break the syntax colouring.
Likely caused by semantic highlighting. Try setting "editor.semanticHighlighting.enabled": false
to disable it
@mjbvz yes, setting it to false
fixes the problem with highlights for me. Both this one and I assume #88997 (removes difference in highlight for classes/functions, however I'm not sure if highlight there were bad).
Are there plans to restore current (non-semantic) highlights for JSX and leave it for other places?
I can confirm the fix suggested by @mjbvz works (thanks)
Yeah, "editor.semanticHighlighting.enabled": false
solved the problem. Thank you
Would it be possible to add texmateRules options which override the rules for the semantic scope? At least for JSX/TSX files..
See https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview and will require #86390 to make it for JS/TS.
Haven't grasped yet how to add previous colors without disabling semantic highlight.
My bet is bug (or not yet implemented part) in the feature.
Doesn't have any types/modifiers to distinguish usage of class/function/variable in regular case or as JSX tag, therefore they are colored by their type, and special styling for JSX is lost.
Since extension might provide custom types/modifiers it will be easy to add jsxtag
modifier and apply special styles(matching old) for tokens with this modifier. What do you thins, @aeschli?
semantic coloring of the JSX tags was unintended. Fix 3c930f9 is in todays i-build.
Thanks, looks better now!
@aeschli is it intended that Fragment
in <React.Fragment>
is colored differently when semantic coloring applied? Moreover coloring for custom elements with static components leads to very strange results (inverse of <React.Fragment>
case)?
Initial highlight
Version: 1.42.0-insider (user setup)
Commit: c4d53a1
Date: 2020-01-23T05:39:57.148Z
OS: Windows_NT x64 10.0.19546
Repro code
New workspace with only @types/react
installed.
TS versions 3.7.5 (built-in) or 3.8.0-dev.20200122
import React from 'react';
const Custom = (props: { children?: any }) => <div></div>;
Custom.Nested1 = (props: { children?: any }) => <span></span>;
Custom.Nested2 = function (props: { children?: any }) { return <span></span>; };
function test() {
return (
<React.Fragment>
<span className="demo">demo</span>
<Custom>
<Custom.Nested1></Custom.Nested1>
<Custom.Nested2></Custom.Nested2>
</Custom>
</React.Fragment>
)
}
I just pushed a fix for the qualified JSX names.