0
# ESLint Configurations
1

2
The @nx/eslint-plugin provides comprehensive pre-configured ESLint setups for different frameworks and project types, supporting both legacy ESLintRC format and modern flat config format.
3

4
## Capabilities
5

6
### Configuration Access
7

8
All configurations are available through the plugin's configs object, with different access patterns for different formats.
9

10
```typescript { .api }
11
interface PluginConfigs {
12
  // Legacy ESLintRC configurations
13
  typescript: ESLintRCConfig;
14
  javascript: ESLintRCConfig;
15
  react: ESLintRCConfig;
16
  "react-base": ESLintRCConfig;
17
  "react-typescript": ESLintRCConfig;
18
  "react-jsx": ESLintRCConfig;
19
  angular: ESLintRCConfig;
20
  "angular-template": ESLintRCConfig;
21
  
22
  // Flat configurations (ESLint 9+)
23
  "flat/base": FlatConfig[];
24
  "flat/typescript": FlatConfig[];
25
  "flat/javascript": FlatConfig[];
26
  "flat/react": FlatConfig[];
27
  "flat/react-base": FlatConfig[];
28
  "flat/react-typescript": FlatConfig[];
29
  "flat/react-jsx": FlatConfig[];
30
  "flat/angular": FlatConfig[];
31
  "flat/angular-template": FlatConfig[];
32
}
33
```
34

35
### ESLintRC Configuration Format
36

37
Legacy configuration format for ESLint versions prior to 9.0.
38

39
```typescript { .api }
40
interface ESLintRCConfig {
41
  parser?: string;
42
  parserOptions?: {
43
    ecmaVersion?: number;
44
    sourceType?: "module" | "script";
45
    tsconfigRootDir?: string;
46
    ecmaFeatures?: {
47
      jsx?: boolean;
48
      globalReturn?: boolean;
49
    };
50
  };
51
  plugins?: string[];
52
  extends?: string[];
53
  rules?: Record<string, RuleConfigValue>;
54
  env?: Record<string, boolean>;
55
  globals?: Record<string, boolean>;
56
  settings?: Record<string, any>;
57
}
58

59
type RuleConfigValue = "off" | "warn" | "error" | 0 | 1 | 2 | [RuleLevel, ...any[]];
60
type RuleLevel = "off" | "warn" | "error" | 0 | 1 | 2;
61
```
62

63
### Flat Configuration Format
64

65
Modern configuration format for ESLint 9.0 and later.
66

67
```typescript { .api }
68
interface FlatConfig {
69
  name?: string;
70
  files?: string[];
71
  ignores?: string[];
72
  plugins?: Record<string, Plugin>;
73
  languageOptions?: {
74
    parser?: Parser;
75
    parserOptions?: Record<string, any>;
76
    ecmaVersion?: number;
77
    sourceType?: "module" | "script";
78
    globals?: Record<string, boolean>;
79
  };
80
  rules?: Record<string, RuleConfigValue>;
81
  settings?: Record<string, any>;
82
  processor?: Processor;
83
}
84

85
type FlatConfig = FlatConfig[];
86
```
87

88
## Framework-Specific Configurations
89

90
### TypeScript Configurations
91

92
Comprehensive TypeScript setup with recommended rules and Prettier integration when available.
93

