tessl/npm-vite-plugin-checker

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

—

Pending

Overview

Eval results

Files

Vue TypeScript Checker

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

Vue Single File Component type checking using vue-tsc, providing comprehensive TypeScript integration for Vue.js projects with full SFC support.

Capabilities

Vue TypeScript Configuration

Enable and configure Vue TypeScript checking with the same flexible options as the regular TypeScript checker, specifically optimized for Vue SFC files.

/**
 * Vue TypeScript checker configuration
 * - Set to `true` to enable vue-tsc checking with default configuration
 * - Set to `false` to disable vue-tsc checking
 * - Provide partial options object for custom configuration
 */
type VueTscConfig = boolean | Partial<TsConfigOptions>;

interface TsConfigOptions {
  /** Path to tsconfig.json file */
  tsconfigPath: string;
  
  /** Path to typescript package */
  typescriptPath: string;
  
  /** Root path of current working directory */
  root: string;
  
  /** Enable build mode flag */
  buildMode: boolean;
}

Usage Examples:

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

// Custom tsconfig for Vue
checker({
  vueTsc: {
    tsconfigPath: './tsconfig.vue.json',
  },
});

// Full custom configuration
checker({
  vueTsc: {
    tsconfigPath: './tsconfig.json',
    typescriptPath: require.resolve('typescript'),
    root: './src',
    buildMode: false,
  },
});

Vue-Specific TypeScript Configuration

For optimal Vue TypeScript checking, your tsconfig.json should include Vue-specific settings:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "types": ["vite/client"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx", 
    "src/**/*.vue"
  ],
  "exclude": ["node_modules"]
}

Single File Component Support

The Vue TypeScript checker provides comprehensive support for Vue Single File Components:

Template Type Checking:

Expression type validation in templates
Prop type checking in template usage
Event handler type validation
Directive argument and modifier validation

Script Setup Support:

Full TypeScript support in <script setup> blocks
Automatic type inference for refs and reactive variables
Props and emit type checking
Composable function type validation

Composition API Integration:

Type-safe reactive references
Computed property type inference
Watch callback type checking
Lifecycle hook parameter validation

Default Configuration

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

{
  tsconfigPath: 'tsconfig.json',        // Look for tsconfig.json in project root
  typescriptPath: 'typescript',         // Use typescript from node_modules  
  root: process.cwd(),                  // Use current working directory
  buildMode: false,                     // Enable incremental checking in dev mode
}

Development Mode Behavior

In development mode, the Vue TypeScript checker:

Runs vue-tsc in a separate worker thread for non-blocking type checking
Performs incremental type checking of Vue SFCs and TypeScript files
Reports template and script errors via the error overlay system
Watches for changes in .vue, .ts, and .tsx files
Integrates with Vite's HMR system for immediate feedback
Validates prop types, emit declarations, and template expressions

Build Mode Behavior

In build mode, the Vue TypeScript checker:

Runs vue-tsc as a separate process for comprehensive type checking
Validates entire Vue project including all SFC files
Reports both TypeScript and Vue template type errors
Exits build process with error code if type issues are found
Supports vite build --watch mode for continuous validation

Vue SFC Type Checking Features

Props Validation:

<script setup lang="ts">
interface Props {
  message: string;
  count?: number;
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
});
</script>

<template>
  <!-- Type-checked template usage -->
  <div>{{ props.message }} - {{ props.count }}</div>
</template>

Emit Type Checking:

<script setup lang="ts">
interface Emits {
  update: [value: string];
  change: [id: number, data: object];
}

const emit = defineEmits<Emits>();

// Type-checked emit calls
emit('update', 'new value');
emit('change', 1, { data: true });
</script>

Ref and Reactive Type Inference:

<script setup lang="ts">
import { ref, reactive } from 'vue';

const count = ref(0);           // Ref<number>
const message = ref('hello');   // Ref<string>

const state = reactive({        // Reactive<{ items: Item[] }>
  items: [] as Item[]
});
</script>

Error Reporting

Vue TypeScript errors are reported with detailed Vue-specific information:

SFC section: Template, script, or style block location
Vue feature: Props, emit, computed, or template expression context
Type information: Expected vs actual types in Vue context
Template location: Exact line/column in template blocks
Code frame: Highlighted Vue SFC code snippet

Integration with Vue Tools

The checker works alongside other Vue development tools:

With Vetur/Volar:

checker({
  // Use vue-tsc for type checking
  vueTsc: true,
  // Vetur/Volar provides editor integration
});

With Vue Router:

// Ensure router types are included
vueTsc: {
  tsconfigPath: './tsconfig.json', // Should include vue-router types
}

With Pinia:

// Type-safe store integration
vueTsc: {
  tsconfigPath: './tsconfig.json', // Should include pinia types  
}

Performance Optimization

For large Vue projects, consider these optimizations:

// tsconfig.json
{
  "compilerOptions": {
    "incremental": true,           // Enable incremental compilation
    "skipLibCheck": true,          // Skip lib type checking
    "isolatedModules": true        // Enable faster builds
  },
  "vueCompilerOptions": {
    "target": 3.3                  // Target Vue 3.3+ for better performance
  }
}

Troubleshooting

Vue-tsc not found:

npm install --save-dev vue-tsc typescript

Template type errors: Ensure your tsconfig includes Vue files:

{
  "include": ["src/**/*.vue", "src/**/*.ts"]
}

Script setup issues: Verify Vue version compatibility:

npm install vue@^3.3.0 vue-tsc@^3.0.0

Performance issues with large projects:

vueTsc: {
  tsconfigPath: './tsconfig.vue.json', // Separate config for Vue files only
  buildMode: true,                     // Enable build optimizations
}

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

tessl/npm-vite-plugin-checker