or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

auto-configuration.mdcore-configurations.mdframework-configurations.mdindex.mdtesting-configurations.mdutility-configurations.md
tile.json

index.mddocs/

ESLint Config Canonical

ESLint Config Canonical is the most comprehensive ESLint shareable configuration available, consisting of 1,000+ rules (40% auto-fixable) designed to reduce noise in code version control and promote use of the latest ES features. It provides specialized rulesets for various environments and frameworks including TypeScript, React, Node.js, testing frameworks, and more.

Package Information

  • Package Name: eslint-config-canonical
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install eslint-config-canonical

Core Imports

// Import individual configurations (recommended approach)
import * as canonical from "eslint-config-canonical/canonical";
import * as typescript from "eslint-config-canonical/typescript";
import * as react from "eslint-config-canonical/react";

// Import auto configuration (recommended)
import auto from "eslint-config-canonical/auto";

// Alternative: Import all from main package
import * as eslintCanonical from "eslint-config-canonical";
// Then use: eslintCanonical.canonical.recommended

For CommonJS:

// Legacy usage
module.exports = {
  extends: ['canonical']
};

Basic Usage

Most projects should use the auto configuration:

// eslint.config.ts
import auto from 'eslint-config-canonical/auto';
import tseslint from 'typescript-eslint';

export default tseslint.config(auto);

For custom combinations:

import * as canonical from 'eslint-config-canonical/canonical';
import * as typescript from 'eslint-config-canonical/typescript';
import * as react from 'eslint-config-canonical/react';
import * as prettier from 'eslint-config-canonical/prettier';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  canonical.recommended,
  typescript.recommended,
  react.recommended,
  prettier.recommended
);

Architecture

ESLint Config Canonical is built around several key patterns:

  • Modular Configurations: Each ruleset is self-contained with specific plugins and rules
  • Auto Configuration: Intelligent combination of multiple rulesets using overrides
  • Flat Config Support: All configurations use ESLint's new flat config format
  • TypeScript Integration: Deep integration with typescript-eslint for type-aware rules
  • Plugin Ecosystem: Leverages 20+ specialized ESLint plugins

Capabilities

Auto Configuration

Intelligent ESLint configuration that automatically applies relevant rulesets based on file patterns and project structure.

// Default export from eslint-config-canonical/auto
declare const auto: ESLintConfig[];

Auto Configuration

Core Configurations

Essential ESLint configurations for different environments and use cases.

interface ConfigurationModule {
  recommended: ESLintConfig;
}

declare const canonical: ConfigurationModule;
declare const typescript: ConfigurationModule;
declare const browser: ConfigurationModule;
declare const node: ConfigurationModule;
declare const moduleRules: ConfigurationModule;

// These configurations are available as direct imports only
declare const typescriptCompatibility: ConfigurationModule; // eslint-config-canonical/typescript-compatibility
declare const typescriptTypeChecking: ConfigurationModule;  // eslint-config-canonical/typescript-type-checking

Core Configurations

Framework Configurations

Specialized configurations for popular JavaScript/TypeScript frameworks and libraries.

declare const react: ConfigurationModule;
declare const next: ConfigurationModule;
declare const graphql: ConfigurationModule;
declare const jsxA11y: ConfigurationModule;

Framework Configurations

Testing Configurations

ESLint configurations optimized for various testing frameworks.

declare const jest: ConfigurationModule;
declare const vitest: ConfigurationModule;
declare const ava: ConfigurationModule;
declare const mocha: ConfigurationModule;

Testing Configurations

Utility Configurations

Additional configurations for specific tools, libraries, and file types.

declare const prettier: ConfigurationModule;
declare const jsdoc: ConfigurationModule;
declare const json: ConfigurationModule;
declare const yaml: ConfigurationModule;
declare const lodash: ConfigurationModule;
declare const zod: ConfigurationModule;
declare const regexp: ConfigurationModule;

Utility Configurations

Types

interface ESLintConfig {
  files?: string[];
  plugins?: Record<string, ESLintPlugin>;
  rules?: Record<string, ESLintRuleConfig>;
  languageOptions?: {
    parser?: ESLintParser;
    parserOptions?: Record<string, any>;
    ecmaVersion?: number;
    sourceType?: "script" | "module";
    globals?: Record<string, boolean>;
  };
  settings?: Record<string, any>;
  processor?: string;
  ignores?: string[];
}

type ESLintRuleConfig = 
  | "off" | 0
  | "warn" | 1
  | "error" | 2
  | [("off" | 0 | "warn" | 1 | "error" | 2), ...any[]];

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

interface ConfigurationModule {
  recommended: ESLintConfig;
}