Recipes

Recipes are ready-to-use custom ESLint rule definitions built with @eslint-react/kit. They are not part of the core plugin. Instead, they are designed to be copied and pasted directly into your project. Each recipe contains one or more custom rules.

Why Recipes?

Some lint rules are inherently opinionated. They enforce a specific code style or convention that not every team agrees on. Rather than shipping these as built-in rules with fixed behavior, we provide them as recipes so you can:

• Copy the rule definition into your project.
• Customize the implementation to match your team's conventions.
• Own the code with no dependency on upstream changes you didn't ask for.

Prerequisites

Recipes require the @eslint-react/kit package:

npm install --save-dev @eslint-react/kit

Usage

Each recipe page provides:

1. Rule: A self-contained function you copy into your project (e.g. into an .config/noForwardRef.ts file).
2. Config: How to wire it up in your eslint.config.ts using eslintReactKit().use(...).
3. Examples: Code snippets demonstrating valid and invalid patterns to show what the rule catches and how to resolve it.

Here's the general pattern:

import type { RuleFunction } from "@eslint-react/kit";

function noForwardRef(): RuleFunction {
  return (context, { is }) => ({
    CallExpression(node) {
      if (is.forwardRefCall(node)) {
        context.report({ node, message: "The 'forwardRef' is deprecated in React 19. Pass 'ref' as a prop instead." });
      }
    },
  });
}

import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit from "@eslint-react/kit";
import eslintJs from "@eslint/js";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";

import { noForwardRef } from "./.config/noForwardRef";

export default defineConfig(
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      eslintJs.configs.recommended,
      tseslint.configs.recommended,
      eslintReact.configs["recommended-typescript"],
      eslintReactKit()
        .use(noForwardRef)
        .getConfig(),
    ],
    rules: {
      "@eslint-react/kit/no-forward-ref": "error",
    },
  },
);

Available Recipes