PHPStorm JSX/React syntax highlighting

Question

I'm using PHPStorm 8.0.3 for my current project, but unfortunately it doesn't support JSX. In my React components (which are then compiled by Browserify) HTML gets underlined in red and invalidated:

PHPStorm React Template

This is just a small component, but it surely gets pretty annoying with bigger ones. Also code formatting doesn't work as expected.

Is there a (hard to find) setting which enables the correct syntax highlighting?
If there is no such setting, is it possible to download a corresponding package?
If there is no support at all, how do I extend PHPStorm (maybe by a custom Color/Syntax Schema) to accept HTML within my js files?

Seems like WebStorm 9 and higher have built in JSX support - haven't seen a new version of PHPStorm, but maybe next version: http://blog.jetbrains.com/webstorm/2014/10/webstorm-9-released-meteor-support-react-and-jsx-gulp-integration-and-more/ — Traveling Tech Guy, May 18 '15 at 17:51
@TravelingTechGuy Do I then have to switch windows when I take changes in my php and js files? — lenny.myr, May 18 '15 at 18:17
PhpStorm v9 will have it. You can grab latest EAP build if you want: http://confluence.jetbrains.com/display/PhpStorm/PhpStorm+Early+Access+Program — LazyOne, May 18 '15 at 18:55
@lenny.myr no, the JSX syntax is just supported by the editor window. If you were using an editor like Sublime, you'd be adding an ES6/JSX syntax and the editor would properly highlight your code. With PHP/Web Storm, you need to wait for Jetbrains to add the feature - or look around the internet, there are all kinds of hacks to add textmate-like syntaxes to the existing editor. — Traveling Tech Guy, May 18 '15 at 19:20
PhpStorm 8, also supports JSX - you just need switch JavaScript Language version to JSX Harmory in settings. But it looks EAP has better jsx support, so I am using it. — Bogdan Savluk, May 19 '15 at 09:00

score 43 · Answer 1 · answered May 25 '15 at 18:10

43

I had the same problem and solution is to either use JSX Harmony on PHPStorm 8:

Preferences / Languages & Frameworks / JavaScript

set JavaScript language version to JSX Harmony

or move to PHPStorm 9 EAP. I hope PHPStorm 9 will be available soon, though (as I had performance issue with EAP version).

answered May 25 '15 at 18:10

Tomasz Racia

1,786
2
15
23

I did the same thing changing the language version to `JSX harmony` but it is not showing the react syntax..please help me with this – Kalanka May 15 '17 at 08:42
1

After changing `Preferences / Languages & Frameworks / JavaScript` you might want to restart PHPStorm, I needed to. – Silidrone Oct 09 '20 at 13:20

score 8 · Answer 2 · answered May 08 '18 at 05:59

8

on PHPStorm 7:

File->setting->Languages & Frameworks->JavaScript->

Select the option React JSX in the drop down list (JavaScript Language version)

answered May 08 '18 at 05:59

pedram shabani

1,654
2
20
30

3

I already switch the Javascript language version to React JSX but the "syntax error" still shows up – Ryuujo Feb 08 '19 at 03:45
In my case I had te `React Templates` plugin installed which was messing up the syntax highlighting – hugronaphor Oct 23 '19 at 08:42
This didn't work for me. I had to also click on the `...` beside the drop down and specify the directory that my project was in. – Alex Standiford Dec 10 '19 at 17:24
I do not have React JSX in the drop down list. How to make it appear in the drop down? – Akhil Mohandas Sep 07 '21 at 03:02

score -2 · Answer 3 · answered Feb 24 '21 at 09:35

-2

Preferences > Languages & Frameworks > JavaScript > JavaScript language version Choose React JSX from dropdown and wait after progress bar is completed to apply changes.

answered Feb 24 '21 at 09:35

Mohamad Darman

1
2

PHPStorm JSX/React syntax highlighting

3 Answers3

Linked