JSX Syntax Highlighting not working

Hi,

Recently I wiped my entire IntelliJ settings to start from scratch. Some setting was causing a lot of random things to show as critical errors so I decided to roll back. Things are back to normal now, with the exception of my JSX syntax highlighting. 

 

I have the following code:

renderComponent = props => <div className={props.className}>
hello. {'render string'}
</div>

And it looks like this: 

This isn't an actual component I'm using, but it does illustrate the lack of highlighting. Regular JavaScript is still highlighting fine, but I don't get code completion for components, or even syntax highlighting. 

I do have React JSX enabled in my JavaScript language settings, and as far as I can remember, that's all I had to do last time I started from scratch. Any help would be much appreciated.

14 comments
Comment actions Permalink

what color scheme is chosen in Settings | Editor | Colors & Fonts? Can you attach a scrrenshot of your whole file including its icon?

1
Comment actions Permalink

I have "Darcula" as my theme, but even the Default theme does not have syntax highlighting. Here's an example of my DevTools:

 

Code:

import React from 'react'
import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

export default createDevTools(
<DockMonitor
toggleVisibilityKey="ctrl-H"
changePositionKey="ctrl-Q"
>
<LogMonitor />
</DockMonitor>
)
1
Comment actions Permalink

here is what it looks like for me (using Darcula):

 

 

more or less the same - except for tags that are highlighted according to Colors & Fonts | XML color settings...

1
Comment actions Permalink

Interesting. The issue is that mines not turning out according to Colors and fonts in XML or HTML, it's turning out like plain text. My jsx XML tags used to be yellow like yours, which was handy for when I interpolate Javascript in jsx.

2
Comment actions Permalink

Does completion, etc. work for your JSX tags? Also, please put cursor on a tag and in Help | Find Action enter 'Jump to colors and fonts' - what entries does it jump to?

1
Comment actions Permalink

Yes, completion does work for my JSX tags.

For "Jump to colors and fonts" it jumps to General > Code > Identifier under carat

1
Comment actions Permalink

can the issue be recreated in a new project created with New/Project/React app? if yes, can you provide your settings(File/Export settings)?

1
Comment actions Permalink

Yes, the issue is recreated in a fresh React app.

My settings are being exported in a `.jar` file, and I don't seem to be able to upload .jar files to here. 

1
Comment actions Permalink

please upload it to file server and provide a link here

0
Comment actions Permalink

Interestingly enough, I restarted my computed and now I'm getting the syntax highlighting I expected to. 

Thanks so much for your help Elena!

0
Comment actions Permalink

I had this same problem, fresh Webstorm installation has mapped .jsx files as HTML not as Javascript. So if your .jsx file has both JSX-templates and JS-code, only the tags get highlighted, but cmd-clicking them doesn't work because editor things they are HTML tags.

So to fix it: Preferences -> Editor -> File Types -> Javascript -> Add registered pattern "*.jsx" and voila, it works.

---

Actually, I caused that HTML-mapping myself, as I had that done in my existing IntelliJ IDEA installation (to have some syntax coloring for JSX-files), and when I installed Webstorm I copied my IDEA configs there. So self-inflicted pain :)

3
Comment actions Permalink

Simo Tuokko thanks so much!!!  worked for me!

0
Comment actions Permalink

Hello any more suggestions?

 

I tried the above suggestions from Simo Tuokko and Elena Pogorelova but still no avail. I would like my IDE to look like the Dracula theme so i can see where JSX elements start and begin etc however at the moment i also have the same issue as Rasheed where the Dracula theme does not apply. 

0
Comment actions Permalink

OK I asked my team lead for me I had to go to Settings > Languages and Frameworks > Javascript > change JavaScript language version to "Flow"

2

Please sign in to leave a comment.