94
```typescript { .api }
95
// ESLintRC format
96
const typescriptConfig: ESLintRCConfig = {
97
  parser: "@typescript-eslint/parser",
98
  parserOptions: {
99
    ecmaVersion: 2020,
100
    sourceType: "module",
101
    tsconfigRootDir: string; // Set to workspace root
102
  },
103
  plugins: ["@typescript-eslint"],
104
  extends: [
105
    "eslint:recommended",
106
    "plugin:@typescript-eslint/eslint-recommended", 
107
    "plugin:@typescript-eslint/recommended",
108
    "prettier" // If available
109
  ],
110
  rules: {
111
    // Custom TypeScript rules
112
    "@typescript-eslint/explicit-member-accessibility": "off",
113
    "@typescript-eslint/explicit-module-boundary-types": "off",
114
    "@typescript-eslint/no-non-null-assertion": "warn",
115
    "@typescript-eslint/no-unused-vars": "warn",
116
    // ... additional rules
117
  };
118
};
119

120
// Flat config format  
121
const typescriptFlatConfig: FlatConfig[] = [
122
  {
123
    files: ["**/*.ts", "**/*.tsx", "**/*.cts", "**/*.mts"],
124
    extends: [eslint.configs.recommended, ...tseslint.configs.recommended],
125
    languageOptions: {
126
      parser: tseslint.parser,
127
      ecmaVersion: 2020,
128
      sourceType: "module",
129
      parserOptions: {
130
        tsconfigRootDir: string; // Workspace root
131
      }
132
    },
133
    rules: {
134
      // Same rule configuration as ESLintRC
135
    }
136
  }
137
];
138
```
139

140
**Usage Examples:**
141

142
```typescript
143
// ESLintRC (.eslintrc.js)
144
module.exports = {
145
  extends: ["plugin:@nx/typescript"]
146
};
147

148
// Flat config (eslint.config.js)
149
import nxPlugin from "@nx/eslint-plugin";
150

151
export default [
152
  ...nxPlugin.configs["flat/typescript"]
153
];
154
```
155

156
### JavaScript Configurations
157

158
Standard JavaScript configuration with ES2020 support and common best practices.
159

160
```typescript { .api }
161
// ESLintRC format
162
const javascriptConfig: ESLintRCConfig = {
163
  parserOptions: {
164
    ecmaVersion: 2020,
165
    sourceType: "module"
166
  },
167
  extends: [
168
    "eslint:recommended",
169
    "prettier" // If available
170
  ],
171
  env: {
172
    browser: true,
173
    es6: true,
174
    node: true
175
  },
176
  rules: {
177
    // JavaScript-specific rules
178
  }
179
};
180

181
// Flat config format
182
const javascriptFlatConfig: FlatConfig[] = [
183
  {
184
    files: ["**/*.js", "**/*.jsx", "**/*.cjs", "**/*.mjs"],
185
    extends: [eslint.configs.recommended],
186
    languageOptions: {
187
      ecmaVersion: 2020,
188
      sourceType: "module",
189
      globals: {
190
        ...globals.browser,
191
        ...globals.node,
192
        ...globals.es2020
193
      }
194
    }
195
  }
196
];
197
```
198

199
### React Configurations
200

201
Multiple React configurations for different use cases and setups.
202

203
```typescript { .api }
204
// React Base Configuration  
205
const reactBaseConfig: ESLintRCConfig = {
206
  plugins: ["react", "react-hooks"],
207
  extends: [
208
    "plugin:react/recommended",
209
    "plugin:react-hooks/recommended"
210
  ],
211
  parserOptions: {
212
    ecmaFeatures: {
213
      jsx: true
214
    }
215
  },
216
  settings: {
217
    react: {
218
      version: "detect"
219
    }
220
  },
221
  rules: {
222
    "react/prop-types": "off", // Assuming TypeScript usage
223
    "react/react-in-jsx-scope": "off" // React 17+ JSX transform
224
  }
225
};
226

227
// React TypeScript Configuration
228
const reactTypescriptConfig: ESLintRCConfig = {
229
  extends: [
230
    "plugin:@nx/typescript",
231
    "plugin:@nx/react-base"
232
  ]
233
};
234

235
// React JSX Configuration (JavaScript React)
236
const reactJsxConfig: ESLintRCConfig = {
237
  extends: [
238
    "plugin:@nx/javascript", 
239
    "plugin:@nx/react-base"
240
  ]
241
};
242
```
243

244
**Usage Examples:**
245

