How to add to WebStorm linting to help with new React Hooks Proposal

I would like webstorm to show me errors that don't conform to the react hooks proposal in react. See the attached screen shot for the config I'm looking to setup in react.

 

3 comments

Hmm... And what is the problem? Do you mean that eslint-plugin-react-hooks errors are not shown in the IDE when ESLint support is enabled?

0

I'm expecting that the code below should show a lint error because hooks are only suppose to work in functions.

https://reactjs.org/docs/hooks-rules.html

 

import React, {useState} from 'react';
import AxiosHooks from "../src/AxiosHooks";

class axioshooks extends Component {
render() {
const [data, setData] = useState([]);
return (
<div><AxiosHooks/></div>
);
}
}
export default axioshooks;
0

Must be an issue with react-hooks ESLint plugin

I have checked that errors are correctly highlighted in Webstorm when using hooks in if(), for example:

And the same issue is reported when running ESLint in terminal:

error    React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

but no issues are reported when using hooks in class componets similar to yours, neither in editor nor in cli/while building the app.

I'd suggest reporting this to https://github.com/facebook/react/issues

0

Please sign in to leave a comment.