Skip to content

Commit

Permalink
feat: support flat config
Browse files Browse the repository at this point in the history
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'],
  },
];
```
  • Loading branch information
michaelfaith committed Oct 21, 2024
1 parent 0911120 commit fbb893e
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 11 deletions.
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,
};

0 comments on commit fbb893e

Please sign in to comment.