29

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.

  1. Is there a (hard to find) setting which enables the correct syntax highlighting?
  2. If there is no such setting, is it possible to download a corresponding package?
  3. 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?
Improve this question
6
  • Seems like WebStorm 9 and higher have built in JSX support - haven't seen a new version of PHPStorm, but maybe next version: blog.jetbrains.com/webstorm/2014/10/… Commented May 18, 2015 at 17:51
  • @TravelingTechGuy Do I then have to switch windows when I take changes in my php and js files? Commented May 18, 2015 at 18:17
  • PhpStorm v9 will have it. You can grab latest EAP build if you want: confluence.jetbrains.com/display/PhpStorm/… Commented May 18, 2015 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. Commented May 18, 2015 at 19:20
  • 2
    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. Commented May 19, 2015 at 9:00

3 Answers 3

Reset to default
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).

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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
After changing Preferences / Languages & Frameworks / JavaScript you might want to restart PHPStorm, I needed to.
8

on PHPStorm 7:

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

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

Improve this answer

4 Comments

I already switch the Javascript language version to React JSX but the "syntax error" still shows up
In my case I had te React Templates plugin installed which was messing up the syntax highlighting
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.
I do not have React JSX in the drop down list. How to make it appear in the drop down?
-2

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.