JSX Syntax Highlighting not working

Avatar
Rasheed
Created

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.

Votes

0

Share

14 comments
Avatar
Elena Pogorelova
Created

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

1
Avatar
Rasheed
Created

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
Avatar
Elena Pogorelova
Created

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
Avatar
Rasheed
Created

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
Avatar
Elena Pogorelova
Created

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
Avatar
Rasheed
Created

Yes, completion does work for my JSX tags.

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

1
Avatar
Elena Pogorelova
Created

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
Avatar
Rasheed
Created

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
Avatar
Elena Pogorelova
Created

please upload it to file server and provide a link here

0
Avatar
Rasheed
Created

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
Avatar
Simo Tuokko
Created

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

5
Avatar
Wayne Kenneth Seymour III
Created

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

0
Avatar
Angela Inniss
Created

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
Avatar
Angela Inniss
Created

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.