tessl/npm-vite-plugin-checker

Vite plugin that runs TypeScript type checker on a separate process.

—

Pending

Overview

Eval results

Files

VLS Checker

Name: tessl/npm-vite-plugin-checker
Author: tessl

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

Capabilities

VLS Configuration

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

/**
 * VLS checker configuration
 * - Set to `true` to enable VLS with default configuration
 * - Set to `false` to disable VLS checking
 * - Provide partial VLS options for custom setup
 */
type VlsConfig = boolean | DeepPartial<VlsOptions>;

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

Usage Examples:

// Simple enable with defaults
checker({
  vls: true,
});

// Custom VLS configuration
checker({
  vls: {
    vetur: {
      validation: {
        template: true,
        style: true,
        script: true,
      },
      completion: {
        autoImport: true,
        tagCasing: 'kebab',
      },
    },
  },
});

VLS Options Interface

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

interface VlsOptions {
  /** Vetur-specific configuration options */
  vetur?: VeturConfig;
  
  /** Language server initialization parameters */
  initializationOptions?: VlsInitializationOptions;
  
  /** File watching and project configuration */
  workspaceConfig?: VlsWorkspaceConfig;
}

interface VeturConfig {
  /** Validation settings for different Vue SFC sections */
  validation?: ValidationConfig;
  
  /** Code completion and IntelliSense settings */
  completion?: CompletionConfig;
  
  /** Formatting configuration */
  format?: FormatConfig;
  
  /** Language-specific settings */
  languageFeatures?: LanguageFeaturesConfig;
}

Validation Configuration

Configure validation behavior for Vue Single File Components:

interface ValidationConfig {
  /** Enable template validation */
  template?: boolean;
  
  /** Enable style validation */
  style?: boolean;
  
  /** Enable script validation */
  script?: boolean;
  
  /** Template-specific validation options */
  templateValidation?: TemplateValidationConfig;
  
  /** Style-specific validation options */
  styleValidation?: StyleValidationConfig;
  
  /** Script-specific validation options */
  scriptValidation?: ScriptValidationConfig;
}

interface TemplateValidationConfig {
  /** Validate HTML syntax */
  html?: boolean;
  
  /** Validate Vue directives */
  directives?: boolean;
  
  /** Validate component props usage */
  props?: boolean;
  
  /** Validate event handlers */
  events?: boolean;
}

Validation Examples:

// Enable all validation
vls: {
  vetur: {
    validation: {
      template: true,
      style: true,
      script: true,
      templateValidation: {
        html: true,
        directives: true,
        props: true,
        events: true,
      },
    },
  },
}

// Template-only validation
vls: {
  vetur: {
    validation: {
      template: true,
      style: false,
      script: false,
    },
  },
}

Completion Configuration

Configure IntelliSense and code completion features:

interface CompletionConfig {
  /** Enable auto-import suggestions */
  autoImport?: boolean;
  
  /** Tag name casing preference */
  tagCasing?: 'kebab' | 'pascal';
  
  /** Attribute name casing preference */
  attrCasing?: 'kebab' | 'camel';
  
  /** Enable workspace symbol completion */
  workspaceSymbols?: boolean;
  
  /** Vue-specific completion options */
  vue?: VueCompletionConfig;
  
  /** HTML completion options */
  html?: HtmlCompletionConfig;
  
  /** CSS completion options */
  css?: CssCompletionConfig;
}

interface VueCompletionConfig {
  /** Complete Vue directives */
  directives?: boolean;
  
  /** Complete component props */
  props?: boolean;
  
  /** Complete event names */
  events?: boolean;
  
  /** Complete slot names */
  slots?: boolean;
}

Completion Examples:

// Comprehensive completion setup
vls: {
  vetur: {
    completion: {
      autoImport: true,
      tagCasing: 'pascal',
      attrCasing: 'kebab',
      workspaceSymbols: true,
      vue: {
        directives: true,
        props: true,
        events: true,
        slots: true,
      },
    },
  },
}

// Minimal completion setup
vls: {
  vetur: {
    completion: {
      autoImport: false,
      tagCasing: 'kebab',
    },
  },
}

Format Configuration

Configure code formatting behavior for Vue files:

interface FormatConfig {
  /** Default formatter for different languages */
  defaultFormatter?: FormatterConfig;
  
