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

index.mddocs/

ESLint Plugin React

ESLint Plugin React is a comprehensive ESLint plugin specifically designed for React applications, offering 103 total linting rules (with approximately 85 active rules) that enforce React best practices, JSX syntax validation, component patterns, and code quality standards. The plugin includes configurable presets and supports both legacy .eslintrc and modern flat config systems.

Package Information

  • Package Name: eslint-plugin-react
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install eslint eslint-plugin-react --save-dev

Core Imports

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

For ESM:

import reactPlugin from 'eslint-plugin-react';

Basic Usage

Legacy ESLint Configuration (.eslintrc)

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

Flat Config (ESLint 9+)

import reactPlugin from 'eslint-plugin-react';

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

Architecture

ESLint Plugin React is built around several key components:

  • Rules Engine: 103 total ESLint rules (approximately 85 active, 18 deprecated) covering React best practices, JSX syntax, and component patterns
  • Configuration Presets: Pre-configured rule sets (recommended, all, jsx-runtime) for different React usage patterns
  • Settings System: Shared configuration for React version detection, component wrappers, and framework-specific settings
  • Utility Libraries: Internal utilities for React component detection, JSX analysis, and AST manipulation
  • Type Definitions: TypeScript support for rule configuration and ESLint integration

Capabilities

Plugin Configuration

Core plugin object providing rules, configurations, and metadata for ESLint integration.

interface ReactPlugin {
  /** Collection of all ESLint rules (103 total: ~85 active, ~18 deprecated) */
  rules: Record<string, ESLintRule>;
  /** Predefined configurations for different React usage patterns */
  configs: {
    recommended: ESLintConfig;
    all: ESLintConfig;
    'jsx-runtime': ESLintConfig;
    flat: {
      recommended: FlatConfig;
      all: FlatConfig;
      'jsx-runtime': FlatConfig;
    };
  };
  /** Deprecated rules maintained for backward compatibility */
  deprecatedRules: Record<string, ESLintRule>;
}

interface ESLintConfig {
  plugins: string[];
  parserOptions: {
    ecmaFeatures: {
      jsx: boolean;
    };
  };
  rules: Record<string, number | string>;
}

interface FlatConfig {
  plugins: { react: ReactPlugin };
  rules: Record<string, number | string>;
  languageOptions: {
    parserOptions: {
      ecmaFeatures: {
        jsx: boolean;
      };
    };
  };
}

Plugin Configuration

React Component Rules

Rules for React component definition, lifecycle, and best practices (25+ rules).

// Key component rules
rules: {
  'react/display-name': ESLintRule;
  'react/prop-types': ESLintRule;
  'react/require-render-return': ESLintRule;
  'react/no-direct-mutation-state': ESLintRule;
  'react/no-deprecated': ESLintRule;
  'react/no-unsafe': ESLintRule;
  // ... additional component rules
}

React Component Rules

JSX Syntax Rules

Rules for JSX formatting, structure, and best practices (30+ rules).

// Key JSX rules
rules: {
  'react/jsx-key': ESLintRule;
  'react/jsx-no-duplicate-props': ESLintRule;
  'react/jsx-no-undef': ESLintRule;
  'react/jsx-uses-vars': ESLintRule;
  'react/jsx-closing-bracket-location': ESLintRule;
  'react/jsx-indent': ESLintRule;
  // ... additional JSX rules
}

JSX Syntax Rules

Security and Safety Rules

Rules for preventing common security issues and unsafe patterns (15+ rules).

// Key security rules
rules: {
  'react/no-danger': ESLintRule;
  'react/no-danger-with-children': ESLintRule;
  'react/jsx-no-script-url': ESLintRule;
  'react/jsx-no-target-blank': ESLintRule;
  'react/no-find-dom-node': ESLintRule;
  // ... additional security rules
}

Security and Safety Rules

Component Lifecycle Rules

Rules for React component lifecycle methods and state management (10+ rules).

// Key lifecycle rules
rules: {
  'react/no-did-mount-set-state': ESLintRule;
  'react/no-did-update-set-state': ESLintRule;
  'react/no-will-update-set-state': ESLintRule;
  'react/no-access-state-in-setstate': ESLintRule;
  'react/no-redundant-should-component-update': ESLintRule;
  // ... additional lifecycle rules
}

Component Lifecycle Rules

Prop Types and Validation Rules

Rules for PropTypes usage, validation, and type safety (10+ rules).

// Key prop validation rules
rules: {
  'react/prop-types': ESLintRule;
  'react/default-props-match-prop-types': ESLintRule;
  'react/require-default-props': ESLintRule;
  'react/forbid-prop-types': ESLintRule;
  'react/sort-prop-types': ESLintRule;
  // ... additional prop rules
}

Prop Types and Validation Rules

Code Style and Organization Rules

Rules for consistent code formatting and component organization (15+ rules).

// Key style rules
rules: {
  'react/jsx-sort-props': ESLintRule;
  'react/sort-comp': ESLintRule;
  'react/self-closing-comp': ESLintRule;
  'react/jsx-boolean-value': ESLintRule;
  'react/jsx-pascal-case': ESLintRule;
  // ... additional style rules
}

Code Style and Organization Rules

Plugin Settings

ESLint Plugin React recognizes several shared settings for customizing behavior:

interface ReactSettings {
  react: {
    /** React version - "detect" automatically detects installed version */
    version?: string | "detect";
    /** JSX pragma function name (default: "React") */
    pragma?: string;
    /** JSX Fragment name (default: "Fragment") */
    fragment?: string;
    /** Component factory function regex (default: "createReactClass") */
    createClass?: string;
    /** Flow version for compatibility */
    flowVersion?: string;
  };
  /** Functions that wrap propTypes definitions */
  propWrapperFunctions?: Array<string | { property: string; object?: string; exact?: boolean }>;
  /** Functions that wrap components (HOCs, etc.) */
  componentWrapperFunctions?: Array<string | { property: string; object?: string }>;
  /** Components used as form alternatives */
  formComponents?: Array<string | { name: string; formAttribute: string | string[] }>;
  /** Components used as link alternatives */
  linkComponents?: Array<string | { name: string; linkAttribute: string | string[] }>;
}

Types

interface ESLintRule {
  meta: {
    docs: {
      description: string;
      category: string;
      recommended: boolean;
      url: string;
    };
    messages: Record<string, string>;
    schema: any[];
    type?: 'problem' | 'suggestion' | 'layout';
    fixable?: 'code' | 'whitespace';
    deprecated?: boolean;
  };
  create: (context: ESLintRuleContext) => ESLintRuleListener;
}

interface ESLintRuleContext {
  getSourceCode(): SourceCode;
  report(descriptor: ReportDescriptor): void;
  options: any[];
  settings: Record<string, any>;
  // ... additional ESLint context properties
}

interface ESLintRuleListener {
  [key: string]: (node: ASTNode) => void;
}

interface SourceCode {
  getText(node?: ASTNode): string;
  getTokens(node: ASTNode): Token[];
  // ... additional SourceCode methods
}

interface ReportDescriptor {
  node: ASTNode;
  message: string;
  data?: Record<string, any>;
  fix?: (fixer: RuleFixer) => FixerResult;
}

interface ASTNode {
  type: string;
  range: [number, number];
  loc: {
    start: { line: number; column: number };
    end: { line: number; column: number };
  };
  [_: string]: any; // Dynamic properties for different node types
}

// Internal plugin type definitions (from lib/types.d.ts)
interface TypeDeclarationBuilder {
  (annotation: ASTNode, parentName: string, seen: Set<ASTNode>): object;
}

interface TypeDeclarationBuilders {
  [k: string]: TypeDeclarationBuilder;
}

interface UnionTypeDefinition {
  type: 'union' | 'shape';
  children: unknown[];
}

interface Token {
  type: string;
  value: string;
  range: [number, number];
  loc: {
    start: { line: number; column: number };
    end: { line: number; column: number };
  };
}

interface RuleFixer {
  insertTextAfter(node: ASTNode, text: string): FixerResult;
  insertTextBefore(node: ASTNode, text: string): FixerResult;
  replaceText(node: ASTNode, text: string): FixerResult;
  // ... additional fixer methods
}

interface FixerResult {
  range: [number, number];
  text: string;
}