eslint-plugin-react-hook-form
eslint-plugin-react-hook-form copied to clipboard
ESLint 9 / Flat Config
I want to use eslint-plugin-react-hook-form with ESLint 9 / Flat Config + eslint.config.ts
Currently, I configure it like this:
import { fixupConfigRules } from '@eslint/compat';
import { FlatCompat } from "@eslint/eslintrc";
import { configs } from 'eslint-plugin-react-hook-form';
const compat = new FlatCompat({
baseDirectory: resolve("."),
});
export default [
// ...
fixupConfigRules(compat.config(configs.recommended)),
fixupConfigRules(compat.config(configs['react-compiler'])),
];
Plus this:
declare module 'eslint-plugin-react-hook-form' {
import { type Linter, type Rule } from 'eslint';
export const configs: {
'recommended': Linter.LegacyConfig;
'react-compiler': Linter.LegacyConfig;
};
const rules: {
'react-hook-form/destructuring-formstate': Rule.RuleModule;
'react-hook-form/no-access-control': Rule.RuleModule;
'react-hook-form/no-nested-object-setvalue': Rule.RuleModule;
'react-hook-form/no-use-watch': Rule.RuleModule;
};
const plugin: {
configs: typeof configs;
rules: typeof rules;
};
export default plugin;
}
This setup works for me No need to declare module, no FlatCompat
import { fixupPluginRules } from '@eslint/compat';
import reactHookForm from 'eslint-plugin-react-hook-form';
export default [
// other rules/plugins
{
plugins: {
'react-hook-form': fixupPluginRules(reactHookForm),
},
rules: {
...reactHookForm.configs.recommended.rules,
// overrides
},
},
]