or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

code-style-rules.mdcomponent-lifecycle-rules.mdindex.mdjsx-syntax-rules.mdplugin-configuration.mdprop-validation-rules.mdreact-component-rules.mdsecurity-safety-rules.md
tile.json

plugin-configuration.mddocs/

Plugin Configuration

Core plugin object and configuration presets for integrating eslint-plugin-react with ESLint in both legacy and modern flat config systems.

Capabilities

Main Plugin Export

The default export provides the complete plugin object with rules, configurations, and metadata.

/**
 * Main ESLint plugin export containing all rules and configurations
 */
const plugin: ReactPlugin = {
  /** Collection of all ESLint rules (103 rules total) */
  rules: Record<string, ESLintRule>;
  /** Predefined configurations for different React usage patterns */
  configs: ReactConfigs;
  /** Deprecated rules maintained for backward compatibility */
  deprecatedRules: Record<string, ESLintRule>;
};

interface ReactConfigs {
  /** Essential rules for React development (18 rules enabled) */
  recommended: LegacyConfig;
  /** All non-deprecated rules enabled (~85 active rules) */
  all: LegacyConfig;
  /** Configuration for React 17+ JSX transform */
  'jsx-runtime': LegacyConfig;
  /** Flat config versions for ESLint 9+ */
  flat: {
    recommended: FlatConfig;
    all: FlatConfig;
    'jsx-runtime': FlatConfig;
  };
}

Usage Examples:

// CommonJS
const reactPlugin = require('eslint-plugin-react');

// Access rules
const displayNameRule = reactPlugin.rules['display-name'];
const allRules = reactPlugin.rules;

// Access configurations
const recommendedConfig = reactPlugin.configs.recommended;
const flatRecommended = reactPlugin.configs.flat.recommended;

Legacy Configuration Format

Configurations compatible with .eslintrc configuration files.

interface LegacyConfig {
  /** Plugin names to load */
  plugins: string[];
  /** Parser options for JSX support */
  parserOptions: {
    ecmaFeatures: {
      jsx: boolean;
    };
    jsxPragma?: null; // For jsx-runtime config
  };
  /** Rule configurations mapping rule names to severity levels */
  rules: Record<string, RuleConfig>;
}

type RuleConfig = 0 | 1 | 2 | 'off' | 'warn' | 'error';

Usage Examples:

{
  "extends": ["plugin:react/recommended"],
  "plugins": ["react"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Flat Configuration Format

Modern flat configuration format for ESLint 9+.

interface FlatConfig {
  /** Plugin object mapping */
  plugins: { react: ReactPlugin };
  /** Rule configurations */
  rules: Record<string, RuleConfig>;
  /** Language options including parser configuration */
  languageOptions: {
    parserOptions: {
      ecmaFeatures: {
        jsx: boolean;
      };
      jsxPragma?: null;
    };
  };
}

Usage Examples:

import reactPlugin from 'eslint-plugin-react';

export default [
  {
    plugins: { react: reactPlugin },
    rules: reactPlugin.configs.recommended.rules,
    languageOptions: {
      parserOptions: {
        ecmaFeatures: { jsx: true }
      }
    }
  }
];

Standalone Flat Config Files

Separate configuration files in the configs/ directory for direct import.

// configs/recommended.js - Standalone recommended flat config
const recommendedFlatConfig: FlatConfig;

// configs/all.js - Standalone all rules flat config  
const allFlatConfig: FlatConfig;

// configs/jsx-runtime.js - Standalone jsx-runtime flat config
const jsxRuntimeFlatConfig: FlatConfig;

Usage Examples:

// Direct import of standalone configs
import recommendedConfig from 'eslint-plugin-react/configs/recommended';
import allConfig from 'eslint-plugin-react/configs/all';
import jsxRuntimeConfig from 'eslint-plugin-react/configs/jsx-runtime';

export default [
  recommendedConfig,
  // Override specific rules
  {
    rules: {
      'react/prop-types': 'off'
    }
  }
];

Configuration Presets

Recommended Preset

Essential rules for React development with minimal false positives.

const recommendedRules = {
  'react/display-name': 2,
  'react/jsx-key': 2,
  'react/jsx-no-comment-textnodes': 2,
  'react/jsx-no-duplicate-props': 2,
  'react/jsx-no-target-blank': 2,
  'react/jsx-no-undef': 2,
  'react/jsx-uses-react': 2,
  'react/jsx-uses-vars': 2,
  'react/no-children-prop': 2,
  'react/no-danger-with-children': 2,
  'react/no-deprecated': 2,
  'react/no-direct-mutation-state': 2,
  'react/no-find-dom-node': 2,
  'react/no-is-mounted': 2,
  'react/no-render-return-value': 2,
  'react/no-string-refs': 2,
  'react/no-unescaped-entities': 2,
  'react/no-unknown-property': 2,
  'react/prop-types': 2,
  'react/react-in-jsx-scope': 2,
  'react/require-render-return': 2
};

All Rules Preset

Enables all non-deprecated rules for comprehensive React linting.

// Dynamically generated from all active rules
const allRulesConfig: Record<string, 2 | 'error'>;

JSX Runtime Preset

Configuration for React 17+ automatic JSX transform.

const jsxRuntimeRules = {
  'react/react-in-jsx-scope': 0, // Disabled for automatic JSX transform
  'react/jsx-uses-react': 0      // Disabled for automatic JSX transform
};

Rule Configuration Helpers

Internal utilities for managing rule configurations.

/**
 * Filters rules based on predicate function
 * @param rules - Rules object to filter
 * @param predicate - Filter function
 * @returns Filtered rules object
 */
function filterRules(
  rules: Record<string, ESLintRule>, 
  predicate: (rule: ESLintRule) => boolean
): Record<string, ESLintRule>;

/**
 * Configures rules as error severity
 * @param rules - Rules object to configure
 * @returns Rule configuration with error severity
 */
function configureAsError(
  rules: Record<string, ESLintRule>
): Record<string, 2 | 'error'>;

Configuration Examples

Basic React Project

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

React 17+ with JSX Transform

{
  "extends": [
    "eslint:recommended", 
    "plugin:react/recommended",
    "plugin:react/jsx-runtime"
  ],
  "plugins": ["react"],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Strict Configuration with All Rules

{
  "extends": ["plugin:react/all"],
  "plugins": ["react"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".jsx", ".tsx"] }],
    "react/prop-types": "off"
  }
}

Modern Flat Config

import reactPlugin from 'eslint-plugin-react';

export default [
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: { react: reactPlugin },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      'react/prop-types': 'off',
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off'
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 'latest',
        sourceType: 'module'
      }
    },
    settings: {
      react: {
        version: 'detect'
      }
    }
  }
];