  /** Format on save behavior */
  defaultFormatterOptions?: FormatterOptions;
  
  /** Disable formatting for specific languages */
  enable?: boolean;
}

interface FormatterConfig {
  /** HTML template formatter */
  html?: 'none' | 'js-beautify-html' | 'prettyhtml';
  
  /** CSS/SCSS formatter */
  css?: 'none' | 'prettier';
  
  /** JavaScript formatter */
  js?: 'none' | 'prettier' | 'prettier-eslint';
  
  /** TypeScript formatter */
  ts?: 'none' | 'prettier' | 'prettier-tslint';
}

Language Features Configuration

Configure advanced language features and integrations:

interface LanguageFeaturesConfig {
  /** Code lens providers */
  codeLens?: CodeLensConfig;
  
  /** Hover information settings */
  hover?: HoverConfig;
  
  /** Signature help configuration */
  signatureHelp?: SignatureHelpConfig;
  
  /** Reference and definition finding */
  references?: ReferencesConfig;
}

interface CodeLensConfig {
  /** Show references code lens */
  references?: boolean;
  
  /** Show Vue component usage */
  componentUsage?: boolean;
}

Default Configuration

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

{
  vetur: {
    validation: {
      template: true,
      style: true,
      script: true,
    },
    completion: {
      autoImport: true,
      tagCasing: 'kebab',
      workspaceSymbols: true,
    },
    format: {
      enable: true,
      defaultFormatter: {
        html: 'js-beautify-html',
        css: 'prettier',
        js: 'prettier',
        ts: 'prettier',
      },
    },
  },
}

Development Mode Features

In development mode, VLS provides:

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

Vue-Specific Features

Template Support:

HTML syntax validation
Vue directive validation (v-if, v-for, v-model, etc.)
Component prop validation
Event handler validation
Slot usage validation

Script Support:

Vue component options validation
Composition API support
Props and emit type checking
Lifecycle hook validation
Computed and watch property analysis

Style Support:

CSS syntax validation
SCSS/Sass support
Scoped style validation
CSS modules integration

Integration Examples

Basic Vue 3 Project:

checker({
  vls: {
    vetur: {
      validation: {
        template: true,
        style: true,
        script: true,
      },
      completion: {
        autoImport: true,
        tagCasing: 'pascal',
      },
    },
  },
});

Vue 3 with TypeScript:

checker({
  vls: {
    vetur: {
      validation: {
        template: true,
        style: true,
        script: true,
        scriptValidation: {
          typescript: true,
        },
      },
      completion: {
        autoImport: true,
        vue: {
          directives: true,
          props: true,
          events: true,
        },
      },
    },
  },
});

Vue 2 Legacy Project:

checker({
  vls: {
    vetur: {
      validation: {
        template: true,
        style: false, // Handled by separate stylelint
        script: true,
      },
      completion: {
        tagCasing: 'kebab',
        attrCasing: 'kebab',
      },
      format: {
        defaultFormatter: {
          html: 'js-beautify-html',
          js: 'prettier-eslint',
        },
      },
    },
  },
});

Error Reporting

VLS errors are reported with Vue-specific context:

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

Performance Considerations

VLS performance can be optimized by:

Disabling unused validation features
Limiting workspace symbol indexing
Using specific formatters instead of default ones
Configuring appropriate file watching patterns

Troubleshooting

VLS not starting:

npm install --save-dev vls

Template validation issues: Ensure Vue files are properly structured:

<template>
  <!-- Valid template content -->
</template>

<script>
export default {
  // Valid component options
}
</script>

<style>
/* Valid styles */
</style>

Completion not working: Enable workspace symbols and auto-import:

vls: {
  vetur: {
    completion: {
      autoImport: true,
      workspaceSymbols: true,
    },
  },
}

Formatting conflicts: Configure specific formatters to avoid conflicts:

vls: {
  vetur: {
    format: {
      defaultFormatter: {
        html: 'none', // Let prettier handle HTML
        css: 'prettier',
        js: 'prettier',
      },
    },
  },
}

Install with Tessl CLI

npx tessl i tessl/npm-vite-plugin-checker

docs

plugin-configuration.md

stylelint-checker.md

typescript-checker.md

vls-checker.md

vue-typescript-checker.md

tile.json