diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md index d7a3e7d39cdee..7e84d936d5c90 100644 --- a/packages/eslint-plugin-react-hooks/README.md +++ b/packages/eslint-plugin-react-hooks/README.md @@ -18,7 +18,9 @@ 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 { @@ -29,10 +31,25 @@ Then extend the recommended eslint config: } ``` +### Flat Config (eslint.config.js) + +Add the recommended config + +```js +import reactHooks from 'eslint-plugin-react-hooks'; + +export default [ + // ... + reactHooks.flatConfigs.recommended, +]; +``` + ### 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": [ @@ -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 diff --git a/packages/eslint-plugin-react-hooks/src/index.js b/packages/eslint-plugin-react-hooks/src/index.js index d8ff02e7b144f..9021dfa9b0f00 100644 --- a/packages/eslint-plugin-react-hooks/src/index.js +++ b/packages/eslint-plugin-react-hooks/src/index.js @@ -10,17 +10,45 @@ import RulesOfHooks from './RulesOfHooks'; import ExhaustiveDeps from './ExhaustiveDeps'; +const {name, version} = require('../package.json'); + +// All rules +export const rules = { + 'rules-of-hooks': RulesOfHooks, + 'exhaustive-deps': ExhaustiveDeps, +}; + +// Rule configs +const configRules = { + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', +}; + +// Legacy configs export const configs = { recommended: { plugins: ['react-hooks'], - rules: { - 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': 'warn', - }, + rules: configRules, }, }; -export const rules = { - 'rules-of-hooks': RulesOfHooks, - 'exhaustive-deps': ExhaustiveDeps, +// Base plugin object +const reactHooksPlugin = { + meta: {name, version}, + rules, +}; + +// Flat configs +export const flatConfigs = { + recommended: { + name: 'react-hooks/recommended', + plugins: {'react-hooks': reactHooksPlugin}, + rules: configRules, + }, +}; + +export default { + ...reactHooksPlugin, + configs, + flatConfigs, };