CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-webpack-plugin

A webpack plugin that integrates ESLint into the build process to lint JavaScript code with extensive configuration options, caching, and multi-threading support.

—

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

options.mddocs/

Configuration Options

Comprehensive configuration system for ESLint Webpack Plugin supporting both plugin-specific options and all ESLint options with intelligent defaults and validation.

Capabilities

Plugin Options Interface

Plugin-specific configuration options that control webpack integration behavior.

interface PluginOptions {
  /** Root directory for file resolution (default: webpack context) */
  context?: string;
  /** Whether to emit errors to webpack (default: true) */
  emitError?: boolean;
  /** Whether to emit warnings to webpack (default: true) */
  emitWarning?: boolean;
  /** Path to ESLint instance (default: 'eslint') */
  eslintPath?: string;
  /** Files/directories to exclude (default: none) */
  exclude?: string | string[];
  /** File extensions to check (default: 'js') */
  extensions?: string | string[];
  /** Fail build on errors (default: true) */
  failOnError?: boolean;
  /** Fail build on warnings (default: false) */
  failOnWarning?: boolean;
  /** Files/directories to include (default: all) */
  files?: string | string[];
  /** Enable ESLint autofix (default: false) */
  fix?: boolean;
  /** Output formatter (default: 'stylish') */
  formatter?: string | FormatterFunction;
  /** Only lint changed files in watch mode (default: false) */
  lintDirtyModulesOnly?: boolean;
  /** Report errors only, ignore warnings (default: false) */
  quiet?: boolean;
  /** Write results to file */
  outputReport?: OutputReport;
  /** Enable multi-threading (default: true) */
  threads?: number | boolean;
  /** Exclude by resource query pattern */
  resourceQueryExclude?: RegExp | RegExp[];
  /** ESLint config type: 'flat' or 'eslintrc' (default: 'flat') */
  configType?: string;
}

Combined Options Type

Main options interface combining plugin options with ESLint options.

/**
 * Main options interface extending both plugin and ESLint options
 */
interface Options extends PluginOptions, ESLintOptions {}

/**
 * ESLint-specific options (imported from eslint package)
 * Includes cache, cacheLocation, and all other ESLint.Options properties
 */
type ESLintOptions = import('eslint').ESLint.Options;

Output Report Configuration

Configuration for writing lint results to files.

interface OutputReport {
  /** Path where to write the output file */
  filePath?: string;
  /** Formatter to use for the output file */
  formatter?: string | FormatterFunction;
}

Formatter Function Type

Custom formatter function for processing lint results.

/**
 * Custom formatter function for processing ESLint results
 * @param results Array of ESLint lint results
 * @returns Formatted string output
 */
type FormatterFunction = (results: LintResult[]) => string;

type LintResult = import('eslint').ESLint.LintResult;

Options Processing Functions

Utility functions for processing and validating options.

/**
 * Processes and validates plugin options with defaults
 * @param pluginOptions Raw plugin options
 * @returns Processed plugin options with defaults applied
 */
function getOptions(pluginOptions: Options): PluginOptions;

/**
 * Extracts ESLint-specific options from combined options
 * @param loaderOptions Combined plugin and ESLint options
 * @returns ESLint-only options
 */
function getESLintOptions(loaderOptions: Options): ESLintOptions;

Usage Examples

Basic Configuration

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
      fix: true,
      failOnError: false,
    }),
  ],
};

Advanced Configuration

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  plugins: [
    new ESLintPlugin({
      // Plugin options
      context: 'src',
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      exclude: ['node_modules', 'dist'],
      files: ['src/**/*'],
      fix: true,
      failOnError: true,
      failOnWarning: false,
      quiet: false,
      threads: true,
      formatter: 'codeframe',
      outputReport: {
        filePath: 'reports/eslint-report.html',
        formatter: 'html',
      },
      
      // ESLint options (cache enabled by default)
      cache: true,
      cacheLocation: 'node_modules/.cache/eslint-webpack-plugin/.eslintcache',
      configType: 'flat',
    }),
  ],
};

TypeScript Configuration

import ESLintPlugin from 'eslint-webpack-plugin';
import type { Configuration } from 'webpack';

const config: Configuration = {
  plugins: [
    new ESLintPlugin({
      extensions: ['ts', 'tsx'],
      fix: true,
      threads: 4,
      resourceQueryExclude: [/\?vue&type=style/],
    }),
  ],
};

export default config;

Multi-threading Configuration

// Enable multi-threading with default worker count
new ESLintPlugin({
  threads: true,
});

// Specify exact number of workers
new ESLintPlugin({
  threads: 4,
});

// Disable multi-threading
new ESLintPlugin({
  threads: false,
});

Resource Query Exclusion

// Exclude specific resource queries (useful with loaders)
new ESLintPlugin({
  resourceQueryExclude: [
    /\?vue&type=style/,    // Vue.js style blocks
    /\?raw/,               // Raw imports
    /\?inline/,            // Inline imports
  ],
});

Cache Configuration

// Enable caching (default behavior)
new ESLintPlugin({
  cache: true,
  cacheLocation: 'node_modules/.cache/eslint-webpack-plugin/.eslintcache',
});

// Custom cache location
new ESLintPlugin({
  cache: true,
  cacheLocation: '.eslintcache',
});

// Disable caching
new ESLintPlugin({
  cache: false,
});

docs

index.md

options.md

tile.json