ts-checker-webpack-plugin v0.3.0
ts-checker-webpack-plugin
Webpack plugin that type checks & lints your TypeScript files blazingly fast.
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