ESLint
React
Recommended configuration for React is to use recommended presets.
"extends": [
"plugin:react/recommended",
"plugin:react-hooks/recommended"
]
React plugin
https://www.npmjs.com/package/eslint-plugin-react
"extends": [
"plugin:react/recommended"
]
Part of "plugin:react/recommended"
is parserOptions.ecmaFeatures.jsx
.
plugins: [
'react'
],
rules: {
// recommended rules
}
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
Plugin still requires settings for react. It warns when version settings is missing. It will default to "detect" in the future.
https://github.com/yannickcr/eslint-plugin-react#configuration
"settings": {
"react": {
"version": "detect"
}
}
"plugin:react/all"
configuration pairs well with the eslint:all
rule.
"extends": [
"eslint:all",
"plugin:react/all"
]
React hooks plugin
https://www.npmjs.com/package/eslint-plugin-react-hooks
eslint-plugin-react-hooks
by facebook/react
{
"extends": [
"plugin:react-hooks/recommended"
]
}
It has so far only 2 rules.
react-hooks/rules-of-hooks
is checking proper use of hooks https://reactjs.org/docs/hooks-rules.html.
react-hooks/exhaustive-deps
validates dependencies. They recommend to not use the dependencies for custom hooks.