JSX Syntax Highlighting not working


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'}

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.


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 :)


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.


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


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


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



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(
<LogMonitor />

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...


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?


Yes, completion does work for my JSX tags.

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


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)?


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. 


please upload it to file server and provide a link here


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

Thanks so much for your help Elena!


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


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. 


Please sign in to leave a comment.