tessl/npm-vite-plugin-checker

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

—

Pending

Overview

Eval results

Files

Plugin Configuration

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

Core configuration options for the vite-plugin-checker plugin, including shared settings that apply to all checker types.

Capabilities

Main Plugin Function

Creates a Vite plugin instance with the specified checker configuration.

/**
 * Creates a vite-plugin-checker plugin instance
 * @param userConfig - Configuration for all checkers and shared options
 * @returns Vite plugin instance
 */
function checker(userConfig: UserPluginConfig): Plugin;

interface UserPluginConfig extends SharedConfig, BuildInCheckers {}

Usage Example:

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

export default defineConfig({
  plugins: [
    checker({
      // Shared configuration
      overlay: true,
      terminal: true,
      enableBuild: true,
      root: './src',
      
      // Individual checker configurations
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
  ],
});

Shared Configuration

Configuration options that apply to all checker types.

interface SharedConfig {
  /**
   * Show overlay on UI view when there are errors or warnings in dev mode
   * @default true
   */
  overlay: boolean | OverlayConfig;
  
  /**
   * Enable terminal output for checker results
   * @default true
   */
  terminal: boolean;
  
  /**
   * Enable checking in build mode
   * @default true
   */
  enableBuild: boolean;
  
  /**
   * Root directory for checkers (optional)
   */
  root?: string;
}

Overlay Configuration

Detailed configuration for the development error overlay system.

interface OverlayConfig {
  /**
   * Set true if you want the overlay to default to being open if errors/warnings are found
   * @default true
   */
  initialIsOpen?: boolean | 'error';
  
  /**
   * Position of the vite-plugin-checker badge to open and close the diagnostics panel
   * @default 'bl'
   */
  position?: 'tl' | 'tr' | 'bl' | 'br';
  
  /**
   * Extra style string for the badge button (CSS property format)
   * Example: 'display: none;' to hide the badge
   */
  badgeStyle?: string;
  
  /**
   * Extra style string for the diagnostic panel (CSS property format)
   * Example: 'opacity: 0.8;' to change panel opacity
   */
  panelStyle?: string;
}

Usage Example:

checker({
  overlay: {
    initialIsOpen: 'error', // Only open on errors, not warnings
    position: 'tr',         // Top-right position
    badgeStyle: 'right: 80px; top: 20px;', // Custom badge positioning
    panelStyle: 'opacity: 0.95; backdrop-filter: blur(3px);', // Semi-transparent panel
  },
  terminal: true,
  enableBuild: true,
});

Built-in Checkers Interface

Interface defining all available checker types that can be configured.

interface BuildInCheckers {
  /** TypeScript checker configuration */
  typescript?: TscConfig;
  
  /** Vue TypeScript checker configuration */
  vueTsc?: VueTscConfig;
  
  /** Vue Language Server checker configuration */
  vls?: VlsConfig;
  
  /** ESLint checker configuration */
  eslint?: EslintConfig;
  
  /** Stylelint checker configuration */
  stylelint?: StylelintConfig;
  
  /** Biome checker configuration */
  biome?: BiomeConfig;
}

Plugin Information

The plugin includes metadata and internal properties accessible for advanced use cases.

interface VitePluginChecker extends Plugin {
  name: 'vite-plugin-checker';
  enforce: 'pre';
  __internal__checker: typeof Checker;
}

Plugin Lifecycle Methods:

config() - Initializes checkers during Vite configuration phase
configResolved() - Stores resolved Vite configuration
buildStart() - Starts checker processes in build mode
buildEnd() - Cleans up checker processes
configureServer() - Sets up development server integration
resolveId() - Handles virtual module resolution for client runtime
load() - Provides client runtime code
transformIndexHtml() - Injects client runtime in development mode

Environment Detection

Internal utilities for detecting the runtime environment.

/** 
 * Built-in checker names supported by the plugin 
 */
const buildInCheckerKeys: BuildInCheckerNames[];

type BuildInCheckerNames = 'typescript' | 'vueTsc' | 'vls' | 'eslint' | 'stylelint' | 'biome';

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