0
# Vite Plugin Checker
1

2
Vite Plugin Checker is a Vite plugin that runs TypeScript, VLS, vue-tsc, ESLint, Biome, and Stylelint checkers in worker threads for real-time type checking and linting during development without blocking the main build process.
3

4
## Package Information
5

6
- **Package Name**: vite-plugin-checker
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install vite-plugin-checker`
10
- **Node.js Version**: >= 14.16
11

12
## Core Imports
13

14
```typescript
15
import { checker } from "vite-plugin-checker";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const { checker } = require("vite-plugin-checker");
22
```
23

24
Default import (equivalent to named import):
25

26
```typescript
27
import checker from "vite-plugin-checker";
28
```
29

30
## Basic Usage
31

32
```typescript
33
import { defineConfig } from "vite";
34
import checker from "vite-plugin-checker";
35

36
export default defineConfig({
37
  plugins: [
38
    checker({
39
      // Enable TypeScript checker
40
      typescript: true,
41
      // Enable ESLint checker
42
      eslint: {
43
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
44
      },
45
      // Enable Vue TypeScript checker
46
      vueTsc: true,
47
      // Configure overlay
48
      overlay: {
49
        initialIsOpen: false,
50
        position: 'tl',
51
      },
52
      // Enable terminal output
53
      terminal: true,
54
      // Enable build-time checking
55
      enableBuild: true,
56
    }),
57
  ],
58
});
59
```
60

61
## Architecture
62

63
Vite Plugin Checker is built around several key components:
64

65
- **Worker Thread Architecture**: All checkers run in separate worker threads to avoid blocking the main build process
66
- **Plugin Factory**: The `checker` function creates a Vite plugin with configuration for multiple checker types
67
- **Real-time Error Overlay**: Development server integration provides instant visual feedback via error overlays
68
- **Build Integration**: Supports build-time checking with configurable exit codes for CI/CD workflows
69
- **WebSocket Communication**: Uses Vite's WebSocket server for real-time error reporting and overlay updates
70

71
## Capabilities
72

73
### Main Plugin Factory
74

75
Core plugin factory function that creates the vite-plugin-checker plugin with support for multiple checker types simultaneously.
76

77
```typescript { .api }
78
function checker(userConfig: UserPluginConfig): Plugin;
79

80
type UserPluginConfig = Partial<PluginConfig>;
81
```
82

83
[Plugin Configuration](./plugin-configuration.md)
84

85
### TypeScript Checking
86

87
TypeScript type checking via the built-in TypeScript compiler, supporting custom tsconfig paths and build modes.
88

89
```typescript { .api }
90
interface UserPluginConfig {
91
  typescript?: TscConfig;
92
}
93

94
type TscConfig = boolean | Partial<TsConfigOptions>;
95

96
interface TsConfigOptions {
97
  tsconfigPath: string;
98
  typescriptPath: string;
99
  root: string;
100
  buildMode: boolean;
101
}
102
```
103

104
[TypeScript Checker](./typescript-checker.md)
105

106
### Vue TypeScript Checking
107

108
Vue Single File Component type checking using vue-tsc, with full TypeScript integration for Vue projects.
109

110
```typescript { .api }
111
interface UserPluginConfig {
112
  vueTsc?: VueTscConfig;
113
}
114

115
type VueTscConfig = boolean | Partial<TsConfigOptions>;
116
```
117

118
[Vue TypeScript Checker](./vue-typescript-checker.md)
119

120
### ESLint Integration
121

122
ESLint linting with customizable rules, file watching, and development/build mode configurations.
123

124
```typescript { .api }
125
interface UserPluginConfig {
126
  eslint?: EslintConfig;
127
}
128

129
type EslintConfig = false | {
130
  watchPath?: string | string[];
131
  lintCommand: string;
132
  useFlatConfig?: boolean;
133
  dev?: Partial<{
134
    overrideConfig: ESLint.Options;
135
    logLevel: ('error' | 'warning')[];
136
  }>;
137
};
138
```
139

140
[ESLint Checker](./eslint-checker.md)
141

142
### Stylelint Integration
143

144
CSS and SCSS linting via Stylelint with development and build mode configurations.
145

146
```typescript { .api }
147
interface UserPluginConfig {
148
  stylelint?: StylelintConfig;
149
}
150

151
type StylelintConfig = false | {
152
  watchPath?: string | string[];
153
  lintCommand: string;
154
  dev?: Partial<{
155
    overrideConfig: Stylelint.LinterOptions;
156
    logLevel: ('error' | 'warning')[];
157
  }>;
158
};
159
```
160

161
[Stylelint Checker](./stylelint-checker.md)
162

163
### Biome Integration
164

165
Biome checker for linting, formatting, and type checking with support for multiple command modes.
166

167
```typescript { .api }
168
interface UserPluginConfig {
169
  biome?: BiomeConfig;
170
}
171

172
type BiomeConfig = boolean | {
173
  command?: BiomeCommand;
174
  flags?: string;
175
  dev?: Partial<{
176
    command: BiomeCommand;
177
    flags?: string;
178
    logLevel: ('error' | 'warning' | 'info')[];
179
  }>;
180
  build?: Partial<{
181
    command: BiomeCommand;
182
    flags?: string;
183
  }>;
184
};
185

186
type BiomeCommand = 'lint' | 'check' | 'format' | 'ci';
187
```
188

189
[Biome Checker](./biome-checker.md)
190

191
### VLS Integration
192

193
Vue Language Server integration for Vue.js development with comprehensive language support.
194

195
```typescript { .api }
196
interface UserPluginConfig {
197
  vls?: VlsConfig;
198
}
199

200
type VlsConfig = boolean | DeepPartial<VlsOptions>;
201
```
202

203
[VLS Checker](./vls-checker.md)
204

205
### Error Overlay System
206

207
Customizable error overlay system for development mode with real-time error reporting and visual feedback.
208

209
```typescript { .api }
210
interface SharedConfig {
211
  overlay: boolean | OverlayConfig;
212
}
213

214
interface OverlayConfig {
215
  initialIsOpen?: boolean | 'error';
216
  position?: 'tl' | 'tr' | 'bl' | 'br';
217
  badgeStyle?: string;
218
  panelStyle?: string;
219
}
220
```
221

222
[Error Overlay](./error-overlay.md)
223

224
## Types
225

226
```typescript { .api }
227
interface SharedConfig {
228
  overlay: boolean | OverlayConfig;
229
  terminal: boolean;
230
  enableBuild: boolean;
231
  root?: string;
232
}
233

234
interface BuildInCheckers {
235
  typescript: TscConfig;
236
  vueTsc: VueTscConfig;
237
  vls: VlsConfig;
238
  eslint: EslintConfig;
239
  stylelint: StylelintConfig;
240
  biome: BiomeConfig;
241
}
242

243
type PluginConfig = SharedConfig & BuildInCheckers;
244

245
/** User configuration makes all properties optional */
246
type UserPluginConfig = Partial<PluginConfig>;
247

248
enum DiagnosticLevel {
249
  Warning = 0,
250
  Error = 1,
251
  Suggestion = 2,
252
  Message = 3,
253
}
254

255
interface DiagnosticToRuntime extends ErrorPayload['err'] {
256
  checkerId: string;
257
  level?: DiagnosticLevel;
258
}
259

260
type DeepPartial<T> = {
261
  [P in keyof T]?: T[P] extends Record<string, any> ? DeepPartial<T[P]> : T[P];
262
};
263
```