Airbnb JavaScript Style Guide - Deployment & Usage Guide

1. Prerequisites

• Node.js: Version 12.x or higher (LTS recommended)
• npm: Version 6.x or higher (or yarn 1.22+)
• Babel: Required for projects using ES6+ features (install babel-preset-airbnb or equivalent)
• Polyfills: airbnb-browser-shims or equivalent for browser compatibility
• Git: For cloning and version control integration

2. Installation

Option A: Full Configuration (React + ES6+)

# Install the main config with React support
npm install --save-dev eslint-config-airbnb

# Install peer dependencies automatically (npm 7+) or manually:
npm install --save-dev eslint@^7.32.0 eslint-plugin-import@^2.25.3 eslint-plugin-react@^7.27.1 eslint-plugin-react-hooks@^4.3.0 eslint-plugin-jsx-a11y@^6.5.1

Option B: Base Configuration (No React)

# For Node.js or vanilla JavaScript projects
npm install --save-dev eslint-config-airbnb-base

# Install peer dependencies:
npm install --save-dev eslint@^7.32.0 eslint-plugin-import@^2.25.3

Option C: Clone for Customization

git clone https://github.com/airbnb/javascript.git
cd javascript
npm install
cd packages/eslint-config-airbnb  # or eslint-config-airbnb-base
npm link  # For local development/testing

3. Configuration

Basic ESLint Configuration

Create .eslintrc.js (or .eslintrc.json) in your project root:

For React Projects:

module.exports = {
  extends: 'airbnb',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    es6: true,
    jest: true,  // If using Jest for testing
  },
  rules: {
    // Override specific rules as needed
    'no-console': 'warn',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
  },
};

For Node.js/Base Projects:

module.exports = {
  extends: 'airbnb-base',
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.mjs', '.js', '.json'],
      },
    },
    'import/extensions': ['.js', '.mjs', '.jsx'],
  },
};

Babel Integration

Create .babelrc or babel.config.js:

{
  "presets": ["airbnb"]
}

Or configure in package.json:

{
  "babel": {
    "presets": ["airbnb"]
  }
}

Browser Shims (if needed)

// In your entry point (index.js or app.js)
import 'airbnb-browser-shims';

4. Build & Run

Development Workflow

Add lint scripts to package.json:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.mjs",
    "lint:fix": "eslint . --ext .js,.jsx,.mjs --fix",
    "lint:report": "eslint . --ext .js,.jsx,.mjs -f html -o eslint-report.html"
  }
}

Run linting:

# Check all files
npm run lint

# Auto-fix issues
npm run lint:fix

# Check specific directories
npx eslint src/ --ext .js,.jsx

# Check with debug output
DEBUG=eslint:* npx eslint .

IDE Integration

VS Code:

1. Install ESLint extension
2. Add to .vscode/settings.json:

{
  "eslint.validate": ["javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

WebStorm/IntelliJ:

1. Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint
2. Enable "Automatic ESLint configuration" or point to your .eslintrc.js

Pre-commit Hooks

Install Husky and lint-staged:

npm install --save-dev husky lint-staged
npx husky-init && npm install

Add to package.json:

{
  "lint-staged": {
    "*.{js,jsx,mjs}": ["eslint --fix", "git add"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

5. Deployment

Publishing Custom Configurations

If you've forked and modified the config:

1. Update package name in packages/eslint-config-airbnb/package.json:

{
  "name": "@yourorg/eslint-config",
  "version": "1.0.0",
  "main": "index.js"
}

2. Build and publish:

cd packages/eslint-config-airbnb
npm version patch  # or minor/major
npm publish --access public

CI/CD Integration

GitHub Actions (.github/workflows/lint.yml):

name: Lint
on: [push, pull_request]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

GitLab CI (.gitlab-ci.yml):

lint:
  image: node:18-alpine
  script:
    - npm ci
    - npm run lint
  only:
    - merge_requests
    - main

Docker Integration:

FROM node:18-alpine as linter
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run lint

FROM node:18-alpine as production
COPY --from=linter /app /app
# Continue with build...

6. Troubleshooting

Peer Dependency Warnings

Issue: npm WARN eslint-config-airbnb@19.x.x requires a peer of eslint@^7.32.0 but none is installed Solution:

npm install --save-dev eslint@^7.32.0
# Or use legacy peer deps flag (npm 7+):
npm install --save-dev eslint-config-airbnb --legacy-peer-deps

JSX Parsing Errors

Issue: Parsing error: Unexpected token < Solution: Ensure parserOptions.ecmaFeatures.jsx is enabled in .eslintrc.js:

parserOptions: {
  ecmaFeatures: {
    jsx: true,
  },
}

Import Resolution Failures

Issue: Unable to resolve path to module './components/Button' Solution: Configure import resolver in .eslintrc.js:

settings: {
  'import/resolver': {
    node: {
      extensions: ['.js', '.jsx', '.mjs', '.json'],
      moduleDirectory: ['node_modules', 'src/'],
    },
  },
}

React Version Detection

Issue: Warning: React version not specified in eslint-plugin-react settings Solution: Add to .eslintrc.js:

settings: {
  react: {
    version: 'detect',  // or specify: '18.2.0'
  },
}

Performance Issues

Issue: ESLint runs slowly on large codebases Solution:

1. Use .eslintignore to exclude build directories:

dist/
node_modules/
coverage/
*.min.js

2. Run linting only on changed files in CI:

git diff --name-only HEAD~1 HEAD | grep -E '\.(js|jsx)$' | xargs npx eslint

Class Methods this Errors

Issue: Expected 'this' to be used by class method 'render' in React components Solution: This is already handled in the config via exceptMethods, but if customizing:

'class-methods-use-this': ['error', {
  exceptMethods: ['render', 'getInitialState', 'componentDidMount', ...],
}]