0
# VLS Checker
1

2
Vue Language Server (VLS) integration providing comprehensive language support for Vue.js development including template validation, script analysis, and style checking.
3

4
## Capabilities
5

6
### VLS Configuration
7

8
Enable and configure Vue Language Server for comprehensive Vue.js development support with customizable options.
9

10
```typescript { .api }
11
/**
12
 * VLS checker configuration
13
 * - Set to `true` to enable VLS with default configuration
14
 * - Set to `false` to disable VLS checking
15
 * - Provide partial VLS options for custom setup
16
 */
17
type VlsConfig = boolean | DeepPartial<VlsOptions>;
18

19
type DeepPartial<T> = {
20
  [P in keyof T]?: T[P] extends Record<string, any> ? DeepPartial<T[P]> : T[P];
21
};
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
// Simple enable with defaults
28
checker({
29
  vls: true,
30
});
31

32
// Custom VLS configuration
33
checker({
34
  vls: {
35
    vetur: {
36
      validation: {
37
        template: true,
38
        style: true,
39
        script: true,
40
      },
41
      completion: {
42
        autoImport: true,
43
        tagCasing: 'kebab',
44
      },
45
    },
46
  },
47
});
48
```
49

50
### VLS Options Interface
51

52
The VLS configuration accepts comprehensive options for Vue language server behavior:
53

54
```typescript { .api }
55
interface VlsOptions {
56
  /** Vetur-specific configuration options */
57
  vetur?: VeturConfig;
58
  
59
  /** Language server initialization parameters */
60
  initializationOptions?: VlsInitializationOptions;
61
  
62
  /** File watching and project configuration */
63
  workspaceConfig?: VlsWorkspaceConfig;
64
}
65

66
interface VeturConfig {
67
  /** Validation settings for different Vue SFC sections */
68
  validation?: ValidationConfig;
69
  
70
  /** Code completion and IntelliSense settings */
71
  completion?: CompletionConfig;
72
  
73
  /** Formatting configuration */
74
  format?: FormatConfig;
75
  
76
  /** Language-specific settings */
77
  languageFeatures?: LanguageFeaturesConfig;
78
}
79
```
80

81
### Validation Configuration
82

83
Configure validation behavior for Vue Single File Components:
84

85
```typescript { .api }
86
interface ValidationConfig {
87
  /** Enable template validation */
88
  template?: boolean;
89
  
90
  /** Enable style validation */
91
  style?: boolean;
92
  
93
  /** Enable script validation */
94
  script?: boolean;
95
  
96
  /** Template-specific validation options */
97
  templateValidation?: TemplateValidationConfig;
98
  
99
  /** Style-specific validation options */
100
  styleValidation?: StyleValidationConfig;
101
  
102
  /** Script-specific validation options */
103
  scriptValidation?: ScriptValidationConfig;
104
}
105

106
interface TemplateValidationConfig {
107
  /** Validate HTML syntax */
108
  html?: boolean;
109
  
110
  /** Validate Vue directives */
111
  directives?: boolean;
112
  
113
  /** Validate component props usage */
114
  props?: boolean;
115
  
116
  /** Validate event handlers */
117
  events?: boolean;
118
}
119
```
120

121
**Validation Examples:**
122

123
```typescript
124
// Enable all validation
125
vls: {
126
  vetur: {
127
    validation: {
128
      template: true,
129
      style: true,
130
      script: true,
131
      templateValidation: {
132
        html: true,
133
        directives: true,
134
        props: true,
135
        events: true,
136
      },
137
    },
138
  },
139
}
140

141
// Template-only validation
142
vls: {
143
  vetur: {
144
    validation: {
145
      template: true,
146
      style: false,
147
      script: false,
148
    },
149
  },
150
}
151
```
152

153
### Completion Configuration
154

155
Configure IntelliSense and code completion features:
156

