feat(eslint-plugin-react-hooks): support flat config (#30774)
michael faith committed
Jan 16, 2025 at 17:39 UTC
61e713c1d31976175316c8256f4be14ba8bbdb29
2 files changed
+82
-11
packages/eslint-plugin-react-hooks/README.md
+36
-2
@@ -18,21 +18,38 @@ npm install eslint-plugin-react-hooks --save-dev
18
yarn add eslint-plugin-react-hooks --dev
19
```
20
21
-Then extend the recommended eslint config:
21
+### Legacy Config (.eslintrc)
22
+
23
+If you are still using ESLint below 9.0.0, please continue to use `recommended-legacy`. To avoid breaking changes, we still support `recommended` as well, but note that this will be changed to alias the flat recommended config in v6.
24
25
```js
26
{
27
"extends": [
28
// ...
27
- "plugin:react-hooks/recommended"
29
+ "plugin:react-hooks/recommended-legacy"
30
]
31
}
32
```
33
34
+### Flat Config (eslint.config.js)
35
+
36
+For [ESLint 9.0.0 and above](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/) users, add the `recommended-latest` config.
37
+
38
+```js
39
+import reactHooks from 'eslint-plugin-react-hooks';
40
+
41
+export default [
42
+ // ...
43
+ reactHooks.configs['recommended-latest'],
44
+];
45
+```
46
+
47
### Custom Configuration
48
49
If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
50
51
+#### Legacy Config (.eslintrc)
52
+
53
```js
54
{
55
"plugins": [
@@ -47,6 +64,23 @@ If you want more fine-grained configuration, you can instead add a snippet like
64
}
65
```
66
67
+#### Flat Config (eslint.config.js)
68
+
69
+```js
70
+import reactHooks from 'eslint-plugin-react-hooks';
71
+
72
+export default [
73
+ {
74
+ files: ['**/*.{js,jsx}'],
75
+ plugins: { 'react-hooks': reactHooks },
76
+ // ...
77
+ rules: {
78
+ 'react-hooks/rules-of-hooks': 'error',
79
+ 'react-hooks/exhaustive-deps': 'warn',
80
+ }
81
+ },
82
+];
83
+```
84
85
## Advanced Configuration
86
packages/eslint-plugin-react-hooks/src/index.js
+46
-9
@@ -10,17 +10,54 @@
10
import RulesOfHooks from './RulesOfHooks';
11
import ExhaustiveDeps from './ExhaustiveDeps';
12
13
-export const configs = {
14
- recommended: {
15
- plugins: ['react-hooks'],
16
- rules: {
17
- 'react-hooks/rules-of-hooks': 'error',
18
- 'react-hooks/exhaustive-deps': 'warn',
19
- },
20
- },
21
-};
13
+const {name, version} = require('../package.json');
14
15
+// All rules
16
export const rules = {
17
'rules-of-hooks': RulesOfHooks,
18
'exhaustive-deps': ExhaustiveDeps,
19
};
20
+
21
+// Config rules
22
+const configRules = {
23
+ 'react-hooks/rules-of-hooks': 'error',
24
+ 'react-hooks/exhaustive-deps': 'warn',
25
+};
26
+
27
+// Legacy config
28
+const legacyRecommendedConfig = {
29
+ plugins: ['react-hooks'],
30
+ rules: configRules,
31
+};
32
+
33
+// Base plugin object
34
+const reactHooksPlugin = {
35
+ meta: {name, version},
36
+ rules,
37
+};
38
+
39
+// Flat config
40
+const flatRecommendedConfig = {
41
+ name: 'react-hooks/recommended',
42
+ plugins: {'react-hooks': reactHooksPlugin},
43
+ rules: configRules,
44
+};
45
+
46
+export const configs = {
47
+ /** Legacy recommended config, to be used with rc-based configurations */
48
+ 'recommended-legacy': legacyRecommendedConfig,
49
+
50
+ /** Latest recommended config, to be used with flat configurations */
51
+ 'recommended-latest': flatRecommendedConfig,
52
+
53
+ /**
54
+ * 'recommended' is currently aliased to the legacy / rc recommended config) to maintain backwards compatibility.
55
+ * This is deprecated and in v6, it will switch to alias the flat recommended config.
56
+ */
57
+ recommended: legacyRecommendedConfig,
58
+};
59
+
60
+export default {
61
+ ...reactHooksPlugin,
62
+ configs,
63
+};