The main ESLint configuration provides Airbnb's complete ruleset including ECMAScript 6+ features, React components, and JSX accessibility guidelines.
The main configuration extends eslint-config-airbnb-base and adds React-specific rules.
/**
* Main Airbnb ESLint configuration
* Usage: extends: ['airbnb']
*/
const config = {
extends: [
'eslint-config-airbnb-base',
'./rules/react',
'./rules/react-a11y'
],
rules: {}
};Usage Examples:
// .eslintrc.js - Basic setup
module.exports = {
extends: ['airbnb']
};
// .eslintrc.js - With custom overrides
module.exports = {
extends: ['airbnb'],
rules: {
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
'import/prefer-default-export': 'off'
}
};
// .eslintrc.js - With environment setup
module.exports = {
extends: ['airbnb'],
env: {
browser: true,
node: true,
jest: true
}
};The main configuration requires specific ESLint plugins to be installed:
interface PeerDependencies {
eslint: string; // '^7.32.0 || ^8.2.0'
'eslint-plugin-import': string; // '^2.25.3'
'eslint-plugin-jsx-a11y': string; // '^6.5.1'
'eslint-plugin-react': string; // '^7.28.0'
'eslint-plugin-react-hooks': string; // '^4.3.0'
}Installation:
# Using npm
npm install --save-dev eslint-config-airbnb eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
# Using npx shortcut (npm 5+)
npx install-peerdeps --dev eslint-config-airbnbThe configuration object follows standard ESLint format:
interface MainConfiguration {
extends: string[];
rules: Record<string, ESLintRuleConfig>;
}
type ESLintRuleConfig =
| 'off' | 'warn' | 'error'
| 0 | 1 | 2
| [('off' | 'warn' | 'error' | 0 | 1 | 2), ...any[]];The main configuration includes rules from multiple categories:
interface IncludedRules {
// From eslint-config-airbnb-base
es6Rules: boolean; // ECMAScript 6+ features
importRules: boolean; // Import/export statements
styleRules: boolean; // Code style and formatting
bestPracticesRules: boolean; // Best practices and error prevention
// From React rules
reactRules: boolean; // React component rules
jsxRules: boolean; // JSX syntax and formatting
// From React A11y rules
accessibilityRules: boolean; // ARIA and accessibility rules
}Rule Categories: