or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-eslint-config-xo-typescript

ESLint shareable config for TypeScript to be used with eslint-config-xo

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-config-xo-typescript@9.0.x

To install, run

npx @tessl/cli install tessl/npm-eslint-config-xo-typescript@9.0.0

index.mddocs/

ESLint Config XO TypeScript

ESLint Config XO TypeScript is a comprehensive ESLint shareable configuration specifically designed for TypeScript projects. It extends eslint-config-xo and provides strict typing conventions, coding standards, and stylistic rules optimized for modern TypeScript development with ESM modules.

Package Information

  • Package Name: eslint-config-xo-typescript
  • Package Type: npm
  • Language: JavaScript (TypeScript configurations)
  • Installation: npm install --save-dev eslint-config-xo-typescript
  • Node.js: >=20
  • Peer Dependencies: eslint >=9.33.0, typescript >=5.5.0

Core Imports

import xoTypeScript from 'eslint-config-xo-typescript';

For space-based indentation variant:

import xoTypeScriptSpace from 'eslint-config-xo-typescript/space';

Basic Usage

Standalone ESLint Configuration

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

export default [
  ...xoTypeScript,
];

With Space Indentation

// eslint.config.js
import xoTypeScriptSpace from 'eslint-config-xo-typescript/space';

export default [
  ...xoTypeScriptSpace,
];

With XO Linter

XO has built-in support for TypeScript using this package automatically, so no additional configuration is needed when using XO.

Architecture

ESLint Config XO TypeScript is built around several key components:

  • Base Configuration: Extends eslint-config-xo for JavaScript fundamentals
  • TypeScript Integration: Uses typescript-eslint for TypeScript-specific parsing and rules
  • Stylistic Rules: Integrates @stylistic/eslint-plugin for formatting and style consistency
  • Naming Conventions: Comprehensive naming rules for variables, functions, classes, and types
  • File-specific Overrides: Special handling for .d.ts, test files, and TSX files

Capabilities

Main Configuration

The primary ESLint configuration array with comprehensive TypeScript rules and tab-based indentation.

/**
 * Default export providing complete TypeScript ESLint configuration
 * Includes TypeScript-specific rules, stylistic formatting, and naming conventions
 * Uses tab-based indentation by default
 */
declare const config: ESLintConfig[];
export default config;

interface ESLintConfig {
  plugins?: Record<string, ESLintPlugin>;
  languageOptions?: LanguageOptions;
  rules?: Record<string, ESLintRuleConfig>;
  files?: string[];
  ignores?: string[];
}

interface LanguageOptions {
  sourceType?: 'module' | 'script';
  parser?: ESLintParser;
  parserOptions?: ParserOptions;
}

interface ParserOptions {
  projectService?: boolean;
  warnOnUnsupportedTypeScriptVersion?: boolean;
  ecmaFeatures?: {
    jsx?: boolean;
  };
}

interface ESLintPlugin {
  rules?: Record<string, ESLintRule>;
  configs?: Record<string, any>;
  processors?: Record<string, any>;
}

interface ESLintParser {
  parse: (text: string, options: any) => any;
  parseForESLint?: (text: string, options: any) => any;
}

interface ESLintRule {
  meta?: RuleMeta;
  create: (context: any) => any;
}

interface RuleMeta {
  type?: 'problem' | 'suggestion' | 'layout';
  docs?: {
    description?: string;
    recommended?: boolean;
    url?: string;
  };
  fixable?: 'code' | 'whitespace';
  schema?: any[];
}

type ESLintRuleConfig = 'error' | 'warn' | 'off' | [string, ...any[]];

Key Features:

  • 130+ TypeScript-specific rules covering type checking, safety, and best practices
  • Comprehensive naming conventions enforcing camelCase/PascalCase patterns
  • Stylistic rules for consistent formatting (tabs, semicolons, quotes, spacing)
  • JSX support with TypeScript integration
  • File-specific rule overrides for declaration files and tests
  • Project service integration for improved performance with large codebases
  • Integration with three key ESLint plugins: typescript-eslint, @stylistic, and eslint-config-xo

Space Configuration Variant

Alternative configuration using 2-space indentation instead of tabs, while maintaining all other rules and settings.

/**
 * Space variant export providing the same TypeScript configuration
 * but with 2-space indentation instead of tabs
 * Imports and extends the main configuration
 */
declare const spaceConfig: ESLintConfig[];
export default spaceConfig;

Usage Pattern: The space configuration imports the main configuration and overrides only the indentation rule:

import eslintConfigXo from './index.js';

export default [
  ...eslintConfigXo,
  {
    rules: {
      '@stylistic/indent': ['error', 2, { SwitchCase: 1 }],
    },
  },
];

Rule Categories

TypeScript-Specific Rules

The configuration includes comprehensive TypeScript rules covering:

  • Type Safety: @typescript-eslint/await-thenable, @typescript-eslint/no-unsafe-*
  • Best Practices: @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/prefer-optional-chain
  • Code Quality: @typescript-eslint/no-floating-promises, @typescript-eslint/switch-exhaustiveness-check
  • Type Definitions: @typescript-eslint/consistent-type-definitions, @typescript-eslint/consistent-type-imports

Naming Conventions

Strict naming convention rules with different patterns for different code elements:

interface NamingConventionConfig {
  // Variables and functions: strictCamelCase (+ StrictPascalCase for TSX)
  selector: ['variable', 'function', 'classProperty', 'objectLiteralProperty', 'parameterProperty', 'classMethod', 'objectLiteralMethod', 'typeMethod', 'accessor'];
  format: ['strictCamelCase'] | ['strictCamelCase', 'StrictPascalCase'];
  leadingUnderscore?: 'allowSingleOrDouble';
  trailingUnderscore?: 'allow';
  
  // Types, classes, interfaces: StrictPascalCase
  typeLike: {
    format: ['StrictPascalCase'];
  };
  
  // Boolean variables: prefixed with is/has/can/should/will/did
  booleans: {
    format: ['StrictPascalCase'];
    prefix: ['is', 'has', 'can', 'should', 'will', 'did'];
  };
}

Stylistic Rules

Formatting and style rules provided by @stylistic/eslint-plugin:

  • Indentation: Tabs (main) or 2 spaces (space variant)
  • Quotes: Single quotes enforced
  • Semicolons: Always required
  • Braces: 1TBS style, no single-line blocks
  • Spacing: Consistent spacing around operators, functions, objects

File-Specific Overrides

The configuration includes special rule overrides for different file types:

interface FileOverrides {
  // TypeScript declaration files
  '**/*.d.ts': {
    rules: {
      '@typescript-eslint/no-unused-vars': 'off';
    };
  };
  
  // TypeScript test definition files
  '**/*.test-d.ts': {
    rules: {
      '@typescript-eslint/no-unsafe-call': 'off';
      '@typescript-eslint/no-confusing-void-expression': 'off';
    };
  };
  
  // TSX files (React TypeScript)
  '**/*.tsx': {
    rules: {
      // Enhanced naming conventions allowing PascalCase for components
    };
  };
}

Integration Patterns

Extending the Configuration

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

export default [
  ...xoTypeScript,
  {
    // Override or add additional rules
    rules: {
      '@typescript-eslint/explicit-function-return-type': 'error',
      'custom-rule': 'warn',
    },
  },
];

Project-Specific Overrides

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

export default [
  ...xoTypeScript,
  {
    files: ['src/legacy/**/*.ts'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
];

Dependencies Integration

The configuration automatically integrates with its dependencies:

  • eslint-config-xo: Provides base JavaScript rules and configuration
  • typescript-eslint: Supplies TypeScript-specific parser and rules
  • @stylistic/eslint-plugin: Provides formatting and stylistic rules

These dependencies are automatically configured and don't require separate setup when using this package.

Plugin Integration Details

/**
 * Core plugins integrated into the configuration
 */
interface ConfigurationPlugins {
  '@typescript-eslint': TypeScriptESLintPlugin;
  '@stylistic': StylisticESLintPlugin;
}

interface TypeScriptESLintPlugin extends ESLintPlugin {
  parser: ESLintParser;
  plugin: ESLintPlugin;
  config: (...configs: any[]) => ESLintConfig[];
}

interface StylisticESLintPlugin extends ESLintPlugin {
  // Stylistic formatting rules for consistent code style
  rules: {
    'brace-style': ESLintRule;
    'comma-dangle': ESLintRule;
    'comma-spacing': ESLintRule;
    'indent': ESLintRule;
    'quotes': ESLintRule;
    'semi': ESLintRule;
    // ... and many more stylistic rules
  };
}

Common Usage Patterns

For Library Development

// eslint.config.js - Strict configuration for library code
import xoTypeScript from 'eslint-config-xo-typescript';

export default [
  ...xoTypeScript,
  {
    files: ['src/**/*.ts'],
    rules: {
      '@typescript-eslint/explicit-function-return-type': 'error',
      '@typescript-eslint/no-explicit-any': 'error',
    },
  },
];

For Application Development

// eslint.config.js - Balanced configuration for application code
import xoTypeScript from 'eslint-config-xo-typescript';

export default [
  ...xoTypeScript,
  {
    files: ['src/**/*.{ts,tsx}'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/prefer-readonly': 'warn',
    },
  },
  {
    files: ['**/*.test.{ts,tsx}'],
    rules: {
      '@typescript-eslint/no-unsafe-assignment': 'off',
      '@typescript-eslint/no-unsafe-member-access': 'off',
    },
  },
];

With Custom Parser Options

// eslint.config.js - Configuration with custom TypeScript project settings
import xoTypeScript from 'eslint-config-xo-typescript';

export default [
  ...xoTypeScript,
  {
    languageOptions: {
      parserOptions: {
        projectService: {
          allowDefaultProject: ['*.js'],
          defaultProject: 'tsconfig.json',
        },
      },
    },
  },
];