WebStorm inspector throws warning when setting initial React state with ES6

Question

I've been working on a React web app and have recently upgraded from WebStorm 10 to 2016.1. I've been pleased with the new version so far, save for a couple of inspector quirks that I'd rather not have present if I can help it, one of which I have not been able to find a fix for.

I'm using ES6 classes for the the declaration of all of my React components and in every instance where I am setting a state, WebStorm is throwing an unresolved variable warning on the .state method.

Code snippet in question:

import React from "react";
import autobind from 'autobind-decorator';

@autobind
class List extends React.Component{
  constructor() {
    super();

    this.state = {
      name: "List",
      items: {},
      history: {},
      suggestions: [],
      highlightIndex: 0,
      suggestionsHover: false,
      autoDelete: true,
      delta: 0,
      mouse: 0,
      isPressed: false,
      lastPressed: 0,
      order: []
    }
  }

The warning:

Unresolved variable state

It should be noted that this warning did not appear for me in WebStorm 10 and that the warning carries over to other instances of setting state (ie .setState). It should also be noted that I am using babelify to transpile my code down to ES5 as well as autobind-decorator as shown.

Any help or insight would be appreciated. Thanks and let me know if I need to provide any other information.

Answer 1

Try setting up code assistance with a TypeScript definition file. I do not mean transition your code to TypeScript. Check out this blog post from JetBrains about the subject:

https://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/

Basically, go into WebStorm's preferences. Down in: Languages & Frameworks > JavaScript > Libraries click the Download button. Search for React (and whatever else is in that list that could help), then click Download & Install. This should help remove some of those ugly warnings.

Now, if only WebStorm would be able to apply PropTypes to the props object, we'd be able to get those "unresolved variable/functions/method" warnings to go away.

Answer 2

This is a known issue.

The bug has been fixed in version 2016.2 (see: https://youtrack.jetbrains.com/issue/WEB-20884).

As soon as this update lands, this.state, this.props and other currently unresolved variables will be resolved.