Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

PHPStorm JSX/React syntax highlighting

Tags:

reactjs

react-jsx

phpstorm

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
Sign in to Comment

Related questions

React dropzone, how to upload image?
How does Search Engine indexing work for JavaScript web applications like REACT?
React render array of components
Check if Logged in - React Router App ES6
React Navigation: Navigate Back To Root using NavigationActions.reset, goBack and getStateForAction
How can I use react-redux useSelector in class component?
Rendering a React component inside a Bootstrap popover
Input sanitization in ReactJS
How to resize a material-ui button
why do I have to put babel-presets inside .babelrc and webpack.config.js?
Making REST calls from a react component
In reactJS, how to invoke link click via button press?
Failed to load plugin import: 'eslint-plugin-import'
How to stop npm serve
Missing "key" prop for element. (ReactJS and TypeScript)
How to use enum as props in react/typescript
How to add additional props to a React element passed in as a prop?
How to test if a component is rendered with the right props when using react-testing-library?
Unexpected use of 'self' no-restricted-globals React
@types/styled-components Duplicate identifier FormData

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!