Skip to content

zinserjan/ts-checker-webpack-plugin

Repository files navigation

ts-checker-webpack-plugin

Webpack plugin that type checks & lints your TypeScript files blazingly fast.

Build Status Linux & macOS Build Status Windows codecov

Installation

Install ts-checker-webpack-plugin via NPM as usual:

$ npm install ts-checker-webpack-plugin --save-dev

Note: This plugin requires TypeScript 2 and optionally TSLint 5

And configure it in your webpack config like below (assumes webpack-config at project root):

const path = require("path");
const TsCheckerWebpackPlugin = require("ts-checker-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          transpileOnly: true, // disable type checker - we will use ts-checker-webpack-plugin for that :)
        }
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          "style-loader",
          "css-loader",
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          "style-loader",
          {
            loader: "typings-for-css-modules-loader",
            options: {
              modules: true,
              namedExport: true,
              camelCase: true,
            },
          },
        }
      ],
    ]
  },
  plugins: [
    new TsCheckerWebpackPlugin({
      tsconfig: path.resolve("tsconfig.json"),
      tslint: path.resolve("tslint.json"), // optional
      memoryLimit: 512, // optional, maximum memory usage in MB
      diagnosticFormatter: "ts-loader", // optional, one of "ts-loader", "stylish", "codeframe"
    })
  ]
};

Options

new TsCheckerWebpackPlugin(options: object)
Name Type Description
incremental boolean Allows to disable incremental type checking.
Default: true
tsconfig string Absolute path to tsconfig.json file.
tslint string Absolute path to tslint.json file.
Default: undefined
tslintEmitErrors boolean Report all TSLint failures as webpack errors regardless of the rule severity.
Default: false
memoryLimit number Memory limit for the type checker process in MB.
Default: 512
diagnosticFormatter string Formatter for TypeScript Diagnostics.
One of ts-loader, stylish or codeframe.
Default: ts-loader
timings boolean Logs timing information of the type checker.
Default: false
ignoreDiagnostics number[] List of TypeScript diagnostic codes to ignore.
Default: []
ignoreLints string[] List of TSLint rule names to ignore.
Default: []

Motivation

First off all the approach is based on the idea of fork-ts-checker-webpack-plugin to run the type checking process independently of the actual transpiling of the files with ts-loader to speed things up. But the main motivation for this plugin was to support CSS-Modules with type definitions properly without using any workarounds (1, 2).

Differences to fork-ts-checker-webpack-plugin

  • support of typed CSS-Modules with typings-for-css-modules-loader
  • works well with create-react-app in watch mode cause type checking errors will be forwarded to webpack
  • files are cached internally until they will be invalidated by webpack

Performance tips

You can improve the type checking performance even more with some tweaks in your tsconfig.json.

Skip type checking of all declaration files

You can skip type checking of all declaration files with skipLibCheck: true. See TypeScript Compiler Options.

Reduce files to check

This plugin processes every file that was found by your tsconfig.json. You can reduce the files to process by this plugin with the files, includes and/or exclude option in your tsconfig.json. See TypeScript tsconfig.json.

For example you could exclude your tests, when your test runner checks them already.

License

MIT

About

Webpack plugin that runs TypeScript's type checker

Resources

License

Stars

Watchers

Forks

Packages

No packages published