react-eslint-plugin Rules I Like
An ill-configured linter can slow you down, it might do more harm than good. Let Prettier handle formatting, the linter is for Actual (Potential) Problems©. This section in this post explains it better than I could: Don’t Get Distracted by Imaginary Problems — Overreacted
eslint-plugin-react is a nice ESLint plugin. It has been around for a while and accreted a lot of rules over the years.
It has a lot of rules that are meant for class components and
propTypes that are not that really relevant anymore.
There are some truly bizarre rules as well, like
react/no-multi-comp (see this post)
Still it has valuable rules that I turn on by default. Here's my list, by category and roughly in order of importance:
react/display-nameEnsure component wrapped in
displayName. See my post on it:
Avoid anonymous components withdisplayName`
react/jsx-pascal-caseResist the urge to write components in all caps
- react/jsx-no-constructed-context-values Note that this makes no sense when the context provider is at the root of your app and can’t be re-rendered! See an overlooked factor for performance optimization in React