tessl/npm-vite-plugin-checker

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

—

Pending

Overview

Eval results

Files

Biome Checker

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

Biome integration for fast JavaScript, TypeScript, and JSON linting, formatting, and type checking with support for multiple command modes and development/build configurations.

Capabilities

Biome Configuration

Enable and configure Biome for comprehensive code quality checking with flexible command options.

/**
 * Biome checker configuration
 * - Set to `true` to enable Biome with default lint command
 * - Set to `false` to disable Biome checking
 * - Provide configuration object for custom setup
 */
type BiomeConfig = boolean | BiomeConfigObject;

interface BiomeConfigObject {
  /**
   * Command type used in both dev and build mode
   * Will be overridden by dev.command or build.command if specified
   */
  command?: BiomeCommand;
  
  /**
   * Command flags used in both dev and build mode
   * Will be overridden by dev.flags or build.flags if specified
   */
  flags?: string;
  
  /** Development-specific configuration */
  dev?: Partial<BiomeDevConfig>;
  
  /** Build-specific configuration */
  build?: Partial<BiomeBuildConfig>;
}

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

interface BiomeDevConfig {
  /** Command to use in development mode */
  command: BiomeCommand;
  
  /** Command flags for development mode */
  flags?: string;
  
  /** Which diagnostic levels to emit from the plugin */
  logLevel: ('error' | 'warning' | 'info')[];
}

interface BiomeBuildConfig {
  /** Command to use in build mode */
  command: BiomeCommand;
  
  /** Command flags for build mode */
  flags?: string;
}

Usage Examples:

// Simple enable with default lint command
checker({
  biome: true,
});

// Custom command configuration
checker({
  biome: {
    command: 'check', // Use 'check' for both lint and format
    flags: '--apply',
  },
});

// Separate dev and build configurations
checker({
  biome: {
    dev: {
      command: 'lint',
      flags: '--apply-unsafe',
      logLevel: ['error', 'warning'],
    },
    build: {
      command: 'ci',
      flags: '--max-diagnostics=50',
    },
  },
});

Biome Commands

Biome supports different command modes for various use cases:

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

Command Descriptions:

lint: Run linting rules only, checking for code quality issues
check: Run both linting and formatting checks (comprehensive analysis)
format: Format code according to Biome's formatting rules
ci: Optimized command for CI/CD environments with performance optimizations

Default Configuration

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

{
  command: 'lint',      // Run linting by default
  flags: '',           // No additional flags
  dev: {
    command: 'lint',
    logLevel: ['error', 'warning', 'info'],
  },
  build: {
    command: 'lint',
  },
}

Development Mode Configuration

Override Biome behavior specifically for development mode with custom commands and log levels.

interface BiomeDevConfig {
  /**
   * Command to use in development mode
   * Overrides global command setting
   */
  command: BiomeCommand;
  
  /**
   * Command flags for development mode
   * Overrides global flags setting
   */
  flags?: string;
  
  /**
   * Control which diagnostic levels are emitted from the plugin
   * @default ['error', 'warning', 'info']
   */
  logLevel: ('error' | 'warning' | 'info')[];
}

Development Configuration Examples:

// Auto-fix issues in development
biome: {
  dev: {
    command: 'check',
    flags: '--apply',
    logLevel: ['error', 'warning'],
  },
}

// Lint only with unsafe fixes in development
biome: {
  dev: {
    command: 'lint',
    flags: '--apply-unsafe',
    logLevel: ['error'],
  },
}

// Format and lint in development
biome: {
  dev: {
    command: 'check',
    flags: '--apply --verbose',
    logLevel: ['error', 'warning', 'info'],
  },
}

Build Mode Configuration

Configure Biome behavior specifically for build/production mode.

interface BiomeBuildConfig {
  /**
   * Command to use in build mode
   * Overrides global command setting
   */
  command: BiomeCommand;
  
  /**
   * Command flags for build mode
   * Overrides global flags setting
   */
  flags?: string;
}

Build Configuration Examples:

