CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-config-airbnb

Airbnb's comprehensive ESLint configuration as an extensible shared config for JavaScript and React projects

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

rule-modules.mddocs/

Rule Modules

Individual ESLint rule modules that can be used separately for custom configuration assembly.

Capabilities

React Rules Module

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 A11y Rules Module

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 Rules Module

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

Rule Categories

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

Individual Rule Module Usage

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

Plugin Dependencies by Module

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

Legacy Configuration

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: {}
};

Install with Tessl CLI

npx tessl i tessl/npm-eslint-config-airbnb

docs

base-configuration.md

hooks-configuration.md

index.md

legacy-configuration.md

main-configuration.md

rule-modules.md

whitespace-configuration.md

tile.json