tessl/npm-eslint-plugin-react

React specific linting rules for ESLint

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-eslint-plugin-react
Author: tessl

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