CODEWITHSUNDEEP
reactjseslintflowtype
nmunozsi
nmunozsi

Reputation: 53

How to fix warning caused by Flow Function Types using eslint-plugin-react?

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?

Upvotes: 5

Views: 1628

Answers (2)

Philipp Kyeck
Philipp Kyeck

Reputation: 18820

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

Upvotes: 2

Pedro Castilho
Pedro Castilho

Reputation: 10512

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": { /* ... */ }
 }]

Upvotes: 0

Related Questions