or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tslint-loader

Webpack loader that integrates TSLint into the build process for TypeScript linting

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tslint-loader@3.6.x

To install, run

npx @tessl/cli install tessl/npm-tslint-loader@3.6.0

index.mddocs/

TSLint Loader

TSLint Loader is a webpack loader that integrates TSLint (TypeScript linter) into the webpack build process. It enables developers to automatically lint TypeScript files during compilation, catching code quality issues and style violations early in the development workflow with comprehensive configuration options.

Package Information

  • Package Name: tslint-loader
  • Package Type: npm
  • Language: JavaScript (with TypeScript support)
  • Installation: npm install tslint tslint-loader --save-dev
  • Peer Dependency: tslint >= 4.0.0

Core Imports

TSLint Loader is used as a webpack loader, not directly imported in application code. It's configured in webpack configuration files.

Basic Usage

Webpack 4+ Configuration

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        enforce: 'pre',
        use: [
          {
            loader: 'tslint-loader',
            options: {
              // Loader configuration options
              emitErrors: false,
              failOnHint: true,
              typeCheck: false
            }
          }
        ]
      }
    ]
  }
}

Webpack 1.x Configuration

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.ts$/,
        loader: 'tslint-loader'
      }
    ]
  },
  tslint: {
    // Loader configuration options
    emitErrors: false,
    failOnHint: true
  }
}

Capabilities

Main Loader Function

The primary webpack loader function that processes TypeScript files through TSLint.

/**
 * Main webpack loader function for TSLint integration
 * @param {string} input - Source code content of the file being processed
 * @param {object} map - Optional source map for the file
 * @returns {void} Calls webpack callback with original source code unchanged
 */
function loader(input, map);

The loader:

  • Validates TSLint version (requires 4.0+)
  • Resolves configuration options from webpack config
  • Executes TSLint on the input file
  • Emits warnings or errors based on configuration
  • Passes through original source code unchanged

Configuration Options

Comprehensive configuration system supporting inline rules, external config files, and output customization.

interface LoaderOptions {
  /** Inline TSLint configuration rules */
  configuration?: TSLintConfiguration;
  
  /** Path to TSLint configuration file or false to disable */
  configFile?: string | false;
  
  /** Emit lint issues as errors instead of warnings */
  emitErrors?: boolean;
  
  /** Fail compilation when lint errors are found */
  failOnHint?: boolean;
  
  /** Enable type-checked TSLint rules */
  typeCheck?: boolean;
  
  /** Path to TypeScript configuration file for type checking */
  tsConfigFile?: string;
  
  /** Automatically fix linting errors where possible */
  fix?: boolean;
  
  /** TSLint formatter to use */
  formatter?: string;
  
  /** Directory containing custom formatters */
  formattersDirectory?: string;
  
  /** Directory containing custom TSLint rules */
  rulesDirectory?: string;
  
  /** Configuration for saving lint results to files */
  fileOutput?: FileOutputOptions;
}

interface TSLintConfiguration {
  rules: {
    [ruleName: string]: boolean | [boolean, ...any[]];
  };
  [key: string]: any;
}

interface FileOutputOptions {
  /** Output directory for lint reports */
  dir: string;
  
  /** File extension for reports (default: 'txt') */
  ext?: string;
  
  /** Clean output directory before writing */
  clean?: boolean;
  
  /** Content to prepend to each report file */
  header?: string;
  
  /** Content to append to each report file */
  footer?: string;
}

Usage Examples:

// Basic configuration with inline rules
{
  loader: 'tslint-loader',
  options: {
    configuration: {
      rules: {
        quotemark: [true, 'double'],
        'no-console': [false]
      }
    },
    emitErrors: true,
    failOnHint: false
  }
}

// Configuration with external config file and type checking
{
  loader: 'tslint-loader',
  options: {
    configFile: './tslint-custom.json',
    typeCheck: true,
    tsConfigFile: './tsconfig.json',
    fix: true
  }
}

// Configuration with file output for CI systems
{
  loader: 'tslint-loader',
  options: {
    fileOutput: {
      dir: './lint-reports/',
      ext: 'xml',
      clean: true,
      header: '<?xml version="1.0" encoding="utf-8"?>\\n<checkstyle version="5.7">',
      footer: '</checkstyle>'
    }
  }
}

Custom Formatter

Built-in custom formatter optimized for webpack integration.

/**
 * Custom TSLint formatter class extending AbstractFormatter
 */
class Formatter extends Lint.Formatters.AbstractFormatter {
  /**
   * Format lint failures for display
   * @param {Array} failures - Array of TSLint failure objects
   * @returns {string} Formatted output with line numbers and positions
   */
  format(failures);
}

The custom formatter outputs failures in the format: [line, column]: failure message

Example Output:

[8, 1]: Calls to 'console.log' are not allowed.
[15, 5]: Missing semicolon.

Error Handling

The loader handles various error conditions:

  • Version Validation: Throws error if TSLint version < 4.0.0
  • Configuration Errors: Handled by TSLint configuration parser
  • Lint Failures: Emitted as webpack warnings or errors based on emitErrors option
  • Compilation Failures: Optional compilation interruption based on failOnHint setting

When failOnHint is enabled and lint errors occur, the compilation fails with detailed error information.

Platform Support

  • Webpack Versions: 1.x, 2.x, 3.x, 4.x+
  • TSLint Versions: 4.0.0 and above
  • TypeScript: Any version supported by TSLint 4.0+
  • Node.js: Compatible with webpack and TSLint requirements

Advanced Configuration

Type-Checked Rules

Enable advanced TSLint rules that require TypeScript type information:

{
  loader: 'tslint-loader',
  options: {
    typeCheck: true,
    tsConfigFile: './tsconfig.json',
    configuration: {
      rules: {
        'for-in-array': true,
        'no-unsafe-any': true,
        'strict-boolean-expressions': true
      }
    }
  }
}

Custom Rules and Formatters

Use custom TSLint rules and formatters:

{
  loader: 'tslint-loader',
  options: {
    rulesDirectory: './custom-rules/',
    formatter: 'myCustomFormatter',
    formattersDirectory: './custom-formatters/'
  }
}

Continuous Integration Integration

Configure file output for CI systems:

{
  loader: 'tslint-loader',
  options: {
    emitErrors: true,
    failOnHint: true,
    fileOutput: {
      dir: './build-reports/tslint/',
      ext: 'json',
      clean: true
    }
  }
}