如何使用eslint-plugin-react来修复由Flow Function Types引起的警告？

Question

I'm getting a warning on the following line on my react component

handleToggle: Function;

I'm using eslint-plugin-react and Flow and I'm getting a warning "handleToggle should be placed after constructor". This is related to rule react/sort-comp. I tried with the following on my .eslintrc.json

 "react/sort-comp": [1, {
  "order": [
    "static-methods",
    "lifecycle",
    "everything-else",
    "render"
  ],
  "groups": {
    "lifecycle": [
      "displayName",
      "propTypes",
      "contextTypes",
      "childContextTypes",
      "/^.*: Function$/",
      "mixins",
      "statics",
      "defaultProps",
      "state",
      "constructor",
      "getDefaultProps",
      "getInitialState",
      "getChildContext",
      "componentWillMount",
      "componentDidMount",
      "componentWillReceiveProps",
      "shouldComponentUpdate",
      "componentWillUpdate",
      "componentDidUpdate",
      "componentWillUnmount"
    ]
  }
}]

But I'm unable to fix the warning. I want the Function Types before constructor the same as the other Type Definition. How can I achieve this?

Answer 1

you can now add a "new" item ( type-annotations )* to the order section in the config:

"react/sort-comp": [
  2,
  {
    "order": [
      "type-annotations",  // <-- this is "new"
      "static-methods",
      "lifecycle",
      "everything-else",
      "render"
    ],
    "groups": {
      "lifecycle": [
        "displayName",
        "propTypes",
        "contextTypes",
        "childContextTypes",
        "mixins",
        "statics",
        "defaultProps",
        "constructor",
        "getDefaultProps",
        "state",
        "getInitialState",
        "getChildContext",
        "getDerivedStateFromProps",
        "componentWillMount",
        "UNSAFE_componentWillMount",
        "componentDidMount",
        "componentWillReceiveProps",
        "UNSAFE_componentWillReceiveProps",
        "shouldComponentUpdate",
        "componentWillUpdate",
        "UNSAFE_componentWillUpdate",
        "getSnapshotBeforeUpdate",
        "componentDidUpdate",
        "componentDidCatch",
        "componentWillUnmount"
      ]
    }
  }
]

after this, eslint will stop complaining.

* found here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md#rule-options

Answer 2

The problem is that eslint-plugin-react is not aware of Flow, so there is no group for "type definitions". You can make eslint let you place your type definitions at the beginning of your component by moving "everything-else" to the top of your component (before "static-methods" , but that will also allow you to define any functions or instance variables (in case you're using them) before the constructor .

ie, change your .eslintrc.json to:

 "react/sort-comp": [1, {
  "order": [
    "everything-else",
    "static-methods",
    "lifecycle",
    "render"
  ],
  "groups": { /* ... */ }
 }]