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

whitespace-configuration.mddocs/

Whitespace Configuration

Special ESLint configuration that errors only on whitespace/formatting rules while converting other rule violations to warnings.

Capabilities

Whitespace-Only Configuration

Dynamically processes the base Airbnb configuration to modify rule severities, keeping only whitespace rules as errors.

/**
 * Whitespace configuration that errors on formatting rules only
 * Usage: extends: ['airbnb/whitespace']
 */
const whitespaceConfig = {
  // Dynamic configuration based on base config
  extends: string[];
  rules: Record<string, ESLintRuleConfig>;
};

Usage Examples:

// .eslintrc.js - Whitespace errors only
module.exports = {
  extends: ['airbnb/whitespace']
};

// .eslintrc.js - Combined with other configs
module.exports = {
  extends: ['airbnb/whitespace'],
  rules: {
    // Additional custom rules
    'no-console': 'error'
  }
};

// .eslintrc.js - For pre-commit hooks (format checking)
module.exports = {
  extends: ['airbnb/whitespace'],
  env: {
    browser: true,
    node: true
  }
};

Dynamic Rule Processing

The whitespace configuration uses ESLint APIs to dynamically modify rule severities:

/**
 * Processes base configuration to modify rule severities
 * @param rulesToError - Array of rule names to keep as errors
 * @param config - Base ESLint configuration
 * @returns Modified configuration with adjusted severities
 */
function onlyErrorOnRules(
  rulesToError: string[],
  config: ESLintConfig
): ESLintConfig;

interface ProcessingFunctions {
  getSeverity(ruleConfig: ESLintRuleConfig): 'off' | 'warn' | 'error';
  onlyErrorOnRules(rulesToError: string[], config: ESLintConfig): ESLintConfig;
}

Whitespace Rules List

Contains 64 specific ESLint rules considered whitespace/formatting rules:

/**
 * Array of ESLint rule names that are considered whitespace/formatting rules
 */
const whitespaceRules: string[] = [
  // Core ESLint whitespace rules
  'array-bracket-newline',
  'array-bracket-spacing',
  'array-element-newline',
  'arrow-spacing',
  'block-spacing',
  'comma-spacing',
  'computed-property-spacing',
  'dot-location',
  'eol-last',
  'func-call-spacing',
  'function-paren-newline',
  'generator-star-spacing',
  'implicit-arrow-linebreak',
  'indent',
  'key-spacing',
  'keyword-spacing',
  'line-comment-position',
  'linebreak-style',
  'multiline-ternary',
  'newline-per-chained-call',
  'no-irregular-whitespace',
  'no-mixed-spaces-and-tabs',
  'no-multi-spaces',
  'no-regex-spaces',
  'no-spaced-func',
  'no-trailing-spaces',
  'no-whitespace-before-property',
  'nonblock-statement-body-position',
  'object-curly-newline',
  'object-curly-spacing',
  'object-property-newline',
  'one-var-declaration-per-line',
  'operator-linebreak',
  'padded-blocks',
  'padding-line-between-statements',
  'rest-spread-spacing',
  'semi-spacing',
  'semi-style',
  'space-before-blocks',
  'space-before-function-paren',
  'space-in-parens',
  'space-infix-ops',
  'space-unary-ops',
  'spaced-comment',
  'switch-colon-spacing',
  'template-tag-spacing',
  
  // Import plugin whitespace rules
  'import/newline-after-import',
  
  // React plugin whitespace rules
  'react/jsx-child-element-spacing',
  'react/jsx-closing-bracket-location',
  'react/jsx-closing-tag-location',
  'react/jsx-curly-spacing',
  'react/jsx-equals-spacing',
  'react/jsx-first-prop-newline',
  'react/jsx-indent',
  'react/jsx-indent-props',
  'react/jsx-max-props-per-line',
  'react/jsx-one-expression-per-line',
  'react/jsx-space-before-closing',
  'react/jsx-tag-spacing',
  'react/jsx-wrap-multilines'
];

ESLint API Compatibility

The whitespace configuration automatically detects and supports both legacy CLIEngine and modern ESLint APIs through dual implementation files:

interface ESLintCompatibility {
  // Legacy API (ESLint < 7) - whitespace.js
  CLIEngine?: {
    new(options: any): {
      getConfigForFile(filePath: string): { rules: Record<string, any> };
    };
  };
  
  // Modern API (ESLint 7+) - whitespace-async.js
  ESLint?: {
    new(options: any): {
      calculateConfigForFile(filePath: string): Promise<{ rules: Record<string, any> }>;
    };
  };
}

Implementation Files

The whitespace configuration uses two implementation files for ESLint API compatibility:

interface ImplementationFiles {
  // Primary implementation (whitespace.js)
  primaryImpl: {
    file: 'whitespace.js';
    api: 'CLIEngine (legacy)';
    method: 'getConfigForFile()';
    execution: 'synchronous';
  };
  
  // Alternative implementation (whitespace-async.js)
  alternativeImpl: {
    file: 'whitespace-async.js';
    api: 'ESLint (modern)';
    method: 'calculateConfigForFile()';
    execution: 'asynchronous';
    fallback: 'when CLIEngine unavailable';
  };
}

Implementation Selection Logic:

// Pseudocode for implementation selection
if (CLIEngine) {
  // Use synchronous whitespace.js with CLIEngine
  module.exports = onlyErrorOnRules(whitespaceRules, baseConfig);
} else {
  // Fall back to asynchronous whitespace-async.js with ESLint API
  module.exports = JSON.parse(execSync('./whitespace-async.js'));
}

Configuration Processing

The whitespace configuration modifies rule severities based on whitespace rule classification:

interface RuleProcessing {
  // Rules in whitespaceRules array -> kept as 'error'
  whitespaceRules: 'error';
  
  // Rules not in whitespaceRules array with 'error' severity -> changed to 'warn'
  otherErrorRules: 'warn';
  
  // Rules with 'warn' or 'off' severity -> unchanged
  nonErrorRules: 'warn' | 'off';
}

Processing Logic:

// Pseudocode for rule processing
if (ruleName in whitespaceRules) {
  // Keep whitespace rules as errors
  severity = originalSeverity;
} else if (originalSeverity === 'error') {
  // Convert non-whitespace errors to warnings
  severity = 'warn';
} else {
  // Keep warnings and off rules unchanged
  severity = originalSeverity;
}

Dependencies

The whitespace configuration requires additional dependencies:

interface WhitespaceDependencies {
  'object.assign': string;   // '^4.1.2'
  'object.entries': string;  // '^1.1.5'
  eslint: string;           // '^7.32.0 || ^8.2.0'
}

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