246
```typescript
247
// TypeScript React project
248
module.exports = {
249
  extends: ["plugin:@nx/react-typescript"]
250
};
251

252
// JavaScript React project  
253
module.exports = {
254
  extends: ["plugin:@nx/react-jsx"]
255
};
256

257
// Flat config React
258
import nxPlugin from "@nx/eslint-plugin";
259

260
export default [
261
  ...nxPlugin.configs["flat/react-typescript"]
262
];
263
```
264

265
### Angular Configurations
266

267
Angular-specific configurations for code and template files.
268

269
```typescript { .api }
270
// Angular Code Configuration
271
const angularConfig: ESLintRCConfig = {
272
  extends: [
273
    "plugin:@nx/typescript",
274
    "plugin:@angular-eslint/recommended"
275
  ],
276
  rules: {
277
    "@angular-eslint/directive-selector": [
278
      "error",
279
      { type: "attribute", prefix: "app", style: "camelCase" }
280
    ],
281
    "@angular-eslint/component-selector": [
282
      "error", 
283
      { type: "element", prefix: "app", style: "kebab-case" }
284
    ]
285
  }
286
};
287

288
// Angular Template Configuration
289
const angularTemplateConfig: ESLintRCConfig = {
290
  parser: "@angular-eslint/template-parser",
291
  extends: ["plugin:@angular-eslint/template/recommended"],
292
  rules: {
293
    "@angular-eslint/template/banana-in-box": "error",
294
    "@angular-eslint/template/no-negated-async": "error"
295
  }
296
};
297
```
298

299
**Usage Examples:**
300

301
```typescript
302
// Angular project (.eslintrc.js)
303
module.exports = {
304
  overrides: [
305
    {
306
      files: ["*.ts"],
307
      extends: ["plugin:@nx/angular"]
308
    },
309
    {
310
      files: ["*.html"],
311
      extends: ["plugin:@nx/angular-template"]  
312
    }
313
  ]
314
};
315

316
// Flat config Angular
317
import nxPlugin from "@nx/eslint-plugin";
318

319
export default [
320
  {
321
    files: ["**/*.ts"],
322
    ...nxPlugin.configs["flat/angular"]
323
  },
324
  {
325
    files: ["**/*.html"],
326
    ...nxPlugin.configs["flat/angular-template"]
327
  }
328
];
329
```
330

331
## Specialized Configurations
332

333
### Base Flat Configuration
334

335
Minimal base configuration for flat config setups.
336

337
```typescript { .api }
338
const baseFlatConfig: FlatConfig[] = [
339
  {
340
    plugins: {
341
      "@nx": nxPlugin
342
    },
343
    ignores: [".nx"]
344
  }
345
];
346
```
347

348
### Prettier Integration
349

350
All configurations automatically detect and integrate with Prettier when available.
351

352
```typescript { .api }
353
// Detection logic
354
const isPrettierAvailable = 
355
  packageExists('prettier') && 
356
  packageExists('eslint-config-prettier');
357

358
// Integration in ESLintRC
359
const configWithPrettier = {
360
  extends: [
361
    // ... other extends
362
    ...(isPrettierAvailable ? ['prettier'] : [])
363
  ]
364
};
365

366
// Integration in flat config  
367
const flatConfigWithPrettier = [
368
  // ... other configs
369
  ...(isPrettierAvailable ? [require('eslint-config-prettier')] : [])
370
];
371
```
372

373
## Configuration Overrides
374

375
All configurations can be extended and customized:
376

377
```typescript
378
// Extending TypeScript config
379
module.exports = {
380
  extends: ["plugin:@nx/typescript"],
381
  rules: {
382
    // Override or add rules
383
    "@typescript-eslint/no-explicit-any": "error",
384
    "@nx/enforce-module-boundaries": ["error", {
385
      // Custom boundary rules
386
    }]
387
  }
388
};
389

390
// Flat config extension
391
import nxPlugin from "@nx/eslint-plugin";
392

393
export default [
394
  ...nxPlugin.configs["flat/typescript"],
395
  {
396
    rules: {
397
      // Custom overrides
398
      "@typescript-eslint/no-explicit-any": "error"
399
    }
400
  }
401
];
402
```