npmpackage.info

fork-ts-checker-webpack-plugin

Webpack plugin that runs typescript type checker on a separate process.

9.0.2

1,969

MIT

TypeScript

204.68 kB

3,054,338,158 4.4

Installations

npm install fork-ts-checker-webpack-plugin

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=12.13.0

Node Version

16.20.2

NPM Version

7.24.2 Score

86.6

Supply Chain

72.3

Quality

73.9

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

8

Total

413

Closed

48

Merged

357

Issues

Open

24

Total

438

Closed

414

Releases

223

v9.0.2

Updated on Oct 29, 2023

v9.0.1

Updated on Oct 29, 2023

v9.0.0

Updated on Oct 04, 2023

v8.0.0

Updated on Mar 05, 2023

v6.5.3

Updated on Mar 05, 2023

v7.3.0

Updated on Jan 10, 2023

View All 223 releases

Contributors

110

Unable to fetch Contributors

View All 110 Contributors

Languages

TypeScript

JavaScript

Dockerfile

Shell

TypeScript (94.44%)

JavaScript (4.59%)

Dockerfile (0.91%)

Shell (0.07%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

TypeStrong

Download Statistics

Total Downloads

3,054,338,158

Last Day

608,637

Last Week

15,062,532

Last Month

60,948,021

Last Year

699,663,825

GitHub Statistics

MIT License

1,969 Stars

642 Commits

243 Forks

20 Watchers

9 Branches

110 Contributors

Updated on Feb 11, 2025

Maintainers

Package Meta Information

Latest Version

9.0.2

Package Id

fork-ts-checker-webpack-plugin@9.0.2

Unpacked Size

204.68 kB

Size

43.45 kB

File Count

168

NPM Version

7.24.2

Node Version

16.20.2

Published on

Oct 29, 2023

Total Downloads

Cumulative downloads

Total Downloads

3,054,338,158

Last Day

-33.7%

608,637

Compared to previous day

Last Week

-10.5%

15,062,532

Compared to previous week

Last Month

33.8%

60,948,021

Compared to previous month

Last Year

-8.6%

699,663,825

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Fork TS Checker Webpack Plugin

Webpack plugin that runs TypeScript type checker on a separate process.

Features

Speeds up TypeScript type checking (by moving it to a separate process) 🏎
Supports modern TypeScript features like project references and incremental mode ✨
Displays nice error messages with the code frame formatter 🌈

Installation

This plugin requires Node.js >=14.0.0+, Webpack ^5.11.0, TypeScript ^3.6.0

If you depend on TypeScript 2.1 - 2.6.2, please use version 4 of the plugin.
If you depend on Webpack 4, TypeScript 2.7 - 3.5.3 or ESLint feature, please use version 6 of the plugin.
If you depend on Node.js 12, please use version 8 of the plugin.
If you need Vue.js support, please use version 6 of ths plugin

1# with npm
2npm install --save-dev fork-ts-checker-webpack-plugin
3
4# with yarn
5yarn add --dev fork-ts-checker-webpack-plugin

The minimal webpack config (with ts-loader)

1// webpack.config.js
2const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
3
4module.exports = {
5  context: __dirname, // to automatically find tsconfig.json
6  entry: './src/index.ts',
7  resolve: {
8    extensions: [".ts", ".tsx", ".js"],
9  },
10  module: {
11    rules: [
12      {
13        test: /\.tsx?$/,
14        loader: 'ts-loader',
15        // add transpileOnly option if you use ts-loader < 9.3.0 
16        // options: {
17        //   transpileOnly: true
18        // }
19      }
20    ]
21  },
22  plugins: [new ForkTsCheckerWebpackPlugin()],
23  watchOptions: {
24    // for some systems, watching many files can result in a lot of CPU or memory usage
25    // https://webpack.js.org/configuration/watch/#watchoptionsignored
26    // don't use this pattern, if you have a monorepo with linked packages
27    ignored: /node_modules/,
28  },
29};

Examples how to configure it with babel-loader, ts-loader and Visual Studio Code are in the examples directory.

Modules resolution

It's very important to be aware that this plugin uses TypeScript's, not webpack's modules resolution. It means that you have to setup tsconfig.json correctly.

It's because of the performance - with TypeScript's module resolution we don't have to wait for webpack to compile files.

To debug TypeScript's modules resolution, you can use tsc --traceResolution command.

Options

This plugin uses cosmiconfig. This means that besides the plugin constructor, you can place your configuration in the:

"fork-ts-checker" field in the package.json
.fork-ts-checkerrc file in JSON or YAML format
fork-ts-checker.config.js file exporting a JS object

Options passed to the plugin constructor will overwrite options from the cosmiconfig (using deepmerge).

Name	Type	Default value	Description
`async`	`boolean`	`compiler.options.mode === 'development'`	If `true`, reports issues after webpack's compilation is done. Thanks to that it doesn't block the compilation. Used only in the `watch` mode.
`typescript`	`object`	`{}`	See TypeScript options.
`issue`	`object`	`{}`	See Issues options.
`formatter`	`string` or `object` or `function`	`codeframe`	Available formatters are `basic`, `codeframe` and a custom `function`. To configure `codeframe` formatter, pass: `{ type: 'codeframe', options: { <coderame options> } }`. To use absolute file path, pass: `{ type: 'codeframe', pathType: 'absolute' }`.
`logger`	`{ log: function, error: function }` or `webpack-infrastructure`	`console`	Console-like object to print issues in `async` mode.
`devServer`	`boolean`	`true`	If set to `false`, errors will not be reported to Webpack Dev Server.

TypeScript options

Options for the TypeScript checker (typescript option object).

Name	Type	Default value	Description
`memoryLimit`	`number`	`2048`	Memory limit for the checker process in MB. If the process exits with the allocation failed error, try to increase this number.
`configFile`	`string`	`'tsconfig.json'`	Path to the `tsconfig.json` file (path relative to the `compiler.options.context` or absolute path)
`configOverwrite`	`object`	`{ compilerOptions: { skipLibCheck: true, sourceMap: false, inlineSourceMap: false, declarationMap: false } }`	This configuration will overwrite configuration from the `tsconfig.json` file. Supported fields are: `extends`, `compilerOptions`, `include`, `exclude`, `files`, and `references`.
`context`	`string`	`dirname(configuration.configFile)`	The base path for finding files specified in the `tsconfig.json`. Same as the `context` option from the ts-loader. Useful if you want to keep your `tsconfig.json` in an external package. Keep in mind that not having a `tsconfig.json` in your project root can cause different behaviour between `fork-ts-checker-webpack-plugin` and `tsc`. When using editors like `VS Code` it is advised to add a `tsconfig.json` file to the root of the project and extend the config file referenced in option `configFile`.
`build`	`boolean`	`false`	The equivalent of the `--build` flag for the `tsc` command.
`mode`	`'readonly'` or `'write-dts'` or `'write-tsbuildinfo'` or `'write-references'`	`build === true ? 'write-tsbuildinfo' ? 'readonly'`	Use `readonly` if you don't want to write anything on the disk, `write-dts` to write only `.d.ts` files, `write-tsbuildinfo` to write only `.tsbuildinfo` files, `write-references` to write both `.js` and `.d.ts` files of project references (last 2 modes requires `build: true`).
`diagnosticOptions`	`object`	`{ syntactic: false, semantic: true, declaration: false, global: false }`	Settings to select which diagnostics do we want to perform.
`profile`	`boolean`	`false`	Measures and prints timings related to the TypeScript performance.
`typescriptPath`	`string`	`require.resolve('typescript')`	If supplied this is a custom path where TypeScript can be found.

Issues options

Options for the issues filtering (issue option object). I could write some plain text explanation of these options but I think code will explain it better:

1interface Issue {
2  severity: 'error' | 'warning';
3  code: string;
4  file?: string;
5}
6
7type IssueMatch = Partial<Issue>; // file field supports glob matching
8type IssuePredicate = (issue: Issue) => boolean;
9type IssueFilter = IssueMatch | IssuePredicate | (IssueMatch | IssuePredicate)[];

Name	Type	Default value	Description
`include`	`IssueFilter`	`undefined`	If `object`, defines issue properties that should be matched. If `function`, acts as a predicate where `issue` is an argument.
`exclude`	`IssueFilter`	`undefined`	Same as `include` but issues that match this predicate will be excluded.

Expand example

Include issues from the src directory, exclude issues from .spec.ts files:

1module.exports = {
2  // ...the webpack configuration
3  plugins: [
4    new ForkTsCheckerWebpackPlugin({
5      issue: {
6        include: [
7          { file: '**/src/**/*' }
8        ],
9        exclude: [
10          { file: '**/*.spec.ts' }
11        ]
12      }
13    })
14  ]
15};

Plugin hooks

This plugin provides some custom webpack hooks:

Hook key	Type	Params	Description
`start`	`AsyncSeriesWaterfallHook`	`change, compilation`	Starts issues checking for a compilation. It's an async waterfall hook, so you can modify the list of changed and removed files or delay the start of the service.
`waiting`	`SyncHook`	`compilation`	Waiting for the issues checking.
`canceled`	`SyncHook`	`compilation`	Issues checking for the compilation has been canceled.
`error`	`SyncHook`	`compilation`	An error occurred during issues checking.
`issues`	`SyncWaterfallHook`	`issues, compilation`	Issues have been received and will be reported. It's a waterfall hook, so you can modify the list of received issues.

To access plugin hooks and tap into the event, we need to use the getCompilerHooks static method. When we call this method with a webpack compiler instance, it returns the object with tapable hooks where you can pass in your callbacks.

1// ./src/webpack/MyWebpackPlugin.js
2const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
3
4class MyWebpackPlugin {
5  apply(compiler) {
6    const hooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);
7
8    // log some message on waiting
9    hooks.waiting.tap('MyPlugin', () => {
10      console.log('waiting for issues');
11    });
12    // don't show warnings
13    hooks.issues.tap('MyPlugin', (issues) =>
14      issues.filter((issue) => issue.severity === 'error')
15    );
16  }
17}
18
19module.exports = MyWebpackPlugin;
20
21// webpack.config.js
22const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
23const MyWebpackPlugin = require('./src/webpack/MyWebpackPlugin');
24
25module.exports = {
26  /* ... */
27  plugins: [
28    new ForkTsCheckerWebpackPlugin(),
29    new MyWebpackPlugin()
30  ]
31};

