PhpStorm for React gives me a red underline

Question

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.

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

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

Answer 1

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