0
# ESLint Configurations
1

2
Comprehensive ESLint configuration system with React, TypeScript, and modern JavaScript support. Provides both strict and lenient rule sets with automatic TypeScript project detection.
3

4
## Capabilities
5

6
### Default ESLint Configuration
7

8
The default configuration (`eslint` export) provides a balanced set of rules suitable for most projects.
9

10
```javascript { .api }
11
/**
12
 * Default ESLint configuration with React and TypeScript support
13
 * Automatically detects TypeScript projects and applies appropriate rules
14
 */
15
const eslint: ESLintConfig;
16
```
17

18
**Usage:**
19

20
```javascript
21
// .eslintrc.js
22
module.exports = {
23
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
24
};
25
```
26

27
### Strict ESLint Configuration
28

29
The strict configuration (`strictEslint` export) provides the same rules as the default but with more stringent enforcement.
30

31
```javascript { .api }
32
/**
33
 * Strict ESLint configuration (identical to default in current version)
34
 * Provides comprehensive linting for React and TypeScript projects
35
 */
36
const strictEslint: ESLintConfig;
37
```
38

39
**Usage:**
40

41
```javascript
42
const fabric = require('@umijs/fabric');
43

44
module.exports = {
45
  ...fabric.strictEslint,
46
  rules: {
47
    // Override specific rules as needed
48
  },
49
};
50
```
51

52
### ESLint Configuration Structure
53

54
Complete configuration object with all supported properties.
55

56
```javascript { .api }
57
interface ESLintConfig {
58
  /** Extended configurations */
59
  extends: string[];
60
  
61
  /** Parser for JavaScript files */
62
  parser: string;
63
  
64
  /** ESLint plugins */
65
  plugins: string[];
66
  
67
  /** Environment settings */
68
  env: {
69
    browser: boolean;
70
    node: boolean;
71
    es6: boolean;
72
    mocha: boolean;
73
    jest: boolean;
74
    jasmine: boolean;
75
  };
76
  
77
  /** Rule configuration */
78
  rules: Record<string, number | string | [number | string, any]>;
79
  
80
  /** Parser and import resolver settings */
81
  settings: {
82
    'import/resolver': {
83
      node: {
84
        extensions: string[];
85
      };
86
    };
87
    'import/parsers': Record<string, string[]>;
88
    'import/extensions': string[];
89
    'import/external-module-folders': string[];
90
    polyfills: string[];
91
    react: {
92
      version: string;
93
    };
94
  };
95
  
96
  /** TypeScript-specific overrides (when TypeScript detected) */
97
  overrides?: Array<{
98
    files: string[];
99
    parser: string;
100
    rules: Record<string, any>;
101
    extends: string[];
102
  }>;
103
  
104
  /** Parser options */
105
  parserOptions: {
106
    ecmaFeatures: {
107
      jsx: boolean;
108
    };
109
    babelOptions: {
110
      presets: string[];
111
      plugins: Array<string | [string, any]>;
112
    };
113
    requireConfigFile: boolean;
114
    project?: string;
115
  };
116
}
117
```
118

119
### TypeScript Integration
120

121
Automatically detects TypeScript projects and applies enhanced rules.
122

123
```javascript { .api }
124
/**
125
 * Checks if current directory contains a TypeScript project
126
 * @returns {boolean} True if tsconfig.json exists
127
 */
128
const isTsProject: boolean;
129

130
/**
131
 * Determines if project has more JavaScript than TypeScript files
132
 * @param {string} path - Path to analyze (defaults to 'src')
133
 * @returns {Promise<boolean>} True if more JS files than TS files
134
 */
135
function isJsMoreTs(path?: string): Promise<boolean>;
136
```
137

138
### TypeScript-Specific Rules
139

140
When TypeScript is detected, additional rules are applied via overrides.
141

