ESLint Config XO

ESLint Config XO is a comprehensive ESLint shareable configuration that implements the XO linting standards and rules. It provides opinionated JavaScript/TypeScript linting configurations with multiple variants for different environments (Node.js/browser) and indentation preferences (tabs/2-spaces).

Package Information

• Package Name: eslint-config-xo
• Package Type: npm
• Language: JavaScript (ES Module)
• Installation: npm install --save-dev eslint-config-xo

Core Imports

// Main configuration (maps to ./index.js)
import xo from 'eslint-config-xo';

// Browser variant (maps to ./browser.js)
import xoBrowser from 'eslint-config-xo/browser';

// Space indentation variant (maps to ./space.js)
import xoSpace from 'eslint-config-xo/space';

// Space + browser variant (maps to ./space-browser.js)
import xoSpaceBrowser from 'eslint-config-xo/space/browser';

Basic Usage

// eslint.config.js
import xo from 'eslint-config-xo';

export default [
  ...xo,
];

For browser environments:

import xoBrowser from 'eslint-config-xo/browser';

export default [
  ...xoBrowser,
];

For 2-space indentation:

import xoSpace from 'eslint-config-xo/space';

export default [
  ...xoSpace,
];

For browser with 2-space indentation:

import xoSpaceBrowser from 'eslint-config-xo/space/browser';

export default [
  ...xoSpaceBrowser,
];

Architecture

ESLint Config XO is built around several key components:

• Main Configuration: Core rules and settings for Node.js environments with tab indentation
• Environment Variants: Browser-specific adaptations with appropriate globals and restricted globals
• Indentation Variants: 2-space alternatives for teams preferring space-based indentation
• Multi-language Support: JavaScript, TypeScript, JSON, JSONC, JSON5 configurations
• Plugin Integration: Stylistic rules, JSON linting, and CSS linting capabilities

Capabilities

Default Configuration

Main XO ESLint configuration with comprehensive rules for Node.js environments using tab indentation.

import xo from 'eslint-config-xo';

/**
 * Default XO ESLint configuration for Node.js environments
 * - Returns array of 4 configuration objects
 * - Main JS/TS config with tab-based indentation
 * - JSON, JSONC, and JSON5 configurations
 * - 220+ configured ESLint rules
 * - Node.js and ES2021 globals
 * @returns {Array} Array of ESLint configuration objects [config, jsoncConfig, json5Config, jsonConfig]
 */
const defaultConfig = xo;
// defaultConfig is an array: [config, jsoncConfig, json5Config, jsonConfig]

Configuration objects returned (in array order):

1. Main config (config): JavaScript/TypeScript files (.js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts) with comprehensive rules and tab indentation
2. JSONC config (jsoncConfig): .jsonc, tsconfig.json, .vscode/*.json with comment support and trailing commas allowed
3. JSON5 config (json5Config): .json5 files with extended JSON5 syntax support
4. JSON config (jsonConfig): .json files with strict validation (placed last so non-standard JSONs match first)

Supported file extensions: .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts, .json, .jsonc, .json5

Key features:

• Tab indentation (@stylistic/indent: ['error', 'tab'])
• Node.js built-in and ES2021 globals (globals.nodeBuiltin, globals.es2021)
• Comprehensive rule set with 220+ configured ESLint rules covering:
  • Possible errors (e.g., no-debugger, no-dupe-keys, no-unreachable)
  • Best practices (e.g., eqeqeq, no-eval, prefer-const)
  • Stylistic issues via @stylistic/eslint-plugin (e.g., comma-dangle, quotes, semi)
  • ES6+ features (e.g., arrow-body-style, prefer-destructuring)
  • Node.js specific restrictions (e.g., no-restricted-imports for deprecated modules)
• JSON linting with duplicate key detection and unsafe value prevention
• TypeScript support with same rule set via file extension matching
• Plugin integration: @stylistic, json, and css plugins
• Linter options: reportUnusedDisableDirectives and reportUnusedInlineConfigs set to "error"

Browser Configuration

XO ESLint configuration adapted for browser environments with appropriate globals and restrictions.

import xoBrowser from 'eslint-config-xo/browser';

/**
 * XO ESLint configuration for browser environments
 * - Extends the main configuration object from index.js
 * - Browser globals instead of Node.js globals
 * - Confusing browser globals restrictions
 * @returns {Array} Array containing single ESLint configuration object
 */
const browserConfig = xoBrowser;
// browserConfig is an array: [modifiedConfig]

Environment differences from default:

• Returns array with single modified configuration object (extracts first config from default export)
• Browser globals (globals.browser, globals.es2021) instead of Node.js built-in globals
• Additional no-restricted-globals rule with confusing browser globals from confusing-browser-globals package
• Does not include JSON configurations (only main JavaScript/TypeScript config)

Space Configuration

XO ESLint configuration with 2-space indentation instead of tabs for Node.js environments.

import xoSpace from 'eslint-config-xo/space';

