0
# @vue/eslint-config-typescript
1

2
@vue/eslint-config-typescript provides ESLint configuration for Vue.js 3 + TypeScript projects with advanced utilities for seamless integration. It offers utilities like `defineConfigWithVueTs` for configuration management, `vueTsConfigs` containing shared TypeScript-ESLint configurations adapted for Vue files, and `configureVueProject` factory for advanced project-specific setup.
3

4
## Package Information
5

6
- **Package Name**: @vue/eslint-config-typescript
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm add --dev @vue/eslint-config-typescript`
10

11
## Core Imports
12

13
```typescript
14
import {
15
  defineConfigWithVueTs,
16
  vueTsConfigs,
17
  configureVueProject,
18
} from "@vue/eslint-config-typescript";
19
```
20

21
For CommonJS:
22

23
```javascript
24
const {
25
  defineConfigWithVueTs,
26
  vueTsConfigs,
27
  configureVueProject,
28
} = require("@vue/eslint-config-typescript");
29
```
30

31
Legacy import (deprecated):
32

33
```typescript
34
import createConfig from "@vue/eslint-config-typescript";
35
```
36

37
## Basic Usage
38

39
```typescript
40
import pluginVue from "eslint-plugin-vue";
41
import {
42
  defineConfigWithVueTs,
43
  vueTsConfigs,
44
} from "@vue/eslint-config-typescript";
45

46
export default defineConfigWithVueTs(
47
  pluginVue.configs["flat/essential"],
48
  vueTsConfigs.recommended,
49
);
50
```
51

52
## Architecture  
53

54
@vue/eslint-config-typescript is built around several key components:
55

56
- **Configuration Factory**: `defineConfigWithVueTs` handles complex config processing and merging with TypeScript-ESLint rules
57
- **Preset Configurations**: `vueTsConfigs` provides all shared TypeScript-ESLint configurations adapted for Vue files
58
- **Project Configuration**: `configureVueProject` allows fine-tuning of Vue-specific settings like script languages and type checking behavior
59
- **Vue File Processing**: Automatic detection and categorization of Vue files for optimal type checking performance
60
- **Type-Aware Rule Management**: Intelligent handling of type-aware rules with performance optimizations
61

62
## Capabilities
63

64
### Configuration Management
65

66
Core utility for creating ESLint configurations with Vue.js + TypeScript support, handling complex config merging and rule processing.
67

68
```typescript { .api }
69
function defineConfigWithVueTs(
70
  ...configs: InfiniteDepthConfigWithExtendsAndVueSupport[]
71
): ConfigItem[];
72

73
type InfiniteDepthConfigWithExtendsAndVueSupport =
74
  | TsEslintConfigForVue
75
  | ConfigItemWithExtendsAndVueSupport
76
  | InfiniteDepthConfigWithExtendsAndVueSupport[];
77

78
interface ConfigItemWithExtendsAndVueSupport extends ConfigItem {
79
  extends?: InfiniteDepthConfigWithExtendsAndVueSupport[];
80
}
81
```
82

83
[Configuration Management](./configuration.md)
84

85
### Preset Configurations
86

87
Collection of shared TypeScript-ESLint configurations adapted for Vue single-file components with comprehensive rule coverage.
88

89
```typescript { .api }
90
const vueTsConfigs: Record<ExtendableConfigName, TsEslintConfigForVue>;
91

92
type ExtendableConfigName =
93
  | "all"
94
  | "base" 
95
  | "disableTypeChecked"
96
  | "eslintRecommended"
97
  | "recommended"
98
  | "recommendedTypeChecked"
99
  | "recommendedTypeCheckedOnly"
100
  | "strict"
101
  | "strictTypeChecked"
102
  | "strictTypeCheckedOnly"
103
  | "stylistic"
104
  | "stylisticTypeChecked"
105
  | "stylisticTypeCheckedOnly";
106

107
class TsEslintConfigForVue {
108
  configName: ExtendableConfigName;
109
  name: string;
110
  needsTypeChecking(): boolean;
111
  asExtendedWith(restOfConfig: ExtendsOptions): TsEslintConfigForVue;
112
  toConfigArray(): FlatConfig.ConfigArray;
113
}
114
```
115

116
[Preset Configurations](./presets.md)
117

118
### Project Configuration
119

120
Factory function for configuring Vue project-specific options like script language support and type checking behavior.
121

122
```typescript { .api }
123
function configureVueProject(userOptions: ProjectOptions): void;
124

125
interface ProjectOptions {
126
  /** Whether to parse TypeScript syntax in Vue templates. Defaults to `true` */
127
  tsSyntaxInTemplates?: boolean;
128
  /** Allowed script languages in `vue` files. Defaults to `['ts']` */
129
  scriptLangs?: ScriptLang[];
130
  /** Whether to override some `no-unsafe-*` rules for Vue components. Defaults to `true` */
131
  allowComponentTypeUnsafety?: boolean;
132
  /** The root directory of the project. Defaults to `process.cwd()` */
133
  rootDir?: string;
134
}
135

136
type ScriptLang = "ts" | "tsx" | "js" | "jsx";
137
```
138

139
[Project Configuration](./project-config.md)
140

141
### Legacy API (Deprecated)
142

143
Deprecated functions provided for backward compatibility with versions ≤14.2.0.
144

145
```typescript { .api }
146
/** @deprecated Use `defineConfigWithVueTs` + `vueTsConfigs` instead */
147
export default function createConfig(options?: ConfigOptions): FlatConfig.ConfigArray;
148

149
/** @deprecated `defineConfig` is renamed to `defineConfigWithVueTs` in 14.3.0 */
150
export const defineConfig: typeof defineConfigWithVueTs;
151
```
152

153
[Legacy API](./legacy-api.md)
154

155
## Types
156

157
```typescript { .api }
158
import type { TSESLint } from '@typescript-eslint/utils';
159

160
interface ExtendsOptions {
161
  name?: string;
162
  files?: (string | string[])[];
163
  ignores?: string[];
164
}
165

166
type ConfigItem = TSESLint.FlatConfig.Config;
167
```