0
# Configuration Management
1

2
Core utility for creating ESLint configurations with Vue.js + TypeScript support, handling complex config merging, type-aware rule processing, and Vue file integration.
3

4
## Capabilities
5

6
### defineConfigWithVueTs Function
7

8
Creates and processes ESLint configurations with Vue.js + TypeScript support, automatically handling rule merging, type checking setup, and Vue file parsing.
9

10
```typescript { .api }
11
import type { TSESLint } from '@typescript-eslint/utils';
12

13
/**
14
 * Creates ESLint configurations with Vue + TypeScript support
15
 * @param configs - Configuration objects with support for extends and Vue-specific settings
16
 * @returns Processed configuration array ready for ESLint consumption
17
 */
18
function defineConfigWithVueTs(
19
  ...configs: InfiniteDepthConfigWithExtendsAndVueSupport[]
20
): ConfigItem[];
21

22
type InfiniteDepthConfigWithExtendsAndVueSupport =
23
  | TsEslintConfigForVue
24
  | ConfigItemWithExtendsAndVueSupport
25
  | InfiniteDepthConfigWithExtendsAndVueSupport[];
26

27
interface ConfigItemWithExtendsAndVueSupport extends ConfigItem {
28
  /** Array of configurations to extend from, with nested support */
29
  extends?: InfiniteDepthConfigWithExtendsAndVueSupport[];
30
}
31

32
type ConfigItem = TSESLint.FlatConfig.Config;
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import pluginVue from "eslint-plugin-vue";
39
import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
40

41
// Basic configuration
42
export default defineConfigWithVueTs(
43
  pluginVue.configs["flat/essential"],
44
  vueTsConfigs.recommended,
45
);
46

47
// Advanced configuration with custom rules
48
export default defineConfigWithVueTs(
49
  {
50
    name: "app/files-to-lint",
51
    files: ["**/*.{ts,mts,tsx,vue}"],
52
  },
53
  {
54
    name: "app/files-to-ignore", 
55
    ignores: ["**/dist/**", "**/coverage/**"],
56
  },
57
  pluginVue.configs["flat/essential"],
58
  vueTsConfigs.strictTypeChecked,
59
  {
60
    name: "custom-overrides",
61
    files: ["**/*.vue"],
62
    rules: {
63
      "@typescript-eslint/no-unused-vars": "warn",
64
    },
65
  },
66
);
67

68
// Configuration with extends pattern
69
export default defineConfigWithVueTs({
70
  extends: [
71
    vueTsConfigs.recommended,
72
    {
73
      name: "vue-specific",
74
      files: ["**/*.vue"],
75
      rules: {
76
        "vue/multi-word-component-names": "off",
77
      },
78
    },
79
  ],
80
});
81
```
82

83
### Configuration Processing
84

85
The function performs several key processing steps:
86

87
1. **Config Flattening**: Recursively flattens nested configurations and extends arrays
88
2. **Vue Plugin Deduplication**: Ensures consistent eslint-plugin-vue versions across configs
89
3. **Rule Reordering**: Automatically orders configs for optimal Vue + TypeScript integration
90
4. **Type-Aware Rule Extraction**: Separates type-aware rules for performance optimization
91
5. **Vue File Integration**: Configures parsers and rules specifically for Vue single-file components
92

93
### Internal Processing Types
94

95
```typescript { .api }
96
interface ExtendsOptions {
97
  name?: string;
98
  files?: (string | string[])[];
99
  ignores?: string[];
100
}
101
```
102

103
### Error Handling
104

105
The function validates configurations and provides meaningful error messages for common issues:
106

107
- Invalid configuration names in extends arrays
108
- Missing required Vue plugin configurations  
109
- Conflicting rule definitions between configs
110
- Type checking setup issues for Vue files
111

112
**Common Errors:**
113

114
```typescript
115
// This will throw an error - invalid config name
116
vueTsConfigs.recommendedTypecheck // Should be: recommendedTypeChecked
117

118
// This will warn about plugin version conflicts
119
// when multiple vue plugin instances are detected
120
```