Individual ESLint rule modules that can be used separately for custom configuration assembly.
Comprehensive React-specific ESLint rules configuration with 80+ individual rules.
/**
* React rules module
* Usage: extends: ['eslint-config-airbnb/rules/react']
*/
const reactRulesConfig = {
plugins: ['react'],
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
rules: Record<string, ESLintRuleConfig>,
settings: {
'import/resolver': {
node: {
extensions: string[]
}
},
react: {
pragma: string,
version: string
},
propWrapperFunctions: string[]
}
};Usage Examples:
// .eslintrc.js - Custom assembly
module.exports = {
extends: [
'airbnb-base',
'eslint-config-airbnb/rules/react'
]
};
// .eslintrc.js - Mix and match rule modules
module.exports = {
extends: [
'airbnb-base',
'eslint-config-airbnb/rules/react',
'eslint-config-airbnb/rules/react-a11y'
],
rules: {
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }]
}
};React accessibility (a11y) ESLint rules configuration with comprehensive ARIA and accessibility guidelines.
/**
* React accessibility rules module
* Usage: extends: ['eslint-config-airbnb/rules/react-a11y']
*/
const reactA11yRulesConfig = {
plugins: ['jsx-a11y', 'react'],
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
rules: Record<string, ESLintRuleConfig>
};Key Accessibility Rules:
interface A11yRules {
// ARIA attributes and roles
'jsx-a11y/aria-props': 'error';
'jsx-a11y/aria-proptypes': 'error';
'jsx-a11y/aria-role': 'error';
// Interactive elements
'jsx-a11y/click-events-have-key-events': 'error';
'jsx-a11y/interactive-supports-focus': 'error';
// Form labels and controls
'jsx-a11y/label-has-associated-control': 'error';
// Images and media
'jsx-a11y/alt-text': 'error';
'jsx-a11y/media-has-caption': 'error';
// Navigation
'jsx-a11y/anchor-is-valid': 'error';
'jsx-a11y/tabindex-no-positive': 'error';
}React Hooks-specific ESLint rules for enforcing Rules of Hooks and dependency management.
/**
* React Hooks rules module
* Usage: extends: ['eslint-config-airbnb/rules/react-hooks']
*/
const reactHooksRulesConfig = {
plugins: ['react-hooks'],
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
rules: {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error'
}
};Each rule module focuses on specific aspects of JavaScript/React development:
interface RuleCategories {
// React rules module
reactRules: {
componentDefinition: string[]; // Component structure and lifecycle
jsxSyntax: string[]; // JSX formatting and syntax
propValidation: string[]; // PropTypes and prop handling
stateManagement: string[]; // State and lifecycle methods
eventHandling: string[]; // Event handlers and bindings
};
// React A11y rules module
a11yRules: {
ariaAttributes: string[]; // ARIA roles, properties, and states
keyboardNavigation: string[]; // Keyboard accessibility
semanticHTML: string[]; // Proper HTML semantics
formAccessibility: string[]; // Form labels and controls
mediaAccessibility: string[]; // Images, videos, and media
};
// React Hooks rules module
hooksRules: {
rulesOfHooks: string[]; // Hook call consistency
dependencyManagement: string[]; // Effect and memo dependencies
};
}Rule modules can be combined flexibly for custom configurations:
interface CustomAssemblyPatterns {
// Base + React only (no a11y)
basicReact: {
extends: ['airbnb-base', 'eslint-config-airbnb/rules/react'];
};
// Base + A11y only (no React components)
a11yOnly: {
extends: ['airbnb-base', 'eslint-config-airbnb/rules/react-a11y'];
};
// Custom React stack
customReact: {
extends: [
'airbnb-base',
'eslint-config-airbnb/rules/react',
'eslint-config-airbnb/rules/react-hooks'
];
};
// Complete manual assembly
fullManual: {
extends: [
'airbnb-base',
'eslint-config-airbnb/rules/react',
'eslint-config-airbnb/rules/react-a11y',
'eslint-config-airbnb/rules/react-hooks'
];
};
}Each rule module requires specific ESLint plugins:
interface ModulePluginDependencies {
// React rules module
reactRules: {
'eslint-plugin-react': string; // '^7.28.0'
'eslint-plugin-import': string; // For import resolver settings
};
// React A11y rules module
reactA11yRules: {
'eslint-plugin-jsx-a11y': string; // '^6.5.1'
'eslint-plugin-react': string; // '^7.28.0'
};
// React Hooks rules module
reactHooksRules: {
'eslint-plugin-react-hooks': string; // '^4.3.0'
};
}The package also includes a legacy configuration (deprecated):
/**
* Legacy configuration (DEPRECATED)
* Usage: extends: ['eslint-config-airbnb/legacy']
* Recommended: Use 'eslint-config-airbnb-base/legacy' instead
*/
const legacyConfig = {
extends: ['eslint-config-airbnb-base/legacy'],
rules: {}
};