Eslint-plugin-react: sort-comp: 'instance-variables' doesn't work properly

[m10]

When enabling sort-comp "react/sort-comp": 1 with [email protected]
i would expect that instance properties should be placed at the beginning of the class definition.
But with code like

class MyComp extends Component {
  myProp = null;
  state = {...}

  componentWillReceiveProps(props) {...}
  render() {...}
}

i get the following warning:

myProp should be placed after componentWillReceiveProps  react/sort-comp

ref: #1587

[ljharb]

Did you specify an ordering? The default ordering doesn’t include instance methods or instance variables.

[m10]

no i did not specify any custom ordering. I'd expect that the sorting order of custom properties is at least ignored (if not enforced to the top) by default

[ljharb]

Anything that's not explicitly specified is grouped under "everything-else", per the docs.

[m10]

Yes, I understood that. But it is a weird default that instance properties should be placed somewhere in the middle of the class body

[ljharb]

They’re not yet part of the language, and when the rule was created, they didn’t exist yet :-)

[m10]

well, then it should be changed now that they exist?

[ljharb]

That would be a breaking change; next time we do one, we can change that default. For now, you’ll need to manually specify your ordering.

[m10]

alright! Thanks for the feedback!

[DominicTobias]

These should really go at the top without generating an eslint error, they shouldn't be bundled into "everything else"

They are stage 3 and not experimental https://github.com/tc39/proposal-class-fields

[ljharb]

Stage 3 is still experimental; only stage 4 is final.

Again, you can add this category yourself to your own config - and in the next major, it’ll be a default.

[serhiipalash]

Hi @ljharb! Is it possible to make instance-variables work with [email protected] (latest at the moment)?

Here is our rule config

{
  "rules": {
    "react/sort-comp": [
      "warn",
      {
        "order": [
          "static",
          "static-methods",
          "state",
          "instance-variables",
          "/^constructor/",
          "render",
          "lifecycle",
          "/^_.+$/",
          "everything-else"
        ],
        "groups": {
          "lifecycle": [
            "componentWillMount",
            "componentDidMount",
            "componentWillReceiveProps",
            "shouldComponentUpdate",
            "componentWillUpdate",
            "componentDidUpdate",
            "componentWillUnmount"
          ]
        }
      }
    ]
  }
}

but it seems like instance-variables doesn't have any affect. All instance variables are warned and asked to be placed at the bottom of class.

[serhiipalash]

Somehow everything works fine, when I run eslint in Terminal, but in Sublime instance-variables are highlighted as warnings, if they are at the top.

[ljharb]

@serhiipalash that implies that sublime isn't using your local eslint - if you have a global one installed, try removing it.

[serhiipalash]

@ljharb actually the problem was with create-react-app. It goes with its own ESLint config and installs eslint package with different from latest version.