0
# Preset Configurations
1
2
Collection of shared TypeScript-ESLint configurations adapted for Vue single-file components, providing comprehensive rule coverage for different strictness levels and use cases.
3
4
## Capabilities
5
6
### vueTsConfigs Object
7
8
Contains all shared configurations from typescript-eslint, modified to work with Vue files in addition to TypeScript files.
9
10
```typescript { .api }
11
/**
12
* Collection of TypeScript-ESLint configurations adapted for Vue files
13
* Each config is a TsEslintConfigForVue instance that can be used in defineConfigWithVueTs
14
*/
15
const vueTsConfigs: Record<ExtendableConfigName, TsEslintConfigForVue>;
16
17
type ExtendableConfigName =
18
| "all"
19
| "base"
20
| "disableTypeChecked"
21
| "eslintRecommended"
22
| "recommended"
23
| "recommendedTypeChecked"
24
| "recommendedTypeCheckedOnly"
25
| "strict"
26
| "strictTypeChecked"
27
| "strictTypeCheckedOnly"
28
| "stylistic"
29
| "stylisticTypeChecked"
30
| "stylisticTypeCheckedOnly";
31
```
32
33
**Usage Examples:**
34
35
```typescript
36
import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
37
38
// Use recommended config (no type checking)
39
export default defineConfigWithVueTs(vueTsConfigs.recommended);
40
41
// Use type-checked recommended config
42
export default defineConfigWithVueTs(vueTsConfigs.recommendedTypeChecked);
43
44
// Use strict type-checked config
45
export default defineConfigWithVueTs(vueTsConfigs.strictTypeChecked);
46
47
// Combine multiple configs
48
export default defineConfigWithVueTs(
49
vueTsConfigs.base,
50
vueTsConfigs.stylistic,
51
);
52
```
53
54
### TsEslintConfigForVue Class
55
56
Wrapper class for typescript-eslint configs that adapts them to work with Vue single-file components.
57
58
```typescript { .api }
59
import type { FlatConfig } from '@typescript-eslint/utils/ts-eslint';
60
61
class TsEslintConfigForVue {
62
/** The name of the config as defined in typescript-eslint */
63
configName: ExtendableConfigName;
64
/** Display name for better error messages */
65
name: string;
66
67
constructor(configName: ExtendableConfigName);
68
69
/**
70
* Determines if this config requires type checking services
71
* @returns true if config includes type-aware rules
72
*/
73
needsTypeChecking(): boolean;
74
75
/**
76
* Creates extended version with additional options merged
77
* @param restOfConfig - Additional configuration options to merge
78
* @returns New TsEslintConfigForVue instance with merged options
79
*/
80
asExtendedWith(restOfConfig: ExtendsOptions): TsEslintConfigForVue;
81
82
/**
83
* Converts to ESLint flat config array with Vue file support
84
* @returns Array of ESLint configuration objects
85
*/
86
toConfigArray(): FlatConfig.ConfigArray;
87
}
88
89
interface ExtendsOptions {
90
name?: string;
91
files?: (string | string[])[];
92
ignores?: string[];
93
}
94
```
95
96
### Available Configurations
97
98
#### Basic Configurations
99
100
**base**: Foundational configuration without specific rule recommendations
101
```typescript
102
vueTsConfigs.base
103
```
104
105
**eslintRecommended**: ESLint's recommended rules adapted for TypeScript + Vue
106
```typescript
107
vueTsConfigs.eslintRecommended
108
```
109
110
#### Syntax-Only Configurations
111
112
**recommended**: TypeScript-ESLint recommended rules (no type checking required)
113
```typescript
114
vueTsConfigs.recommended
115
```
116
117
**strict**: Stricter rule set (no type checking required)
118
```typescript
119
vueTsConfigs.strict
120
```
121
122
**stylistic**: Style-focused rules (no type checking required)
123
```typescript
124
vueTsConfigs.stylistic
125
```
126
127
#### Type-Aware Configurations
128
129
**recommendedTypeChecked**: Recommended rules with type-aware rules enabled
130
```typescript
131
vueTsConfigs.recommendedTypeChecked
132
```
133
134
**recommendedTypeCheckedOnly**: Only type-aware recommended rules
135
```typescript
136
vueTsConfigs.recommendedTypeCheckedOnly
137
```
138
139
**strictTypeChecked**: Strict rules with type-aware rules enabled
140
```typescript
141
vueTsConfigs.strictTypeChecked
142
```
143
144
**strictTypeCheckedOnly**: Only type-aware strict rules
145
```typescript
146
vueTsConfigs.strictTypeCheckedOnly
147
```
148
149
**stylisticTypeChecked**: Stylistic rules with type-aware rules enabled
150
```typescript
151
vueTsConfigs.stylisticTypeChecked
152
```
153
154
**stylisticTypeCheckedOnly**: Only type-aware stylistic rules
155
```typescript
156
vueTsConfigs.stylisticTypeCheckedOnly
157
```
158
159
#### Special Configurations
160
161
**all**: All available rules from typescript-eslint (includes type-aware rules)
162
```typescript
163
vueTsConfigs.all
164
```
165
166
**disableTypeChecked**: Explicitly disables type-checked rules
167
```typescript
168
vueTsConfigs.disableTypeChecked
169
```
170
171
### Configuration Behavior
172
173
#### Vue File Integration
174
175
Each configuration automatically:
176
177
- Applies TypeScript rules to `.vue` files in addition to `.ts` files
178
- Configures vue-eslint-parser for proper Vue SFC parsing
179
- Sets up TypeScript parser for `<script>` blocks in Vue files
180
- Handles mixed script languages (ts, js, tsx, jsx) as configured
181
182
#### Type Checking Integration
183
184
Type-aware configurations require:
185
186
- A valid TypeScript project (tsconfig.json)
187
- Proper parser services setup (handled automatically by defineConfigWithVueTs)
188
- Vue files with TypeScript script blocks for full type checking benefits
189
190
**Example with type checking:**
191
192
```typescript
193
import { defineConfigWithVueTs, vueTsConfigs, configureVueProject } from "@vue/eslint-config-typescript";
194
195
// Configure project for optimal type checking
196
configureVueProject({
197
tsSyntaxInTemplates: true,
198
scriptLangs: ["ts"],
199
allowComponentTypeUnsafety: true,
200
});
201
202
export default defineConfigWithVueTs(
203
vueTsConfigs.strictTypeChecked,
204
{
205
// Type-aware rules will work on these files
206
files: ["**/*.{ts,vue}"],
207
},
208
);
209
```