tessl/npm-fork-ts-checker-webpack-plugin

Runs TypeScript type checker and linter on separate process for webpack builds.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Formatters

Name: tessl/npm-fork-ts-checker-webpack-plugin
Author: tessl

Output formatters for displaying type checking results with customizable path formats and code frame options. The plugin provides multiple built-in formatters and supports custom formatter functions for flexible issue presentation.

Capabilities

Formatter Options

Flexible configuration for issue output formatting.

/**
 * Formatter configuration options
 * Supports built-in formatters, custom options, or custom formatter functions
 */
type FormatterOptions =
  | undefined              // Use default basic formatter
  | FormatterType         // Simple string formatter type
  | BasicFormatterOptions // Basic formatter with options
  | CodeframeFormatterOptions // Code frame formatter with options
  | Formatter;            // Custom formatter function

/**
 * Available built-in formatter types
 */
type FormatterType = 'basic' | 'codeframe';

/**
 * Custom formatter function type
 * @param issue - Issue to format
 * @returns Formatted string representation
 */
type Formatter = (issue: Issue) => string;

/**
 * Path format options for file paths in output
 */
type FormatterPathType = 'relative' | 'absolute';

Basic Formatter

Simple text-based formatter for straightforward issue display.

/**
 * Basic formatter configuration
 */
interface BasicFormatterOptions {
  /** Formatter type identifier */
  type: 'basic';
  
  /** Path format for file paths in output */
  pathType?: FormatterPathType;
}

Usage Examples:

// Simple basic formatter
new ForkTsCheckerWebpackPlugin({
  formatter: 'basic'
})

// Basic formatter with absolute paths
new ForkTsCheckerWebpackPlugin({
  formatter: {
    type: 'basic',
    pathType: 'absolute'
  }
})

// Basic formatter with relative paths (default)
new ForkTsCheckerWebpackPlugin({
  formatter: {
    type: 'basic',
    pathType: 'relative'
  }
})

Basic Formatter Output Example:

ERROR in src/index.ts(10,5): TS2304: Cannot find name 'foo'.
WARNING in src/utils.ts(25,12): TS7006: Parameter 'data' implicitly has an 'any' type.

Code Frame Formatter

Enhanced formatter that displays code context around issues using Babel's code frame.

/**
 * Code frame formatter configuration with Babel code frame options
 */
interface CodeframeFormatterOptions {
  /** Formatter type identifier */
  type: 'codeframe';
  
  /** Path format for file paths in output */
  pathType?: FormatterPathType;
  
  /** Babel code frame formatting options */
  options?: BabelCodeFrameOptions;
}

/**
 * Babel code frame options for enhanced code display
 */
interface BabelCodeFrameOptions {
  /** Number of lines to show above the error location */
  linesAbove?: number;
  
  /** Number of lines to show below the error location */
  linesBelow?: number;
  
  /** Highlight the error location */
  highlightCode?: boolean;
  
  /** Include line numbers in the output */
  forceColor?: boolean;
  
  /** Custom message to display with the code frame */
  message?: string;
}

Usage Examples:

// Simple code frame formatter
new ForkTsCheckerWebpackPlugin({
  formatter: 'codeframe'
})

// Code frame with custom options
new ForkTsCheckerWebpackPlugin({
  formatter: {
    type: 'codeframe',
    pathType: 'relative',
    options: {
      linesAbove: 3,
      linesBelow: 3,
      highlightCode: true,
      forceColor: false
    }
  }
})

// Minimal code frame for CI environments
new ForkTsCheckerWebpackPlugin({
  formatter: {
    type: 'codeframe',
    options: {
      linesAbove: 1,
      linesBelow: 1,
      highlightCode: false,
      forceColor: false
    }
  }
})

Code Frame Formatter Output Example:

ERROR in src/index.ts

  8 | function calculateTotal(items: Item[]) {
  9 |   return items.reduce((sum, item) => {
> 10 |     return sum + foo; // Cannot find name 'foo'
     |                  ^^^
  11 |   }, 0);
  12 | }

TS2304: Cannot find name 'foo'.

Custom Formatter Function

Create completely custom formatting logic for specialized output needs.

/**
 * Custom formatter function
 * @param issue - Issue object to format
 * @returns Formatted string representation
 */
type Formatter = (issue: Issue) => string;

Custom Formatter Examples:

// JSON formatter for machine processing
const jsonFormatter: Formatter = (issue) => {
  return JSON.stringify({
    type: 'typescript-issue',
    severity: issue.severity,
    code: issue.code,
    message: issue.message,
    file: issue.file,
    location: issue.location
  });
};

new ForkTsCheckerWebpackPlugin({
  formatter: jsonFormatter
})

// Compact single-line formatter
const compactFormatter: Formatter = (issue) => {
  const location = issue.location 
    ? `${issue.location.start.line}:${issue.location.start.column}` 
    : '';
  const file = issue.file || '<global>';
  return `[${issue.severity.toUpperCase()}] ${file}${location ? `:${location}` : ''} ${issue.code}: ${issue.message}`;
};

new ForkTsCheckerWebpackPlugin({
  formatter: compactFormatter
})

// Colored terminal formatter
const colorFormatter: Formatter = (issue) => {
  const colors = {
    error: '\x1b[31m', // Red
    warning: '\x1b[33m', // Yellow
    reset: '\x1b[0m'
  };
  
  const color = colors[issue.severity];
  const location = issue.location 
    ? ` at line ${issue.location.start.line}` 
    : '';
  
  return `${color}${issue.severity.toUpperCase()}${colors.reset} in ${issue.file}${location}: ${issue.message} (${issue.code})`;
};

new ForkTsCheckerWebpackPlugin({
  formatter: colorFormatter
})

Environment-Specific Formatting

Choose formatters based on environment and use case.

// Development: Rich code frames for better debugging
const devFormatter = {
  type: 'codeframe' as const,
  options: {
    linesAbove: 2,
    linesBelow: 2,
    highlightCode: true
  }
};

// CI/CD: Compact output for logs
const ciFormatter = {
  type: 'basic' as const,
  pathType: 'relative' as const
};

// Production: No formatting (fail fast)
const prodFormatter = undefined;

new ForkTsCheckerWebpackPlugin({
  formatter: process.env.NODE_ENV === 'development' 
    ? devFormatter
    : process.env.CI 
      ? ciFormatter 
      : prodFormatter
})

Path Type Configuration

Control how file paths are displayed in formatter output.

/**
 * Path format options
 */
type FormatterPathType = 'relative' | 'absolute';

Path Type Examples:

// Relative paths (default) - cleaner output
new ForkTsCheckerWebpackPlugin({
  formatter: {
    type: 'basic',
    pathType: 'relative' // src/components/Button.tsx
  }
})

// Absolute paths - full context
new ForkTsCheckerWebpackPlugin({
  formatter: {
    type: 'basic',
    pathType: 'absolute' // /home/user/project/src/components/Button.tsx
  }
})

Formatter Integration with Webpack

Formatters integrate with webpack's stats and logging system:

// Use webpack's infrastructure logger
new ForkTsCheckerWebpackPlugin({
  formatter: 'codeframe',
  logger: 'webpack-infrastructure' // Issues formatted and sent to webpack logs
})

// Custom logger with formatter
new ForkTsCheckerWebpackPlugin({
  formatter: (issue) => `🚨 ${issue.severity}: ${issue.message}`,
  logger: {
    log: (message) => console.log(`[TS-CHECK] ${message}`),
    error: (message) => console.error(`[TS-ERROR] ${message}`)
  }
})