142
```javascript { .api }
143
/**
144
 * TypeScript-specific ESLint rules configuration
145
 * Contains 160+ rules for TypeScript projects
146
 */
147
interface TypeScriptRules {
148
  // Type-aware rules (enabled when DISABLE_TYPE_AWARE is not set)
149
  '@typescript-eslint/dot-notation': number;
150
  '@typescript-eslint/no-throw-literal': number;
151
  '@typescript-eslint/switch-exhaustiveness-check': number;
152
  
153
  // Standard TypeScript rules
154
  '@typescript-eslint/array-type': string;
155
  '@typescript-eslint/consistent-type-assertions': number;
156
  '@typescript-eslint/consistent-type-definitions': number;
157
  '@typescript-eslint/consistent-type-imports': number;
158
  '@typescript-eslint/explicit-function-return-type': number;
159
  '@typescript-eslint/method-signature-style': string;
160
  '@typescript-eslint/no-confusing-non-null-assertion': string;
161
  '@typescript-eslint/no-dupe-class-members': string;
162
  '@typescript-eslint/no-empty-interface': number;
163
  '@typescript-eslint/no-for-in-array': string;
164
  '@typescript-eslint/no-invalid-this': number;
165
  '@typescript-eslint/no-loop-func': string;
166
  '@typescript-eslint/no-misused-new': string;
167
  '@typescript-eslint/no-namespace': number;
168
  '@typescript-eslint/no-non-null-asserted-optional-chain': string;
169
  '@typescript-eslint/no-parameter-properties': string;
170
  '@typescript-eslint/no-redeclare': string;
171
  '@typescript-eslint/no-shadow': string;
172
  '@typescript-eslint/no-this-alias': string;
173
  '@typescript-eslint/no-unused-expressions': string;
174
  '@typescript-eslint/no-unused-vars': [string, any];
175
  '@typescript-eslint/no-useless-constructor': string;
176
  '@typescript-eslint/triple-slash-reference': string;
177
  '@typescript-eslint/type-annotation-spacing': string;
178
  '@typescript-eslint/typedef': string;
179
  '@typescript-eslint/unified-signatures': string;
180
  
181
  // Disabled base rules that conflict with TypeScript rules
182
  'no-undef': number;
183
  'brace-style': string;
184
  'comma-dangle': string;
185
  'comma-spacing': string;
186
  'default-param-last': string;
187
  'dot-notation': string;
188
  'func-call-spacing': string;
189
  indent: string;
190
  'init-declarations': string;
191
  'keyword-spacing': string;
192
  'lines-between-class-members': string;
193
  'no-array-constructor': string;
194
  'no-dupe-class-members': string;
195
  'no-duplicate-imports': string;
196
  'no-empty-function': string;
197
  'no-extra-parens': string;
198
  'no-extra-semi': string;
199
  'no-implied-eval': string;
200
  'no-invalid-this': string;
201
  'no-loop-func': string;
202
  'no-loss-of-precision': string;
203
  'no-magic-numbers': string;
204
  'no-redeclare': string;
205
  'no-shadow': string;
206
  'no-throw-literal': string;
207
  'no-unused-expressions': string;
208
  'no-unused-vars': string;
209
  'no-use-before-define': string;
210
  'no-useless-constructor': string;
211
  quotes: string;
212
  'require-await': string;
213
  'no-return-await': string;
214
  semi: string;
215
  'space-before-function-paren': string;
216
  'space-infix-ops': string;
217
  camelcase: number;
218
}
219
```
220

221
**Key TypeScript Rules:**
222

223
- **Type Safety**: Enforces proper type usage and prevents common type-related errors
224
- **Code Quality**: Maintains consistent coding patterns and best practices
225
- **Import Management**: Ensures proper import/export patterns with type imports
226
- **Class and Interface Design**: Enforces consistent class and interface patterns
227
- **Function Signatures**: Requires proper typing for function parameters and return types
228

229
### React Rules
230

231
Comprehensive React and React Hooks support included in all configurations.
232

233
```javascript { .api }
234
// React-specific rules included
235
interface ReactRules {
236
  'react/display-name': number;
237
  'react/jsx-props-no-spreading': number;
238
  'react/state-in-constructor': number;
239
  'react/static-property-placement': number;
240
  'react/destructuring-assignment': string;
241
  'react/jsx-filename-extension': string;
242
  'react/no-array-index-key': string;
243
  'react-hooks/rules-of-hooks': string;
244
  'react-hooks/exhaustive-deps': string;
245
  'react/require-default-props': number;
246
  'react/jsx-fragments': number;
247
  'react/jsx-wrap-multilines': number;
248
  'react/prop-types': number;
249
  'react/forbid-prop-types': number;
250
  'react/sort-comp': number;
251
  'react/react-in-jsx-scope': number;
252
  'react/jsx-one-expression-per-line': number;
253
  'react/self-closing-comp': number;
254
  'react/jsx-key': number;
255
}
256
```
257

258
### Environment Configuration
259

260
Supports multiple JavaScript environments and testing frameworks.
261

262
```javascript { .api }
263
interface EnvironmentConfig {
264
  /** Browser globals available */
265
  browser: boolean;
266
  
267
  /** Node.js globals available */
268
  node: boolean;
269
  
270
  /** ES6 features enabled */
271
  es6: boolean;
272
  
273
  /** Mocha testing framework globals */
274
  mocha: boolean;
275
  
276
  /** Jest testing framework globals */
277
  jest: boolean;
278
  
279
  /** Jasmine testing framework globals */
280
  jasmine: boolean;
281
}
282
```
283

284
**Usage Examples:**
285

286
```javascript
287
// Basic TypeScript React project
288
module.exports = {
289
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
290
  rules: {
291
    // Project-specific overrides
292
    '@typescript-eslint/no-explicit-any': 'warn',
293
  },
294
};
295

296
// JavaScript project with custom environment
297
module.exports = {
298
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
299
  env: {
300
    // Additional environments
301
    webextensions: true,
302
  },
303
};
304

305
// Disabling type-aware rules for faster linting
306
// Set environment variable: DISABLE_TYPE_AWARE=true
307
```