ESLint Configuration

Pre-configured ESLint setup with React, TypeScript, and Jest support, plus legacy fabric configuration compatibility. The package provides comprehensive ESLint configurations optimized for modern JavaScript and TypeScript development.

Capabilities

Main ESLint Configuration

Modern ESLint configuration with React, TypeScript, and Jest support.

// ESLint configuration object (CommonJS module.exports)
// Location: src/config/eslint/index.ts
const eslintConfig: {
  parser: string;
  plugins: string[];
  settings: {
    react: {
      version: string;
    };
  };
  env: {
    browser: boolean;
    node: boolean;
    es2022: boolean;
    jest: boolean;
  };
  rules: Record<string, any>;
  overrides: Array<{
    parser?: string;
    plugins?: string[];
    files: string[];
    rules: Record<string, any>;
    settings?: any;
    extends?: string[];
  }>;
  parserOptions: {
    ecmaFeatures: {
      jsx: boolean;
    };
    babelOptions: {
      babelrc: boolean;
      configFile: boolean;
      browserslistConfigFile: boolean;
      presets: string[];
    };
    requireConfigFile: boolean;
    warnOnUnsupportedTypeScriptVersion: boolean;
  };
};

Key Features:

• Parser: Babel ESLint parser for JavaScript/JSX
• Plugins: React and React Hooks plugins
• Environment: Browser, Node.js, ES2022, and Jest environments
• TypeScript Override: @typescript-eslint parser for .ts/.tsx files
• Jest Override: Jest plugin for test files
• Babel Integration: Uses @umijs/babel-preset-umi

Usage:

// .eslintrc.js
module.exports = require("@umijs/lint/dist/config/eslint");

Legacy ESLint Configuration

Legacy fabric-compatible ESLint configuration for backward compatibility.

// Legacy ESLint configuration object (CommonJS module.exports)
// Location: src/config/eslint/legacy.ts
const eslintLegacyConfig: {
  extends: string[];
  parser: string;
  plugins: string[];
  env: {
    browser: boolean;
    node: boolean;
    es6: boolean;
    mocha: boolean;
    jest: boolean;
    jasmine: boolean;
  };
  rules: Record<string, any>;
  overrides: Array<{
    files: string[];
    parser: string;
    rules: Record<string, any>;
    extends: string[];
  }>;
  parserOptions: {
    ecmaFeatures: {
      jsx: boolean;
    };
    babelOptions: {
      babelrc: boolean;
      configFile: boolean;
      browserslistConfigFile: boolean;
      presets: string[];
    };
    requireConfigFile: boolean;
    warnOnUnsupportedTypeScriptVersion: boolean;
  };
};

Key Features:

• Extends: Prettier and React recommended configurations
• Legacy Support: Compatible with @umijs/fabric configurations
• Test Frameworks: Mocha, Jest, and Jasmine support
• TypeScript: @typescript-eslint recommended rules for TypeScript files

Usage:

// .eslintrc.js for legacy projects
module.exports = require("@umijs/lint/dist/config/eslint/legacy");

ESLint Setup Module

Module resolution patch for ESLint plugins.

// ESLint plugin resolution patch
// Location: src/config/eslint/setup.ts
// Automatically patches ESLint plugin resolve logic using @rushstack/eslint-patch

Purpose:

• Resolves ESLint plugin loading issues in monorepos
• Applied automatically when ESLint configurations are loaded
• Uses @rushstack/eslint-patch for modern module resolution

Rule Sets

Recommended Rules

Modern recommended rules for Umi.js projects.

// Location: src/config/eslint/rules/recommended.ts
const recommendedRules: Record<string, number | any[]>;
const jestRules: Record<string, number | any[]>;
const typescriptRules: Record<string, number | any[]>;

Rule Categories:

• Core ESLint: Array callback return, eqeqeq, guard-for-in, no-eval, etc.
• React: JSX key, no duplicate props, hooks rules, etc.
• Jest: No focused tests, valid expect, no standalone expect, etc.
• TypeScript: Ban types, no unused vars, consistent type imports, etc.

Fabric Legacy Rules

Legacy rules from @umijs/fabric for backward compatibility.

// Location: src/config/eslint/rules/fabric.ts
const fabricRules: Record<string, number | any[]>;
const fabricTypescriptRules: Record<string, number | any[]>;

Rule Categories:

• Legacy ESLint: Based on @umijs/fabric configuration
• React: Display name, prop types, self-closing components, etc.
• TypeScript: Array type, method signature style, typedef, etc.

Configuration Examples

Basic Project Setup

// .eslintrc.js
module.exports = require("@umijs/lint/dist/config/eslint");

TypeScript Project

// .eslintrc.json
{
  "extends": ["@umijs/lint/dist/config/eslint"]
}

Legacy Project Migration

// .eslintrc.js
module.exports = require("@umijs/lint/dist/config/eslint/legacy");

Custom Rule Overrides

// .eslintrc.js
const baseConfig = require("@umijs/lint/dist/config/eslint");

module.exports = {
  ...baseConfig,
  rules: {
    ...baseConfig.rules,
    "no-console": "warn",
    "react/prop-types": "off"
  }
};

File Pattern Matching

TypeScript Override

• Files: **/*.{ts,tsx}
• Parser: @typescript-eslint/parser
• Rules: TypeScript-specific rules applied

Jest Override

• Files: **/*.{test,spec,unit,e2e}.{ts,tsx,js,jsx}
• Plugin: Jest plugin enabled
• Rules: Jest-specific rules applied
• Settings: Automatic Jest version detection

Jest Version Detection

/**
 * Automatically detects Jest version for optimal rule configuration
 * Falls back to version 29 if Jest is not found
 * @returns Jest version number
 */
function detectJestVersion(): number;

Behavior:

• Attempts to resolve jest/package.json from current working directory
• Extracts version from package.json
• Returns 29 as fallback if Jest is not installed
• Used for Jest plugin configuration in test file overrides

Rule Severity Levels

• 0 or "off": Rule is disabled
• 1 or "warn": Rule generates warnings
• 2 or "error": Rule generates errors (fails linting)

Built-in Plugins

React Plugin

• JSX syntax support
• React-specific rules and best practices
• Automatic React version detection

React Hooks Plugin

• Rules of Hooks enforcement
• Exhaustive dependencies checking

TypeScript Plugin

• Type-aware linting rules
• TypeScript syntax support
• Import/export validation

Jest Plugin

• Test-specific linting rules
• Jest API validation
• Test structure enforcement