When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.
The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:
import { fixupPluginRules } from "@eslint/compat";
// Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config,
// because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
// Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
{
plugins: {
"react": reactPlugin, // remove this if you already have another config object that adds the react plugin
"react-hooks": fixupPluginRules(eslintPluginReactHooks),
},
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
},
},
Resources
- https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687
Proof it works
I've confirmed this by having a code that should error, and saw the error:
const [first, setfirst] = useState("");
useEffect(() => {
console.log(first);
}, []);
8:6 warning React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Answer from Ben Butterworth on Stack Overflow
» npm install eslint-plugin-react
Videos
When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.
The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:
import { fixupPluginRules } from "@eslint/compat";
// Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config,
// because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
// Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
{
plugins: {
"react": reactPlugin, // remove this if you already have another config object that adds the react plugin
"react-hooks": fixupPluginRules(eslintPluginReactHooks),
},
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
},
},
Resources
- https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687
Proof it works
I've confirmed this by having a code that should error, and saw the error:
const [first, setfirst] = useState("");
useEffect(() => {
console.log(first);
}, []);
8:6 warning React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[email protected] was released a few weeks ago with "stable" eslint v9 support. If you can upgrade, then see https://github.com/facebook/react/issues/28313#issuecomment-2408157792 for a sample configuration for now.
Also, follow this thread if interested in documentation refresh
» npm install eslint-plugin-react-hooks
Hey all, I am in the process of creating my own eslint version 9 set of rules with a flat config for the first time and I am wondering what you guys are using or recommending as a must have?
I use Typescript with React so thought to definitely include eslint-plugin-react and typescript-eslint. What else? I saw there is sonar eslint too but this one seems not so popular?
Do you have any "gems" that are not enabled by default or not popular but still a great addition?
I also see that many rules can be customized a bit, do you recommend that or rather not?
Really curious and interested about your experience on this, thanks!
» npm install @eslint-react/eslint-plugin
I've recently been looking at the Bullet Proof React repository and noticed that they use a few ESLint plugins. I've only ever used what comes with Next. What plugins do you use and recommend?
it seems that the following plugins are sufficient for my usage of React and Typescript.
"@typescript-eslint/eslint-plugin": "^5.59.9","@typescript-eslint/parser": "^5.59.9","eslint-plugin-react-hooks": "^4.6.0","eslint-plugin-react-refresh": "^0.4.3",
I'm unsure if eslint-plugin-react provides any useful rules.
Could you provide some examples? Thanks.