157
```typescript { .api }
158
interface CompletionConfig {
159
  /** Enable auto-import suggestions */
160
  autoImport?: boolean;
161
  
162
  /** Tag name casing preference */
163
  tagCasing?: 'kebab' | 'pascal';
164
  
165
  /** Attribute name casing preference */
166
  attrCasing?: 'kebab' | 'camel';
167
  
168
  /** Enable workspace symbol completion */
169
  workspaceSymbols?: boolean;
170
  
171
  /** Vue-specific completion options */
172
  vue?: VueCompletionConfig;
173
  
174
  /** HTML completion options */
175
  html?: HtmlCompletionConfig;
176
  
177
  /** CSS completion options */
178
  css?: CssCompletionConfig;
179
}
180

181
interface VueCompletionConfig {
182
  /** Complete Vue directives */
183
  directives?: boolean;
184
  
185
  /** Complete component props */
186
  props?: boolean;
187
  
188
  /** Complete event names */
189
  events?: boolean;
190
  
191
  /** Complete slot names */
192
  slots?: boolean;
193
}
194
```
195

196
**Completion Examples:**
197

198
```typescript
199
// Comprehensive completion setup
200
vls: {
201
  vetur: {
202
    completion: {
203
      autoImport: true,
204
      tagCasing: 'pascal',
205
      attrCasing: 'kebab',
206
      workspaceSymbols: true,
207
      vue: {
208
        directives: true,
209
        props: true,
210
        events: true,
211
        slots: true,
212
      },
213
    },
214
  },
215
}
216

217
// Minimal completion setup
218
vls: {
219
  vetur: {
220
    completion: {
221
      autoImport: false,
222
      tagCasing: 'kebab',
223
    },
224
  },
225
}
226
```
227

228
### Format Configuration
229

230
Configure code formatting behavior for Vue files:
231

232
```typescript { .api }
233
interface FormatConfig {
234
  /** Default formatter for different languages */
235
  defaultFormatter?: FormatterConfig;
236
  
237
  /** Format on save behavior */
238
  defaultFormatterOptions?: FormatterOptions;
239
  
240
  /** Disable formatting for specific languages */
241
  enable?: boolean;
242
}
243

244
interface FormatterConfig {
245
  /** HTML template formatter */
246
  html?: 'none' | 'js-beautify-html' | 'prettyhtml';
247
  
248
  /** CSS/SCSS formatter */
249
  css?: 'none' | 'prettier';
250
  
251
  /** JavaScript formatter */
252
  js?: 'none' | 'prettier' | 'prettier-eslint';
253
  
254
  /** TypeScript formatter */
255
  ts?: 'none' | 'prettier' | 'prettier-tslint';
256
}
257
```
258

259
### Language Features Configuration
260

261
Configure advanced language features and integrations:
262

263
```typescript { .api }
264
interface LanguageFeaturesConfig {
265
  /** Code lens providers */
266
  codeLens?: CodeLensConfig;
267
  
268
  /** Hover information settings */
269
  hover?: HoverConfig;
270
  
271
  /** Signature help configuration */
272
  signatureHelp?: SignatureHelpConfig;
273
  
274
  /** Reference and definition finding */
275
  references?: ReferencesConfig;
276
}
277

278
interface CodeLensConfig {
279
  /** Show references code lens */
280
  references?: boolean;
281
  
282
  /** Show Vue component usage */
283
  componentUsage?: boolean;
284
}
285
```
286

287
### Default Configuration
288

289
When `vls: true` is used, the following default configuration is applied:
290

291
```typescript
292
{
293
  vetur: {
294
    validation: {
295
      template: true,
296
      style: true,
297
      script: true,
298
    },
299
    completion: {
300
      autoImport: true,
301
      tagCasing: 'kebab',
302
      workspaceSymbols: true,
303
    },
304
    format: {
305
      enable: true,
306
      defaultFormatter: {
307
        html: 'js-beautify-html',
308
        css: 'prettier',
309
        js: 'prettier',
310
        ts: 'prettier',
311
      },
312
    },
313
  },
314
}
315
```
316

317
### Development Mode Features
318

319
In development mode, VLS provides:
320

