\n\n## Credits\n\nThis plugin is forked from [TypeStrong/fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin), which is created by [Piotr Oleś](https://github.com/piotr-oles). See the original project's [LICENSE](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/main/LICENSE).\n\nBig thanks to `fork-ts-checker-webpack-plugin` creators and contributors for their great work. ❤️\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???? For Rsbuild projects, use [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) to get out-of-the-box experience.\n\n## Installation\n\nThis plugin requires **Node.js >=16.0.0+**, **Rspack ^1.0.0**, **TypeScript ^3.8.0**\n\n```sh\n# with npm\nnpm install -D ts-checker-rspack-plugin\n\n# with yarn\nyarn add -D ts-checker-rspack-plugin\n\n# with pnpm\npnpm add -D ts-checker-rspack-plugin\n```\n\nThe minimal Rspack config with [builtin:swc-loader](https://rspack.rs/guide/features/builtin-swc-loader).\n\n```js\n// rspack.config.mjs\nimport { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';\n\nexport default {\n entry: './src/index.ts',\n resolve: {\n extensions: ['.ts', '.tsx', '.js'],\n },\n module: {\n rules: [\n {\n test: /\\.tsx?$/,\n loader: 'builtin:swc-loader',\n options: {\n jsc: {\n parser: {\n syntax: 'typescript',\n },\n },\n },\n },\n ],\n },\n plugins: [new TsCheckerRspackPlugin()],\n};\n```\n\nIf you are using CommonJS:\n\n```js\n// rspack.config.js\nconst { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');\n\nmodule.exports = {\n plugins: [new TsCheckerRspackPlugin()],\n};\n```\n\n## Modules resolution\n\nIt's very important to be aware that **this plugin uses [TypeScript](https://github.com/Microsoft/TypeScript)'s, not\nRspack's modules resolution**. It means that you have to setup `tsconfig.json` correctly.\n\n> It's because of the performance - with TypeScript's module resolution we don't have to wait for Rspack to compile files.\n>\n> To debug TypeScript's modules resolution, you can use `tsc --traceResolution` command.\n\n## Options\n\n| Name | Type | Default value | Description |\n| ------------ | ---------------------------------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `async` | `boolean` | `compiler.options.mode === 'development'` | If `true`, reports issues **after** Rspack'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: { } }`. 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 Dev Server and displayed in the error overlay. |\n\n### TypeScript options\n\nOptions for the TypeScript checker (`typescript` option object).\n\n| Name | Type | Default value | Description |\n| ------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `memoryLimit` | `number` | `8192` | 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 `ts-checker-rspack-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).\n\n- **Type**:\n\n```typescript\ninterface IssueOptions {\n include?: IssuePredicateOption;\n exclude?: IssuePredicateOption;\n defaultSeverity?: 'auto' | 'warning' | 'error';\n}\n\ninterface Issue {\n severity: 'error' | 'warning';\n code: string;\n // file field supports glob matching\n file?: string;\n}\n\ntype IssueMatch = Partial;\ntype IssuePredicate = (issue: Issue) => boolean;\ntype IssuePredicateOption = IssuePredicate | IssueMatch | (IssuePredicate | IssueMatch)[];\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| `defaultSeverity` | `'auto' \\| 'warning' \\| 'error'` | `'auto'` | Controls how the plugin assigns the severity of emitted issues. |\n\n`defaultSeverity` behavior:\n\n- `auto`: Uses the default mapping based on the TypeScript diagnostic category (`Error` → `error`, `Warning` → `warning`).\n- `warning`: Forces all issues to be emitted as warnings.\n- `error`: Forces all issues to be emitted as errors.\n\n- **Example**:\n\nInclude issues from the `src` directory, exclude issues from `.spec.ts` files:\n\n```js\nnew TsCheckerRspackPlugin({\n issue: {\n include: [{ file: '**/src/**/*' }],\n exclude: [{ file: '**/*.spec.ts' }],\n },\n});\n```\n\nExclude files under `/node_modules/` using `file:`:\n\n```js\nnew TsCheckerRspackPlugin({\n issue: {\n exclude: [({ file = '' }) => /[\\\\/]some-folder[\\\\/]/.test(file)],\n },\n});\n```\n\nForce all issues to be emitted as warnings and do not break the build:\n\n```js\nnew TsCheckerRspackPlugin({\n issue: {\n defaultSeverity: 'warning',\n },\n});\n```\n\n## Plugin hooks\n\nThis plugin provides some custom Rspack 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 [Rspack compiler instance](https://rspack.rs/api/javascript-api/compiler), 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/rspack/MyRspackPlugin.js\nconst { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');\n\nclass MyRspackPlugin {\n apply(compiler) {\n const hooks = TsCheckerRspackPlugin.getCompilerHooks(compiler);\n\n // log some message on waiting\n hooks.waiting.tap('MyPlugin', () => {\n console.log('waiting for issues');\n });\n // don't show warnings\n hooks.issues.tap('MyPlugin', (issues) => issues.filter((issue) => issue.severity === 'error'));\n }\n}\n\nmodule.exports = MyRspackPlugin;\n\n// rspack.config.js\nconst { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');\nconst MyRspackPlugin = require('./src/rspack/MyRspackPlugin');\n\nmodule.exports = {\n /* ... */\n plugins: [new TsCheckerRspackPlugin(), new MyRspackPlugin()],\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## Performance optimization\n\nThis plugin delegates type checking to TypeScript, so overall performance is mostly determined by `tsc` itself.\n\nIf you need faster type checks, start by optimizing your TypeScript setup using the [official TypeScript performance guide](https://github.com/microsoft/TypeScript/wiki/Performance).\n\nFor example, properly configuring the `include` and `exclude` scopes in `tsconfig.json` can significantly reduce unnecessary type checking and improve TypeScript performance:\n\n```json title=\"tsconfig.json\"\n{\n \"include\": [\"src\"],\n \"exclude\": [\"**/node_modules\", \"**/.*/\"]\n}\n```\n\n## Enabling incremental mode\n\nTypeScript's \"incremental\" mode speeds up initial cold-start typechecks keeping an on-disk cache.\n\nIt does not speed up subsequent subsequent re-typechecking during the runtime of the dev server.\n\nTo enable incremental mode, set `\"compilerOptions.incremental\": true` in your `tsconfig.json`:\n\n```diff\n{\n \"compilerOptions\": {\n+ \"incremental\": true,\n }\n}\n```\n\nIn the past we also recommended to combine incremental mode with specifying `build: true` in `TsCheckerRspackPlugin` settings to enable TypeScript's [\"Build\" mode](https://www.typescriptlang.org/docs/handbook/project-references.html#build-mode-for-typescript) designed to handle [Project References](https://www.typescriptlang.org/docs/handbook/project-references.html#build-mode-for-typescript).\n\nHowever, \"Build\" mode causes significant slowdowns for re-typechecks when the dev server is already running, as it switches from TypeScript's in-memory \"Watch\" mode to \"Build\" mode. If you need \"Build\" mode, it can be configured as:\n\n```js\nnew TsCheckerRspackPlugin({\n typescript: {\n build: true,\n },\n});\n```\n\n## Vue components\n\nTo enable typecheck in `.vue` files, use the custom TypeScript wrapper [`@esctn/vue-tsc-api`](https://www.npmjs.com/package/@esctn/vue-tsc-api). It works on top of [`vue-tsc`](https://www.npmjs.com/package/vue-tsc) — a popular CLI tool for type-checking Vue 3 code.\n\n```bash\nnpm add @esctn/vue-tsc-api -D\n```\n\n```js\nnew TsCheckerRspackPlugin({\n typescript: {\n typescriptPath: '@esctn/vue-tsc-api',\n },\n});\n```\n\n## License\n\nMIT License\n","_attachments":{},"homepage":"https://github.com/rspack-contrib/ts-checker-rspack-plugin#readme","bugs":{"url":"https://github.com/rspack-contrib/ts-checker-rspack-plugin/issues"},"license":"MIT"}
![\"npm](\"https://img.shields.io/npm/v/ts-checker-rspack-plugin?style=flat-square&colorA=564341&colorB=EDED91\")
\n \n ![\"license\"](\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91\"){kind=icon}
\n ![\"downloads\"](\"https://img.shields.io/npm/dm/ts-checker-rspack-plugin.svg?style=flat-square&colorA=564341&colorB=EDED91\")
\n