Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(eslint-plugin-react-hooks): support flat config #30774

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 36 additions & 2 deletions packages/eslint-plugin-react-hooks/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,38 @@ npm install eslint-plugin-react-hooks --save-dev
yarn add eslint-plugin-react-hooks --dev
```

Then extend the recommended eslint config:
### Legacy Config (.eslintrc)

Extend the recommended eslint config:

```js
{
"extends": [
// ...
"plugin:react-hooks/recommended"
"plugin:react-hooks/recommended-legacy"
]
}
```

### Flat Config (eslint.config.js)

Add the recommended config

```js
import reactHooks from 'eslint-plugin-react-hooks';

export default [
// ...
reactHooks.configs['recommended-latest'],
];
```

### Custom Configuration

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

#### Legacy Config (.eslintrc)

```js
{
"plugins": [
Expand All @@ -47,6 +64,23 @@ If you want more fine-grained configuration, you can instead add a snippet like
}
```

#### Flat Config (eslint.config.js)

```js
import reactHooks from 'eslint-plugin-react-hooks';

export default [
{
files: ['**/*.{js,jsx}'],
plugins: { 'react-hooks': reactHooks },
// ...
rules: {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
}
},
];
```

## Advanced Configuration

Expand Down
55 changes: 46 additions & 9 deletions packages/eslint-plugin-react-hooks/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,54 @@
import RulesOfHooks from './RulesOfHooks';
import ExhaustiveDeps from './ExhaustiveDeps';

export const configs = {
recommended: {
plugins: ['react-hooks'],
rules: {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
},
};
const {name, version} = require('../package.json');

// All rules
export const rules = {
'rules-of-hooks': RulesOfHooks,
'exhaustive-deps': ExhaustiveDeps,
};

// Config rules
const configRules = {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
};

// Legacy config
const legacyRecommendedConfig = {
plugins: ['react-hooks'],
rules: configRules,
};

// Base plugin object
const reactHooksPlugin = {
meta: {name, version},
rules,
};

// Flat config
const flatRecommendedConfig = {
name: 'react-hooks/recommended',
plugins: {'react-hooks': reactHooksPlugin},
rules: configRules,
};

export const configs = {
/** Legacy recommended config, to be used with rc-based configurations */
'recommended-legacy': legacyRecommendedConfig,

/** Latest recommended config, to be used with flat configurations */
'recommended-latest': flatRecommendedConfig,

/**
* 'recommended' is currently aliased to the legacy / rc recommended config to maintain backwards compatibility.
* In v6, this will switch to alias the flat recommended config.
*/
recommended: legacyRecommendedConfig,
};

export default {
...reactHooksPlugin,
configs,
};
Loading