Search code examples
reactjsphpstormphpstorm-2018.1

PhpStorm for React gives me a red underline

I'm using PhpStorm 2018.1, and coding a ReactJS based project. I was a little annoyed with the red underline which seemed to say that my code was error even though it wasn't.

Problem no.1 Problem no.2

I have followed the answers given from this forum:

  1. WebStorm/PhpStorm warning for react attributes in jsx like className
  2. PHPStorm JSX/React syntax highlighting

but this red underline still appears.

I installed a few plugins for JavaScript and ES6 debugging enter image description here enter image description here

The question is is there another PhpStorm plugin that I didn't install?

Solution

  • These errors are reported by JShint linter, not by PhpStorm itself. You have to tell JSHint that you are using ES2015 syntax. This can be done by adding 

    /*jshint esversion: 6 */

    comment to your file (http://jshint.com/docs/options/#esversion), or by specifying

    
{
  "esversion": 6
}

    in .jshintrc file. If you don't have your own config file, you can enable EcmaScript.next in Relaxing options in Settings | Languages & Frameworks | JavaScript | Code Quality Tools | JSHint

    If you didn't mean to use JSHint for linting your React application (and I'd say that this linter is a bit outdated and doesn't work well for JSX + ES6), just disable it by unchecking Enable in Settings | Languages & Frameworks | JavaScript | Code Quality Tools | JSHint