{"id":13495927,"url":"https://github.com/TypeStrong/fork-ts-checker-webpack-plugin","last_synced_at":"2025-03-28T17:34:12.398Z","repository":{"id":37269737,"uuid":"89357782","full_name":"TypeStrong/fork-ts-checker-webpack-plugin","owner":"TypeStrong","description":"Webpack plugin that runs typescript type checker on a separate process.","archived":false,"fork":false,"pushed_at":"2025-03-09T19:38:27.000Z","size":8092,"stargazers_count":1974,"open_issues_count":33,"forks_count":242,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-03-25T06:08:10.737Z","etag":null,"topics":["babel-loader","checker","eslint","plugin","speedup","ts-loader","typescript","vue","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TypeStrong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"piotr-oles"}},"created_at":"2017-04-25T12:26:02.000Z","updated_at":"2025-03-19T04:21:03.000Z","dependencies_parsed_at":"2023-02-18T14:00:47.413Z","dependency_job_id":"df78a420-9dc0-40a5-ac0b-5319fcdc9b94","html_url":"https://github.com/TypeStrong/fork-ts-checker-webpack-plugin","commit_stats":{"total_commits":537,"total_committers":94,"mean_commits":5.712765957446808,"dds":0.6741154562383613,"last_synced_commit":"0fab463b21c6edc4d94834568a3f440241d57887"},"previous_names":["realytics/fork-ts-checker-webpack-plugin"],"tags_count":223,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeStrong%2Ffork-ts-checker-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeStrong%2Ffork-ts-checker-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeStrong%2Ffork-ts-checker-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeStrong%2Ffork-ts-checker-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TypeStrong","download_url":"https://codeload.github.com/TypeStrong/fork-ts-checker-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245585813,"owners_count":20639671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-loader","checker","eslint","plugin","speedup","ts-loader","typescript","vue","webpack","webpack-plugin"],"created_at":"2024-07-31T19:01:39.804Z","updated_at":"2025-03-28T17:34:12.378Z","avatar_url":"https://github.com/TypeStrong.png","language":"TypeScript","readme":"[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"\" width=\"300\" src=\"./media/logo.svg\" /\u003e\n\u003ch1\u003eFork TS Checker Webpack Plugin\u003c/h1\u003e\n\u003cp\u003eWebpack plugin that runs TypeScript type checker on a separate process.\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/fork-ts-checker-webpack-plugin.svg)](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin)\n[![build status](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/workflows/CI/CD/badge.svg?branch=main\u0026event=push)](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/actions?query=branch%3Amain+event%3Apush)\n[![downloads](http://img.shields.io/npm/dm/fork-ts-checker-webpack-plugin.svg)](https://npmjs.org/package/fork-ts-checker-webpack-plugin)\n[![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\u003c/div\u003e\n\n## Features\n\n * Speeds up [TypeScript](https://github.com/Microsoft/TypeScript) type checking (by moving it to a separate process) 🏎\n * Supports modern TypeScript features like [project references](https://www.typescriptlang.org/docs/handbook/project-references.html) and [incremental mode](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#faster-subsequent-builds-with-the---incremental-flag) ✨\n * Displays nice error messages with the [code frame](https://babeljs.io/docs/en/next/babel-code-frame.html) formatter 🌈\n\n## Installation\n\nThis plugin requires **Node.js \u003e=14.0.0+**, **Webpack ^5.11.0**, **TypeScript ^3.6.0**\n\n* If you depend on **TypeScript 2.1 - 2.6.2**, please use [version 4](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v4.1.4) of the plugin.\n* If you depend on **Webpack 4**, **TypeScript 2.7 - 3.5.3** or **ESLint** feature, please use [version 6](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v6.2.6) of the plugin.\n* If you depend on **Node.js 12**, please use [version 8](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v8.0.0) of the plugin.\n* If you need Vue.js support, please use [version 6](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v6.5.2) of ths plugin\n\n```sh\n# with npm\nnpm install --save-dev fork-ts-checker-webpack-plugin\n\n# with yarn\nyarn add --dev fork-ts-checker-webpack-plugin\n\n# with pnpm\npnpm add -D fork-ts-checker-webpack-plugin\n```\n\nThe minimal webpack config (with [ts-loader](https://github.com/TypeStrong/ts-loader))\n\n```js\n// webpack.config.js\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\nmodule.exports = {\n  context: __dirname, // to automatically find tsconfig.json\n  entry: './src/index.ts',\n  resolve: {\n    extensions: [\".ts\", \".tsx\", \".js\"],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'ts-loader',\n        // add transpileOnly option if you use ts-loader \u003c 9.3.0 \n        // options: {\n        //   transpileOnly: true\n        // }\n      }\n    ]\n  },\n  plugins: [new ForkTsCheckerWebpackPlugin()],\n  watchOptions: {\n    // for some systems, watching many files can result in a lot of CPU or memory usage\n    // https://webpack.js.org/configuration/watch/#watchoptionsignored\n    // don't use this pattern, if you have a monorepo with linked packages\n    ignored: /node_modules/,\n  },\n};\n```\n\n\u003e Examples how to configure it with [babel-loader](https://github.com/babel/babel-loader), [ts-loader](https://github.com/TypeStrong/ts-loader)\n\u003e and [Visual Studio Code](https://code.visualstudio.com/) are in the [**examples**](./examples) directory.\n\n## Modules resolution\n\nIt's very important to be aware that **this plugin uses [TypeScript](https://github.com/Microsoft/TypeScript)'s, not\n[webpack](https://github.com/webpack/webpack)'s modules resolution**. It means that you have to setup `tsconfig.json` correctly.\n\n\u003e It's because of the performance - with TypeScript's module resolution we don't have to wait for webpack to compile files.\n\u003e\n\u003e To debug TypeScript's modules resolution, you can use `tsc --traceResolution` command.\n\n## Options\n\nThis plugin uses [`cosmiconfig`](https://github.com/davidtheclark/cosmiconfig). This means that besides the plugin constructor,\nyou can place your configuration in the:\n * `\"fork-ts-checker\"` field in the `package.json`\n * `.fork-ts-checkerrc` file in JSON or YAML format\n * `fork-ts-checker.config.js` file exporting a JS object\n\nOptions passed to the plugin constructor will overwrite options from the cosmiconfig (using [deepmerge](https://github.com/TehShrike/deepmerge)).\n\n| Name         | Type                                 | Default value                             | Description                                                                                                                                                                                                                                                                                                                   |\n|--------------|--------------------------------------|-------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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.                                                                                                                                                                            |\n| `typescript` | `object`                             | `{}`                                      | See [TypeScript options](#typescript-options).                                                                                                                                                                                                                                                                                |\n| `issue`      | `object`                             | `{}`                                      | See [Issues options](#issues-options).                                                                                                                                                                                                                                                                                        |\n| `formatter`  | `string` or `object` or `function`   | `codeframe`                               | Available formatters are `basic`, `codeframe` and a custom `function`. To [configure](https://babeljs.io/docs/en/babel-code-frame#options) `codeframe` formatter, pass: `{ type: 'codeframe', options: { \u003ccoderame options\u003e } }`. To use absolute file path, pass: `{ type: 'codeframe', pathType: 'absolute' }`. |\n| `logger`     | `{ log: function, error: function }` or `webpack-infrastructure` | `console`     | Console-like object to print issues in `async` mode.                                                                                                                                                                                                                                                                          |\n| `devServer`  | `boolean`                            | `true`                                    | If set to `false`, errors will not be reported to Webpack Dev Server.                                                                                                                                                                                                                                                         |\n\n### TypeScript options\n\nOptions for the TypeScript checker (`typescript` option object).\n\n| Name                | Type                                                                           | Default value                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n|---------------------|--------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| `configFile`        | `string`                                                                       | `'tsconfig.json'`                                                                                              | Path to the `tsconfig.json` file (path relative to the `compiler.options.context` or absolute path)                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| `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`.                                                                                                                                                                                                                                                                                                                                                                                            |\n| `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](https://github.com/TypeStrong/ts-loader#context). 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`. |\n| `build`             | `boolean`                                                                      | `false`                                                                                                        | The equivalent of the `--build` flag for the `tsc` command.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| `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`).                                                                                                                                                                                                                                                                                         |\n| `diagnosticOptions` | `object`                                                                       | `{ syntactic: false, semantic: true, declaration: false, global: false }`                                      | Settings to select which diagnostics do we want to perform.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| `profile`           | `boolean`                                                                      | `false`                                                                                                        | Measures and prints timings related to the TypeScript performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| `typescriptPath`    | `string`                                                                       | `require.resolve('typescript')`                                                                                | If supplied this is a custom path where TypeScript can be found.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |\n\n### Issues options\n\nOptions for the issues filtering (`issue` option object).\nI could write some plain text explanation of these options but I think code will explain it better:\n\n```typescript\ninterface Issue {\n  severity: 'error' | 'warning';\n  code: string;\n  file?: string;\n}\n\ntype IssueMatch = Partial\u003cIssue\u003e; // file field supports glob matching\ntype IssuePredicate = (issue: Issue) =\u003e boolean;\ntype IssueFilter = IssueMatch | IssuePredicate | (IssueMatch | IssuePredicate)[];\n```\n\n| Name      | Type          | Default value | Description                                                                                                                                                |\n|-----------|---------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `include` | `IssueFilter` | `undefined`   | If `object`, defines issue properties that should be [matched](src/issue/issue-match.ts). If `function`, acts as a predicate where `issue` is an argument. |\n| `exclude` | `IssueFilter` | `undefined`   | Same as `include` but issues that match this predicate will be excluded.                                                                                   |\n\n\u003cdetails\u003e\n\u003csummary\u003eExpand example\u003c/summary\u003e\n\nInclude issues from the `src` directory, exclude issues from `.spec.ts` files:\n\n```js\nmodule.exports = {\n  // ...the webpack configuration\n  plugins: [\n    new ForkTsCheckerWebpackPlugin({\n      issue: {\n        include: [\n          { file: '**/src/**/*' }\n        ],\n        exclude: [\n          { file: '**/*.spec.ts' }\n        ]\n      }\n    })\n  ]\n};\n```\n\n\u003c/details\u003e\n\n## Plugin hooks\n\nThis plugin provides some custom webpack hooks:\n\n| Hook key   | Type                       | Params                | Description                                                                                                                                                        |\n|------------|----------------------------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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. |\n| `waiting`  | `SyncHook`                 | `compilation`         | Waiting for the issues checking.                                                                                                                                   |\n| `canceled` | `SyncHook`                 | `compilation`         | Issues checking for the compilation has been canceled.                                                                                                             |\n| `error`    | `SyncHook`                 | `compilation`         | An error occurred during issues checking.                                                                                                                          |\n| `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.                                              |\n\nTo access plugin hooks and tap into the event, we need to use the `getCompilerHooks` static method.\nWhen we call this method with a [webpack compiler instance](https://webpack.js.org/api/node/), it returns the object with\n[tapable](https://github.com/webpack/tapable) hooks where you can pass in your callbacks.\n\n```js\n// ./src/webpack/MyWebpackPlugin.js\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\nclass MyWebpackPlugin {\n  apply(compiler) {\n    const hooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);\n\n    // log some message on waiting\n    hooks.waiting.tap('MyPlugin', () =\u003e {\n      console.log('waiting for issues');\n    });\n    // don't show warnings\n    hooks.issues.tap('MyPlugin', (issues) =\u003e\n      issues.filter((issue) =\u003e issue.severity === 'error')\n    );\n  }\n}\n\nmodule.exports = MyWebpackPlugin;\n\n// webpack.config.js\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst MyWebpackPlugin = require('./src/webpack/MyWebpackPlugin');\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    new ForkTsCheckerWebpackPlugin(),\n    new MyWebpackPlugin()\n  ]\n};\n```\n\n## Profiling types resolution\n\nWhen using TypeScript 4.3.0 or newer you can profile long type checks by\nsetting \"generateTrace\" compiler option. This is an instruction from [microsoft/TypeScript#40063](https://github.com/microsoft/TypeScript/pull/40063):\n\n1. Set \"generateTrace\": \"{folderName}\" in your `tsconfig.json` (under `compilerOptions`)\n2. Look in the resulting folder. If you used build mode, there will be a `legend.json` telling you what went where.\n   Otherwise, there will be `trace.json` file and `types.json` files.\n3. Navigate to [edge://tracing](edge://tracing) or [chrome://tracing](chrome://tracing) and load `trace.json`\n4. Expand Process 1 with the little triangle in the left sidebar\n5. Click on different blocks to see their payloads in the bottom pane\n6. Open `types.json` in an editor\n7. When you see a type ID in the tracing output, go-to-line {id} to find data about that type\n\n## Enabling incremental mode\n\nYou must both set \"incremental\": true in your `tsconfig.json` (under `compilerOptions`) and also specify mode: 'write-references' in `ForkTsCheckerWebpackPlugin` settings.\n\n\n## Related projects\n\n * [`ts-loader`](https://github.com/TypeStrong/ts-loader) - TypeScript loader for webpack.\n * [`babel-loader`](https://github.com/babel/babel-loader) - Alternative TypeScript loader for webpack.\n * [`fork-ts-checker-notifier-webpack-plugin`](https://github.com/johnnyreilly/fork-ts-checker-notifier-webpack-plugin) - Notifies about build status using system notifications (similar to the [webpack-notifier](https://github.com/Turbo87/webpack-notifier)).\n\n## Credits\n\nThis plugin was created in [Realytics](https://www.realytics.io/) in 2017. Thank you for supporting Open Source.\n\n## License\n\nMIT License\n\n","funding_links":["https://github.com/sponsors/piotr-oles"],"categories":["TypeScript","Plugins"],"sub_categories":["Rspack Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTypeStrong%2Ffork-ts-checker-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTypeStrong%2Ffork-ts-checker-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTypeStrong%2Ffork-ts-checker-webpack-plugin/lists"}