or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

biome-checker.mderror-overlay.mdeslint-checker.mdindex.mdplugin-configuration.mdstylelint-checker.mdtypescript-checker.mdvls-checker.mdvue-typescript-checker.md
tile.json

tessl/npm-vite-plugin-checker

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-checker@0.10.x

To install, run

npx @tessl/cli install tessl/npm-vite-plugin-checker@0.10.0

index.mddocs/

Vite Plugin Checker

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.

Package Information

  • Package Name: vite-plugin-checker
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vite-plugin-checker
  • Node.js Version: >= 14.16

Core Imports

import { checker } from "vite-plugin-checker";

For CommonJS:

const { checker } = require("vite-plugin-checker");

Default import (equivalent to named import):

import checker from "vite-plugin-checker";

Basic Usage

import { defineConfig } from "vite";
import checker from "vite-plugin-checker";

export default defineConfig({
  plugins: [
    checker({
      // Enable TypeScript checker
      typescript: true,
      // Enable ESLint checker
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
      // Enable Vue TypeScript checker
      vueTsc: true,
      // Configure overlay
      overlay: {
        initialIsOpen: false,
        position: 'tl',
      },
      // Enable terminal output
      terminal: true,
      // Enable build-time checking
      enableBuild: true,
    }),
  ],
});

Architecture

Vite Plugin Checker is built around several key components:

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

Capabilities

Main Plugin Factory

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

function checker(userConfig: UserPluginConfig): Plugin;

type UserPluginConfig = Partial<PluginConfig>;

Plugin Configuration

TypeScript Checking

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

interface UserPluginConfig {
  typescript?: TscConfig;
}

type TscConfig = boolean | Partial<TsConfigOptions>;

interface TsConfigOptions {
  tsconfigPath: string;
  typescriptPath: string;
  root: string;
  buildMode: boolean;
}

TypeScript Checker

Vue TypeScript Checking

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

interface UserPluginConfig {
  vueTsc?: VueTscConfig;
}

type VueTscConfig = boolean | Partial<TsConfigOptions>;

Vue TypeScript Checker

ESLint Integration

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

interface UserPluginConfig {
  eslint?: EslintConfig;
}

type EslintConfig = false | {
  watchPath?: string | string[];
  lintCommand: string;
  useFlatConfig?: boolean;
  dev?: Partial<{
    overrideConfig: ESLint.Options;
    logLevel: ('error' | 'warning')[];
  }>;
};

ESLint Checker

Stylelint Integration

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

interface UserPluginConfig {
  stylelint?: StylelintConfig;
}

type StylelintConfig = false | {
  watchPath?: string | string[];
  lintCommand: string;
  dev?: Partial<{
    overrideConfig: Stylelint.LinterOptions;
    logLevel: ('error' | 'warning')[];
  }>;
};

Stylelint Checker

Biome Integration

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

interface UserPluginConfig {
  biome?: BiomeConfig;
}

type BiomeConfig = boolean | {
  command?: BiomeCommand;
  flags?: string;
  dev?: Partial<{
    command: BiomeCommand;
    flags?: string;
    logLevel: ('error' | 'warning' | 'info')[];
  }>;
  build?: Partial<{
    command: BiomeCommand;
    flags?: string;
  }>;
};

type BiomeCommand = 'lint' | 'check' | 'format' | 'ci';

Biome Checker

VLS Integration

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

interface UserPluginConfig {
  vls?: VlsConfig;
}

type VlsConfig = boolean | DeepPartial<VlsOptions>;

VLS Checker

Error Overlay System

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

interface SharedConfig {
  overlay: boolean | OverlayConfig;
}

interface OverlayConfig {
  initialIsOpen?: boolean | 'error';
  position?: 'tl' | 'tr' | 'bl' | 'br';
  badgeStyle?: string;
  panelStyle?: string;
}

Error Overlay

Types

interface SharedConfig {
  overlay: boolean | OverlayConfig;
  terminal: boolean;
  enableBuild: boolean;
  root?: string;
}

interface BuildInCheckers {
  typescript: TscConfig;
  vueTsc: VueTscConfig;
  vls: VlsConfig;
  eslint: EslintConfig;
  stylelint: StylelintConfig;
  biome: BiomeConfig;
}

type PluginConfig = SharedConfig & BuildInCheckers;

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

enum DiagnosticLevel {
  Warning = 0,
  Error = 1,
  Suggestion = 2,
  Message = 3,
}

interface DiagnosticToRuntime extends ErrorPayload['err'] {
  checkerId: string;
  level?: DiagnosticLevel;
}

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