Comprehensive ESLint configuration system with React, TypeScript, and modern JavaScript support. Provides both strict and lenient rule sets with automatic TypeScript project detection.
The default configuration (eslint export) provides a balanced set of rules suitable for most projects.
/**
* Default ESLint configuration with React and TypeScript support
* Automatically detects TypeScript projects and applies appropriate rules
*/
const eslint: ESLintConfig;Usage:
// .eslintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],
};The strict configuration (strictEslint export) provides the same rules as the default but with more stringent enforcement.
/**
* Strict ESLint configuration (identical to default in current version)
* Provides comprehensive linting for React and TypeScript projects
*/
const strictEslint: ESLintConfig;Usage:
const fabric = require('@umijs/fabric');
module.exports = {
...fabric.strictEslint,
rules: {
// Override specific rules as needed
},
};Complete configuration object with all supported properties.
interface ESLintConfig {
/** Extended configurations */
extends: string[];
/** Parser for JavaScript files */
parser: string;
/** ESLint plugins */
plugins: string[];
/** Environment settings */
env: {
browser: boolean;
node: boolean;
es6: boolean;
mocha: boolean;
jest: boolean;
jasmine: boolean;
};
/** Rule configuration */
rules: Record<string, number | string | [number | string, any]>;
/** Parser and import resolver settings */
settings: {
'import/resolver': {
node: {
extensions: string[];
};
};
'import/parsers': Record<string, string[]>;
'import/extensions': string[];
'import/external-module-folders': string[];
polyfills: string[];
react: {
version: string;
};
};
/** TypeScript-specific overrides (when TypeScript detected) */
overrides?: Array<{
files: string[];
parser: string;
rules: Record<string, any>;
extends: string[];
}>;
/** Parser options */
parserOptions: {
ecmaFeatures: {
jsx: boolean;
};
babelOptions: {
presets: string[];
plugins: Array<string | [string, any]>;
};
requireConfigFile: boolean;
project?: string;
};
}Automatically detects TypeScript projects and applies enhanced rules.
/**
* Checks if current directory contains a TypeScript project
* @returns {boolean} True if tsconfig.json exists
*/
const isTsProject: boolean;
/**
* Determines if project has more JavaScript than TypeScript files
* @param {string} path - Path to analyze (defaults to 'src')
* @returns {Promise<boolean>} True if more JS files than TS files
*/
function isJsMoreTs(path?: string): Promise<boolean>;When TypeScript is detected, additional rules are applied via overrides.
/**
* TypeScript-specific ESLint rules configuration
* Contains 160+ rules for TypeScript projects
*/
interface TypeScriptRules {
// Type-aware rules (enabled when DISABLE_TYPE_AWARE is not set)
'@typescript-eslint/dot-notation': number;
'@typescript-eslint/no-throw-literal': number;
'@typescript-eslint/switch-exhaustiveness-check': number;
// Standard TypeScript rules
'@typescript-eslint/array-type': string;
'@typescript-eslint/consistent-type-assertions': number;
'@typescript-eslint/consistent-type-definitions': number;
'@typescript-eslint/consistent-type-imports': number;
'@typescript-eslint/explicit-function-return-type': number;
'@typescript-eslint/method-signature-style': string;
'@typescript-eslint/no-confusing-non-null-assertion': string;
'@typescript-eslint/no-dupe-class-members': string;
'@typescript-eslint/no-empty-interface': number;
'@typescript-eslint/no-for-in-array': string;
'@typescript-eslint/no-invalid-this': number;
'@typescript-eslint/no-loop-func': string;
'@typescript-eslint/no-misused-new': string;
'@typescript-eslint/no-namespace': number;
'@typescript-eslint/no-non-null-asserted-optional-chain': string;
'@typescript-eslint/no-parameter-properties': string;
'@typescript-eslint/no-redeclare': string;
'@typescript-eslint/no-shadow': string;
'@typescript-eslint/no-this-alias': string;
'@typescript-eslint/no-unused-expressions': string;
'@typescript-eslint/no-unused-vars': [string, any];
'@typescript-eslint/no-useless-constructor': string;
'@typescript-eslint/triple-slash-reference': string;
'@typescript-eslint/type-annotation-spacing': string;
'@typescript-eslint/typedef': string;
'@typescript-eslint/unified-signatures': string;
// Disabled base rules that conflict with TypeScript rules
'no-undef': number;
'brace-style': string;
'comma-dangle': string;
'comma-spacing': string;
'default-param-last': string;
'dot-notation': string;
'func-call-spacing': string;
indent: string;
'init-declarations': string;
'keyword-spacing': string;
'lines-between-class-members': string;
'no-array-constructor': string;
'no-dupe-class-members': string;
'no-duplicate-imports': string;
'no-empty-function': string;
'no-extra-parens': string;
'no-extra-semi': string;
'no-implied-eval': string;
'no-invalid-this': string;
'no-loop-func': string;
'no-loss-of-precision': string;
'no-magic-numbers': string;
'no-redeclare': string;
'no-shadow': string;
'no-throw-literal': string;
'no-unused-expressions': string;
'no-unused-vars': string;
'no-use-before-define': string;
'no-useless-constructor': string;
quotes: string;
'require-await': string;
'no-return-await': string;
semi: string;
'space-before-function-paren': string;
'space-infix-ops': string;
camelcase: number;
}Key TypeScript Rules:
Comprehensive React and React Hooks support included in all configurations.
// React-specific rules included
interface ReactRules {
'react/display-name': number;
'react/jsx-props-no-spreading': number;
'react/state-in-constructor': number;
'react/static-property-placement': number;
'react/destructuring-assignment': string;
'react/jsx-filename-extension': string;
'react/no-array-index-key': string;
'react-hooks/rules-of-hooks': string;
'react-hooks/exhaustive-deps': string;
'react/require-default-props': number;
'react/jsx-fragments': number;
'react/jsx-wrap-multilines': number;
'react/prop-types': number;
'react/forbid-prop-types': number;
'react/sort-comp': number;
'react/react-in-jsx-scope': number;
'react/jsx-one-expression-per-line': number;
'react/self-closing-comp': number;
'react/jsx-key': number;
}Supports multiple JavaScript environments and testing frameworks.
interface EnvironmentConfig {
/** Browser globals available */
browser: boolean;
/** Node.js globals available */
node: boolean;
/** ES6 features enabled */
es6: boolean;
/** Mocha testing framework globals */
mocha: boolean;
/** Jest testing framework globals */
jest: boolean;
/** Jasmine testing framework globals */
jasmine: boolean;
}Usage Examples:
// Basic TypeScript React project
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],
rules: {
// Project-specific overrides
'@typescript-eslint/no-explicit-any': 'warn',
},
};
// JavaScript project with custom environment
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],
env: {
// Additional environments
webextensions: true,
},
};
// Disabling type-aware rules for faster linting
// Set environment variable: DISABLE_TYPE_AWARE=true