Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PHPStorm JSX/React syntax highlighting

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?
like image 649
lenny.myr Avatar asked May 18 '15 17:05

lenny.myr


People also ask

Is PhpStorm good for React?

PhpStorm provides code completion for React APIs and JSX in JavaScript code. Code completion works for React methods, React-specific attributes, HTML tags and component names, React events, component properties, and so on. Learn more from the React official website.

Does IntelliJ work with React?

IntelliJ IDEA integrates with React providing assistance in configuring, editing, linting, running, debugging, and maintaining your applications.

How do I use Isempty in React JS?

To check if a string is empty in React, access its length property and check if it's equal to 0 , e.g. if (str. length === 0) {} . If the string's length is equal to 0 , then the string is empty, otherwise it isn't empty. Copied!

How do I know if my props are empty?

Use the Object. keys() method to get an array of the object's keys. Access the length property on the array. If the array of keys has a length of 0 , then the object is empty.


1 Answers

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

like image 187
Tomasz Racia Avatar answered Sep 17 '22 18:09

Tomasz Racia