321
- **Real-time validation**: Immediate feedback on template, script, and style errors
322
- **IntelliSense**: Auto-completion for Vue directives, components, and props
323
- **Hover information**: Type information and documentation on hover
324
- **Go to definition**: Navigate to component and method definitions
325
- **Error highlighting**: Visual indicators for syntax and semantic errors
326
- **Code lens**: Reference counts and usage information
327

328
### Vue-Specific Features
329

330
**Template Support:**
331
- HTML syntax validation
332
- Vue directive validation (v-if, v-for, v-model, etc.)
333
- Component prop validation
334
- Event handler validation
335
- Slot usage validation
336

337
**Script Support:**
338
- Vue component options validation
339
- Composition API support
340
- Props and emit type checking
341
- Lifecycle hook validation
342
- Computed and watch property analysis
343

344
**Style Support:**
345
- CSS syntax validation
346
- SCSS/Sass support
347
- Scoped style validation
348
- CSS modules integration
349

350
### Integration Examples
351

352
**Basic Vue 3 Project:**
353
```typescript
354
checker({
355
  vls: {
356
    vetur: {
357
      validation: {
358
        template: true,
359
        style: true,
360
        script: true,
361
      },
362
      completion: {
363
        autoImport: true,
364
        tagCasing: 'pascal',
365
      },
366
    },
367
  },
368
});
369
```
370

371
**Vue 3 with TypeScript:**
372
```typescript
373
checker({
374
  vls: {
375
    vetur: {
376
      validation: {
377
        template: true,
378
        style: true,
379
        script: true,
380
        scriptValidation: {
381
          typescript: true,
382
        },
383
      },
384
      completion: {
385
        autoImport: true,
386
        vue: {
387
          directives: true,
388
          props: true,
389
          events: true,
390
        },
391
      },
392
    },
393
  },
394
});
395
```
396

397
**Vue 2 Legacy Project:**
398
```typescript
399
checker({
400
  vls: {
401
    vetur: {
402
      validation: {
403
        template: true,
404
        style: false, // Handled by separate stylelint
405
        script: true,
406
      },
407
      completion: {
408
        tagCasing: 'kebab',
409
        attrCasing: 'kebab',
410
      },
411
      format: {
412
        defaultFormatter: {
413
          html: 'js-beautify-html',
414
          js: 'prettier-eslint',
415
        },
416
      },
417
    },
418
  },
419
});
420
```
421

422
### Error Reporting
423

424
VLS errors are reported with Vue-specific context:
425

426
- **SFC section**: Template, script, or style block identification
427
- **Vue context**: Component, directive, or prop-specific information
428
- **Syntax highlighting**: Visual indicators in the error overlay
429
- **Quick fixes**: Automated fix suggestions when available
430
- **Related information**: Additional context for complex errors
431

432
### Performance Considerations
433

434
VLS performance can be optimized by:
435

436
- Disabling unused validation features
437
- Limiting workspace symbol indexing
438
- Using specific formatters instead of default ones
439
- Configuring appropriate file watching patterns
440

441
### Troubleshooting
442

443
**VLS not starting:**
444
```bash
445
npm install --save-dev vls
446
```
447

448
**Template validation issues:**
449
Ensure Vue files are properly structured:
450
```vue
451
<template>
452
  <!-- Valid template content -->
453
</template>
454

455
<script>
456
export default {
457
  // Valid component options
458
}
459
</script>
460

461
<style>
462
/* Valid styles */
463
</style>
464
```
465

466
**Completion not working:**
467
Enable workspace symbols and auto-import:
468
```typescript
469
vls: {
470
  vetur: {
471
    completion: {
472
      autoImport: true,
473
      workspaceSymbols: true,
474
    },
475
  },
476
}
477
```
478

479
**Formatting conflicts:**
480
Configure specific formatters to avoid conflicts:
481
```typescript
482
vls: {
483
  vetur: {
484
    format: {
485
      defaultFormatter: {
486
        html: 'none', // Let prettier handle HTML
487
        css: 'prettier',
488
        js: 'prettier',
489
      },
490
    },
491
  },
492
}
493
```