eslint-plugin-react-hook-form icon indicating copy to clipboard operation
eslint-plugin-react-hook-form copied to clipboard

ESLint 9 / Flat Config

Open Grawl opened this issue 6 months ago • 1 comments

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;
}

Grawl avatar May 12 '25 09:05 Grawl

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
        },
    },
]

Alegiter avatar Aug 05 '25 19:08 Alegiter