CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-checker

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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];
};
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-checker@0.10.x
Publish Source
CLI
Badge
tessl/npm-vite-plugin-checker badge