[react] Extend eslint-plugin-react-hooks and eslint-plugin-jsx-a11y
atdrago opened this issue · comments
The Square React ESLint configs should be aware of the Rules of Hooks and common accessibility rules when building React apps. Common issues with React hooks are missing dependencies in hooks, and conditionally calling hooks. Common accessibility issues in React are missing alt
attributes on images, and missing labels on input fields.
We can use two ESLint plugins to help with these:
- eslint-plugin-react-hooks - Adds rules to ESLint to ensure the rules of hooks are enforced
- eslint-plugin-jsx-a11y - Adds rules to ESLint to call out common accessibility mistakes
This change can be made to the base react
config here: https://github.com/square/eslint-plugin-square/blob/master/lib/config/react.js#L6
I'm happy to make a PR for this change if others feel these rules are useful.
These are two of the most popular ESLint plugins, so I think it's a good idea to consider them for the react
config. Will wait for some feedback from our other React devs, but PR is welcome.