// Strict checking in build mode
biome: {
  build: {
    command: 'ci',
    flags: '--max-diagnostics=100',
  },
}

// Comprehensive checking in build
biome: {
  build: {
    command: 'check',
    flags: '--verbose --no-errors-on-unmatched',
  },
}

// Format checking only in build
biome: {
  build: {
    command: 'format',
    flags: '--check',
  },
}

Command Flags

Common Biome command flags that can be used with different commands:

General Flags:

--apply: Apply safe fixes automatically
--apply-unsafe: Apply safe and unsafe fixes automatically
--verbose: Enable verbose output
--no-errors-on-unmatched: Don't error when no files match the pattern
--max-diagnostics=N: Limit the number of diagnostics shown

Lint-specific Flags:

--fix: Same as --apply for backwards compatibility
--unsafe: Same as --apply-unsafe for backwards compatibility

Format-specific Flags:

--check: Check if files are formatted correctly without applying changes
--write: Write formatted files (default behavior)

CI-specific Flags:

--formatter=FORMAT: Set output formatter (json, github, junit)
--changed: Only check changed files (requires git)

Configuration File Integration

Biome respects configuration in biome.json or biome.jsonc:

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "files": {
    "include": ["src/**/*.ts", "src/**/*.tsx"],
    "ignore": ["**/*.d.ts"]
  }
}

The checker will use these configuration settings when running Biome commands.

Language Support

Biome supports multiple file types:

JavaScript/TypeScript:

biome: {
  command: 'check',
  flags: '--apply',
}

JSON Files:

biome: {
  command: 'format',
  flags: '--write',
}

JSX/TSX:

biome: {
  dev: {
    command: 'check',
    flags: '--apply',
    logLevel: ['error', 'warning'],
  },
}

Error Reporting

Biome errors and warnings are reported with comprehensive information:

Rule name: The specific Biome rule that was violated
Severity: Error, warning, or info level
File location: Exact file path and line/column numbers
Message: Detailed description of the issue
Code frame: Highlighted code snippet showing the problematic code
Fix suggestion: Automatic fix information when available
Performance metrics: Timing information for CI/CD optimization

Integration Examples

React TypeScript Project:

checker({
  biome: {
    command: 'check',
    dev: {
      command: 'check',
      flags: '--apply',
      logLevel: ['error', 'warning'],
    },
    build: {
      command: 'ci',
      flags: '--formatter=github',
    },
  },
});

Node.js Backend:

checker({
  biome: {
    dev: {
      command: 'lint',
      flags: '--apply-unsafe',
      logLevel: ['error'],
    },
    build: {
      command: 'check',
      flags: '--max-diagnostics=50',
    },
  },
});

Monorepo Setup:

checker({
  biome: {
    command: 'check',
    flags: '--no-errors-on-unmatched',
    dev: {
      command: 'lint',
      flags: '--apply --verbose',
      logLevel: ['error', 'warning'],
    },
    build: {
      command: 'ci',
      flags: '--formatter=json --changed',
    },
  },
});

Performance Benefits

Biome offers significant performance advantages:

Fast startup: Near-instantaneous startup time compared to ESLint
Parallel processing: Multi-threaded processing for large codebases
Incremental checking: Only checks changed files when possible
Memory efficiency: Lower memory usage than traditional Node.js tools
Native performance: Built with Rust for optimal performance

Migration from ESLint/Prettier

When migrating from ESLint and Prettier:

// Before: ESLint + Prettier
checker({
  eslint: {
    lintCommand: 'eslint "src/**/*.{ts,tsx}"',
  },
  // + separate prettier configuration
});

// After: Biome (replaces both)
checker({
  biome: {
    command: 'check',
    flags: '--apply',
  },
});

Troubleshooting

Biome not found:

npm install --save-dev @biomejs/biome

Configuration not found: Create a biome.json file in your project root:

{
  "linter": { "enabled": true },
  "formatter": { "enabled": true }
}

Performance issues: Use the ci command for build environments:

biome: {
  build: {
    command: 'ci',
    flags: '--max-diagnostics=25',
  },
}

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