Profiling types resolution

When using TypeScript 4.3.0 or newer you can profile long type checks by setting "generateTrace" compiler option. This is an instruction from microsoft/TypeScript#40063:

Set "generateTrace": "{folderName}" in your tsconfig.json (under compilerOptions)
Look in the resulting folder. If you used build mode, there will be a legend.json telling you what went where. Otherwise, there will be trace.json file and types.json files.
Navigate to edge://tracing or chrome://tracing and load trace.json
Expand Process 1 with the little triangle in the left sidebar
Click on different blocks to see their payloads in the bottom pane
Open types.json in an editor
When you see a type ID in the tracing output, go-to-line {id} to find data about that type

Enabling incremental mode

You must both set "incremental": true in your tsconfig.json (under compilerOptions) and also specify mode: 'write-references' in ForkTsCheckerWebpackPlugin settings.

Related projects

ts-loader - TypeScript loader for webpack.
babel-loader - Alternative TypeScript loader for webpack.
fork-ts-checker-notifier-webpack-plugin - Notifies about build status using system notifications (similar to the webpack-notifier).

Credits

This plugin was created in Realytics in 2017. Thank you for supporting Open Source.

License

MIT License

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:99: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:102: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:110: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeStrong/fork-ts-checker-webpack-plugin/main.yml/main?enable=pin
Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:1: pin your Docker image by updating node:12 to node:12@sha256:01627afeb110b3054ba4a1405541ca095c8bfca1cb6f2be9479c767a2711879e
Warn: npmCommand not pinned by hash: .devcontainer/Dockerfile:14-45
Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 containerImage dependencies pinned
Info: 0 out of 1 npmCommand dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.4

/10

Last Scanned on 2025-02-17

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to fork-ts-checker-webpack-plugin

fork-ts-checker-webpack-plugin-alt

0.4.14

Runs typescript type checker and linter on separate process.

fork-ts-checker-notifier-webpack-plugin

9.0.0

a notifier for users of fork-ts-checker-webpack-plugin

@types/fork-ts-checker-webpack-plugin

0.4.5

Stub TypeScript definitions entry for fork-ts-checker-webpack-plugin, which provides its own types definitions

fork-ts-checker-webpack-plugin-v5

0.0.1-security

security holding package

fork-ts-checker-webpack-plugin

Installations

Developer Guide

Yes

CommonJS

>=12.13.0

16.20.2

7.24.2

Score

Pull Requests

8

413

48

357

Issues

24

438

414

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

TypeStrong

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

3,054,338,158

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Fork TS Checker Webpack Plugin

Features

Installation

Modules resolution

Options

TypeScript options

Issues options

Plugin hooks

Profiling types resolution

Enabling incremental mode

Related projects

Credits

License

10

10

10

10

6

0

0

0

0

0

0

0

4.4

/10

Other packages similar to fork-ts-checker-webpack-plugin