/**
 * XO ESLint configuration with 2-space indentation for Node.js
 * - Extends the main configuration object from index.js
 * - 2-space indentation instead of tabs
 * - Otherwise identical to default configuration
 * @returns {Array} Array containing single ESLint configuration object
 */
const spaceConfig = xoSpace;
// spaceConfig is an array: [modifiedConfig]

Key differences from default:

• Returns array with single modified configuration object (extracts first config from default export)
• 2-space indentation (@stylistic/indent: ['error', 2]) instead of tab indentation
• Does not include JSON configurations (only main JavaScript/TypeScript config)
• All other settings identical to default configuration main config

Space Browser Configuration

XO ESLint configuration with 2-space indentation for browser environments.

import xoSpaceBrowser from 'eslint-config-xo/space/browser';

/**
 * XO ESLint configuration with 2-space indentation for browser environments
 * - Extends the browser configuration from browser.js
 * - Applies 2-space indentation instead of tabs
 * - Browser globals and confusing globals restrictions
 * @returns {Array} Array containing single ESLint configuration object
 */
const spaceBrowserConfig = xoSpaceBrowser;
// spaceBrowserConfig is an array: [modifiedConfig]

Combines features of:

• Returns array with single modified configuration object (extracts config from browser.js)
• Browser environment (browser globals, restricted globals from browser.js)
• 2-space indentation (@stylistic/indent: ['error', 2]) instead of tabs
• Does not include JSON configurations (only main JavaScript/TypeScript config)

Types

/**
 * ESLint configuration object in flat config format
 * @typedef {Object} ESLintConfig
 * @property {Object} [languageOptions] - Language-specific options
 * @property {Object} [languageOptions.globals] - Global variables
 * @property {number|string} [languageOptions.ecmaVersion] - ECMAScript version
 * @property {string} [languageOptions.sourceType] - Source type ("script" or "module")
 * @property {Object} [languageOptions.parserOptions] - Parser options
 * @property {Object} [languageOptions.parserOptions.ecmaFeatures] - ECMAScript features
 * @property {boolean} [languageOptions.parserOptions.ecmaFeatures.jsx] - JSX support
 * @property {Object} [linterOptions] - Linter behavior options
 * @property {string} [linterOptions.reportUnusedDisableDirectives] - Report unused disable directives
 * @property {string} [linterOptions.reportUnusedInlineConfigs] - Report unused inline configs
 * @property {Object} [plugins] - ESLint plugins
 * @property {string[]} [files] - File patterns
 * @property {string} [language] - Language configuration
 * @property {Object} [rules] - ESLint rules
 */

/**
 * Rule configuration values
 * @typedef {("error"|"warn"|"off"|Array)} RuleConfig
 */

Dependencies

Runtime Dependencies

• @eslint/css (^0.10.0): CSS linting support for .css files
• @eslint/json (^0.13.1): JSON linting capabilities for .json, .jsonc, .json5 files
• @stylistic/eslint-plugin (^5.2.3): Stylistic formatting and spacing rules (replaces deprecated ESLint stylistic rules)
• confusing-browser-globals (1.0.11): List of confusing browser globals to restrict in browser environments
• globals (^16.3.0): Environment global variable definitions for Node.js, browser, and ES2021

Peer Dependencies

• eslint: >= 9.33.0 (required for flat config format)

Configuration Details

Rule Categories

The configuration includes rules from several categories:

• Possible Errors: Prevent runtime errors and logical mistakes
• Best Practices: Enforce best practices and prevent problematic patterns
• Stylistic Issues: Enforce consistent code style and formatting
• ES6+: Modern JavaScript features and syntax
• Node.js: Node.js-specific patterns (default and space variants)
• Browser: Browser-specific restrictions (browser variants)

File Type Support

• JavaScript: .js, .jsx, .mjs, .cjs
• TypeScript: .ts, .tsx, .mts, .cts
• JSON: .json with strict validation
• JSONC: .jsonc, tsconfig.json, .vscode/*.json with comment support
• JSON5: .json5 with extended syntax support
• CSS: .css support available but currently disabled in configuration

Indentation Styles

• Tab-based: Default and browser configurations use tab indentation
• Space-based: Space and space-browser configurations use 2-space indentation
• Switch case: All configurations indent switch cases by 1 level

Additional Configuration Support

The package includes CSS linting configuration that is currently disabled:

// CSS configuration exists in source but is commented out
// Available rules: css/no-duplicate-imports, css/no-empty-blocks, 
// css/no-invalid-at-rule-placement, css/no-invalid-at-rules,
// css/no-invalid-named-grid-areas, css/no-invalid-properties
const cssConfig = {
  plugins: { css },
  files: ['**/*.css'],
  language: 'css/css',
  rules: {
    'css/no-duplicate-imports': 'error',
    'css/no-empty-blocks': 'error',
    'css/no-invalid-at-rule-placement': 'error',
    'css/no-invalid-at-rules': 'error',
    'css/no-invalid-named-grid-areas': 'error',
    'css/no-invalid-properties': 'error'
  }
};
// Note: Disabled until more stable according to source comments