Core plugin object and configuration presets for integrating eslint-plugin-react with ESLint in both legacy and modern flat config systems.
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;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
}
}
}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 }
}
}
}
];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'
}
}
];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
};Enables all non-deprecated rules for comprehensive React linting.
// Dynamically generated from all active rules
const allRulesConfig: Record<string, 2 | 'error'>;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
};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'>;{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"plugins": ["react"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
}
}{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime"
],
"plugins": ["react"],
"settings": {
"react": {
"version": "detect"
}
}
}{
"extends": ["plugin:react/all"],
"plugins": ["react"],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".jsx", ".tsx"] }],
"react/prop-types": "off"
}
}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'
}
}
}
];