ESLint Config Showdown: Airbnb vs Standard vs XO

When setting up linting for a JavaScript project, writing hundreds of rules from scratch is rarely efficient. Shared configs like eslint-config-airbnb, eslint-config-standard, and eslint-config-xo provide pre-built rule sets that enforce style and catch errors. Each takes a different approach to strictness, setup, and philosophy. Let's compare how they handle real-world engineering needs.

🛠️ Installation & Setup: Heavy Lift vs Zero Config

eslint-config-airbnb requires installing many peer dependencies to work correctly.

• You must install ESLint plus specific plugins for React and JSX.
• This ensures all rules have the tools they need to run.

# airbnb: Install core + peers
npm install -D eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

eslint-config-standard aims for zero configuration files.

• You install the config and ESLint.
• It often pairs with the standard CLI which hides the config file entirely.

# standard: Minimal install
npm install -D eslint eslint-config-standard eslint-plugin-promise eslint-plugin-n eslint-plugin-import

eslint-config-xo keeps dependencies lighter than Airbnb.

• You install the config and ESLint.
• It is often used via the xo CLI tool which bundles this config.

# xo: Moderate install
npm install -D eslint eslint-config-xo

📏 Rule Strictness: Enterprise Rigor vs Sensible Defaults

eslint-config-airbnb is extremely strict out of the box.

• It forbids unused variables, missing prop types, and specific styling choices.
• Great for teams that want to avoid code review debates.

// .eslintrc.js for airbnb
module.exports = {
  extends: ['airbnb'],
  rules: {
    // Often need to relax rules for practical use
    'no-console': 'warn',
    'react/prop-types': 'off'
  }
};

eslint-config-standard enforces a specific style opinion.

• No semicolons, single quotes, and 2-space indentation are mandatory.
• Less focus on React specifics, more on core JavaScript style.

// .eslintrc.js for standard
module.exports = {
  extends: ['standard'],
  rules: {
    // Hard to change core style opinions
    'semi': ['error', 'never'],
    'quotes': ['error', 'single']
  }
};

eslint-config-xo balances strictness with modern syntax.

• It allows semicolons and focuses on correctness over style wars.
• Good for libraries that want safety without forcing a specific look.

// .eslintrc.js for xo
module.exports = {
  extends: ['xo'],
  rules: {
    // Easier to override specific preferences
    'semicolon': ['error', 'always'],
    'space-before-function-paren': 'error'
  }
};

⚛️ React & JSX Support: Built-In vs Add-On

eslint-config-airbnb has first-class React support built in.

• It includes rules for hooks, accessibility, and prop validation.
• You do not need to search for extra plugins to lint React code.

// airbnb: React rules active by default
// This triggers an error if hooks are used incorrectly
function Component() {
  const [val, setVal] = useState(); // Error: missing dependency array
}

eslint-config-standard treats React as an add-on.

• You need eslint-config-standard-react to get JSX support.
• Core config focuses on vanilla JavaScript logic.

// standard: Requires extra config for React
module.exports = {
  extends: ['standard', 'standard-react']
};

eslint-config-xo supports React via a separate preset.

• You extend xo-react to get JSX rules.
• Keeps the core config clean for non-React projects.

// xo: React preset available
module.exports = {
  extends: ['xo', 'xo-react']
};

🔌 Extensibility: Overriding Rules

eslint-config-airbnb allows overrides but fights you on style.

• You can turn rules off, but the base config is very opinionated.
• Best used when you agree with 90% of the rules already.

// airbnb: Overriding strict rules
module.exports = {
  extends: ['airbnb'],
  rules: {
    'max-len': ['error', { code: 120 }] // Relax line length
  }
};

eslint-config-standard is harder to tweak on style.

• The philosophy is "no config" so changing style defeats the purpose.
• Best for teams that accept the Standard style fully.

// standard: Overriding style (goes against grain)
module.exports = {
  extends: ['standard'],
  rules: {
    'semi': ['error', 'always'] // Conflicts with core philosophy
  }
};

eslint-config-xo is designed to be extended easily.

• It expects you to tweak rules to fit your project needs.
• Good middle ground between rigid and loose.

// xo: Clean overrides
module.exports = {
  extends: ['xo'],
  rules: {
    'no-unused-vars': 'warn' // Adjust severity easily
  }
};

📊 Summary: Key Differences

💡 The Big Picture

eslint-config-airbnb is the heavy-duty option 🏋️. It brings everything you need for a large React codebase but requires maintenance of peer dependencies. Use this when consistency matters more than setup speed.

eslint-config-standard is the opinionated shortcut ⚡. It removes decision fatigue by enforcing a specific look (no semicolons). Use this for small teams or projects where you want to stop talking about style and start coding.

eslint-config-xo is the modern balanced choice ⚖️. It provides safety and cleanliness without forcing extreme style rules. Use this for libraries or teams that want solid defaults with room to breathe.

Final Thought: All three tools solve the same problem — keeping code clean — but they differ in how much control they take away from you. Pick the one that matches your team's tolerance for rules.