Skip to content

Commit 16f90e5

Browse files
committed
feat: support flat config
This change adds support for the new flat config format. I also updated the README to include usage examples. Example usage: ```js export default [ { files: ['**/*.{js,jsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, parserOptions: { ecmaVersion: 'latest', ecmaFeatures: {jsx: true}, sourceType: 'module', }, }, settings: {react: {version: '18.3'}}, ...reactHooks.configs['recommended-latest'], }, ]; ```
1 parent 603e610 commit 16f90e5

File tree

2 files changed

+82
-11
lines changed

2 files changed

+82
-11
lines changed

packages/eslint-plugin-react-hooks/README.md

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,38 @@ npm install eslint-plugin-react-hooks --save-dev
1818
yarn add eslint-plugin-react-hooks --dev
1919
```
2020

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.
2224

2325
```js
2426
{
2527
"extends": [
2628
// ...
27-
"plugin:react-hooks/recommended"
29+
"plugin:react-hooks/recommended-legacy"
2830
]
2931
}
3032
```
3133

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+
3247
### Custom Configuration
3348

3449
If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
3550

51+
#### Legacy Config (.eslintrc)
52+
3653
```js
3754
{
3855
"plugins": [
@@ -47,6 +64,23 @@ If you want more fine-grained configuration, you can instead add a snippet like
4764
}
4865
```
4966

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+
```
5084

5185
## Advanced Configuration
5286

packages/eslint-plugin-react-hooks/src/index.js

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,54 @@
1010
import RulesOfHooks from './RulesOfHooks';
1111
import ExhaustiveDeps from './ExhaustiveDeps';
1212

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');
2214

15+
// All rules
2316
export const rules = {
2417
'rules-of-hooks': RulesOfHooks,
2518
'exhaustive-deps': ExhaustiveDeps,
2619
};
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+
};

0 commit comments

Comments
 (0)