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 a .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

Simple

Single-purpose recipes containing one custom rule for a specific linting need.

Compound

Multi-rule recipes that bundle related rules around a specific domain (props, state, children, context).

Resources

• AST Explorer - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
• ESLint Developer Guide - Official ESLint documentation for creating custom rules.
• Using the TypeScript Compiler API - TypeScript compiler API documentation for working with type information in custom rules.