{"_id":"@beisen/fork-ts-checker-webpack-plugin","_rev":"3-6d229a9b76ab54a6940545ab9aef2e1a","name":"@beisen/fork-ts-checker-webpack-plugin","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@beisen/fork-ts-checker-webpack-plugin","version":"1.0.0","description":"Runs typescript type checker and linter on separate process.","license":"MIT","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"rimraf lib && tsc --version && tsc --project \"./src\"","lint":"tslint --project src/tsconfig.json && eslint ./test","lint:fix":"tslint --project src/tsconfig.json --fix && eslint ./test --fix","test":"yarn build && yarn test:unit && yarn test:integration","test:coverage":"rimraf coverage && jest --coverage && rimraf tmp","test:integration":"jest integration && rimraf tmp","test:unit":"jest unit","test:watch":"jest unit --watch","watch":"tsc --version && tsc --project \"./src\" --watch","precommit":"lint-staged && yarn build","commit":"git-cz"},"dependencies":{"babel-code-frame":"^6.22.0","chalk":"^2.4.1","chokidar":"^2.0.4","micromatch":"^3.1.10","minimatch":"^3.0.4","semver":"^5.6.0","tapable":"^1.0.0","worker-rpc":"^0.1.0"},"devDependencies":{"@babel/preset-env":"^7.4.4","@babel/preset-typescript":"^7.3.3","@commitlint/config-conventional":"^7.5.0","@types/babel-code-frame":"^6.20.1","@types/chokidar":"^1.7.5","@types/jest":"^24.0.11","@types/lodash":"^4.14.134","@types/micromatch":"^3.1.0","@types/minimatch":"^3.0.1","@types/mock-require":"^2.0.0","@types/node":"^8.10.38","@types/rimraf":"^2.0.2","@types/semver":"^5.5.0","@types/webpack":"^4.4.19","commitlint":"^7.5.2","copy-dir":"^0.4.0","css-loader":"0.28.11","eslint":"^5.7.0","git-cz":"^3.0.1","husky":"^1.1.4","istanbul":"^0.4.5","jest":"^24.7.1","lint-staged":"^8.0.5","lodash":"^4.17.11","mock-fs":"^4.3.0","mock-require":"^3.0.2","prettier":"^1.14.3","rimraf":"^2.5.4","semantic-release":"^16.0.0-beta.18","ts-loader":"^5.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.16.0","typescript":"^3.0.1","unixify":"^1.0.0","vue":"^2.5.16","vue-class-component":"^6.1.1","vue-loader":"^15.2.4","vue-template-compiler":"^2.5.16","webpack":"^5.0.0-alpha.5"},"engines":{"node":">=6.11.5","yarn":">=1.0.0"},"_id":"@beisen/fork-ts-checker-webpack-plugin@1.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vwlzUSksNH/Sb3tXjGjwzkHXn1tWtD0PVIya7ACzBl/hhynDyu2EbzywmrQDzvWsdCbRXaEFWXZS7itjA1ljWQ==","shasum":"7ab2b9f0ccba1402d150027f7e74b58c35964d9f","tarball":"https://registry.npmjs.org/@beisen/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.0.0.tgz","fileCount":75,"unpackedSize":228569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSYvQCRA9TVsSAnZWagAAM1AP/R8nrjakN+d/LLk0YeD1\n9k2qBfzvp/XzsmLKmGtWWAIclzvIuTXotjJi1Q/c0vR9Kbc3NHxHN111kM+N\n7RdGq8bxcbWAvB7t2k05xElXQwdBbV9YqTQEQqDx9Z9CtkriNwWFRdwvghj+\nu80bC5zDkkuLw4F0v+AkHQAxkYuBUV7dOrtEQyInrQDdy+wSJIvE+DY4qSig\nkdjijxkiK5AHZaVNksQ8IRs7WOECD6AUZqIwFtMhNGXxsoBbhsr1DM/V/Kbn\nYCpg1oeSkEfljfQHbkgDm9hA/t2aB1WIFFMxoAyFT7F7pN643xzMs9PGS7d0\nwHwI2ihHRUjzN3Hp6zCgbutrzj46X2IEchXiHcw0jP6M7Or+CQF+ZIJuLoaq\n3FqqpEXErlQ4GDGiU9vGvLdxtKTLvRobvwRA06iSaP0/xEU2rWUzuWad+fnw\nLRSps3okznlCuBuRwv0fNLkduI/O0IhhPO1ust38P4ZAbbKjkq+Fuqb1h3Bz\nhBUDMZZ30Q8y1cMwqpOjKq4jgEk9tlqNWj2yp0o44nOYm7aTZWMQFlGsCh7i\nEyLut8ytp2AEhkcaWSu8P9CAA7i/iaT8fzxwfnu2BA4TysZTZ/UC5AfLjHDp\nbarM0hIC1d7EJayvA3Cr8OIq4B32PFrw5cwwQK30W5s/FOHURD3xzmGaUE31\n0X55\r\n=HLQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6fYDwrNx2lSl4oY8pvGzSrgAuVxdlfAVCRtEdkHwZZwIhAKuhvnTgBkFLi/AOvO9u3Pm79K3+oZl85sPoNq5vVBjj"}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fork-ts-checker-webpack-plugin_1.0.0_1565101008109_0.5197755293374087"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-06T14:16:47.945Z","1.0.0":"2019-08-06T14:16:48.262Z","modified":"2022-04-04T18:18:48.420Z"},"maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"description":"Runs typescript type checker and linter on separate process.","license":"MIT","readme":"# Fork TS Checker Webpack Plugin\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[![npm beta version](https://img.shields.io/npm/v/fork-ts-checker-webpack-plugin/beta.svg)](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin)\n[![build status](https://travis-ci.org/Realytics/fork-ts-checker-webpack-plugin.svg?branch=master)](https://travis-ci.org/Realytics/fork-ts-checker-webpack-plugin)\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\nWebpack plugin that runs TypeScript type checker on a separate process.\n\n## Installation\n\nThis plugin requires minimum **webpack 2.3**, **TypeScript 2.1** and optionally **tslint 4.0**\n\n```sh\nnpm install --save-dev fork-ts-checker-webpack-plugin\n```\n\nBasic webpack config (with [ts-loader](https://github.com/TypeStrong/ts-loader))\n\n```js\nvar ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\nvar webpackConfig = {\n  context: __dirname, // to automatically find tsconfig.json\n  entry: './src/index.ts',\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'ts-loader',\n        options: {\n          // disable type checker - we will use it in fork plugin\n          transpileOnly: true\n        }\n      }\n    ]\n  },\n  plugins: [new ForkTsCheckerWebpackPlugin()]\n};\n```\n\n## Motivation\n\nThere is already similar solution - [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader). You can\nadd `CheckerPlugin` and delegate checker to the separate process. The problem with `awesome-typescript-loader` was that, in our case,\nit was a lot slower than [ts-loader](https://github.com/TypeStrong/ts-loader) on an incremental build (~20s vs ~3s).\nSecondly, we use [tslint](https://palantir.github.io/tslint) and we wanted to run this, along with type checker, in a separate process.\nThis is why we've created this plugin. To provide better performance, plugin reuses Abstract Syntax Trees between compilations and shares\nthese trees with tslint. It can be scaled with a multi-process mode to utilize maximum CPU power.\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. For example\nif you set `files: ['./src/someFile.ts']` in `tsconfig.json`, this plugin will check only `someFile.ts` for semantic errors. It's because\nof performance. The goal of this plugin is to be _as fast as possible_. With TypeScript's module resolution we don't have to wait for webpack\nto compile files (which traverses dependency graph during compilation) - we have a full list of files from the begin.\n\nTo debug TypeScript's modules resolution, you can use `tsc --traceResolution` command.\n\n## TSLint\n\nIf you have installed [tslint](https://palantir.github.io/tslint), you can enable it by setting `tslint: true` or\n`tslint: './path/to/tslint.json'`. We recommend changing `defaultSeverity` to a `\"warning\"` in `tslint.json` file.\nIt helps to distinguish lints from TypeScript's diagnostics.\n\n## Options\n\n- **tsconfig** `string`:\n  Path to _tsconfig.json_ file. Default: `path.resolve(compiler.options.context, './tsconfig.json')`.\n\n- **compilerOptions** `object`:\n  Allows overriding TypeScript options. Should be specified in the same format as you would do for the `compilerOptions` property in tsconfig.json. Default: `{}`.\n\n- **tslint** `string | true | undefined`:\n\n  - If `string`, path to _tslint.json_ file to check source files against.\n  - If `true`, path to `tslint.json` file will be computed with respect to currently checked file, just like TSLint\n    CLI would do. Suppose you have a project:\n\n    ```\n    ./\n      tslint.json\n\n      src/\n        file.ts\n        anotherFile.ts\n\n        lib/\n          tslint.json\n          someHelperFile.ts\n    ```\n\n    In such a case `src/file.ts` and `src/anotherFile.ts` would be checked against root `tslint.json`, and\n    `src/lib/someHelperFile.ts` would be checked against `src/lib/tslint.json`.\n\n  Default: `undefined`.\n\n- **tslintAutoFix** `boolean`:\n  Passes on `--fix` flag while running `tslint` to auto fix linting errors. Default: false.\n\n- **watch** `string | string[]`:\n  Directories or files to watch by service. Not necessary but improves performance (reduces number of `fs.stat` calls).\n\n- **async** `boolean`:\n  True by default - `async: false` can block webpack's emit to wait for type checker/linter and to add errors to the webpack's compilation.\n  We recommend to set this to `false` in projects where type checking is faster than webpack's build - it's better for integration with other plugins. Another scenario where you might want to set this to `false` is if you use the `overlay` functionality of `webpack-dev-server`.\n\n- **ignoreDiagnostics** `number[]`:\n  List of TypeScript diagnostic codes to ignore.\n\n- **ignoreLints** `string[]`:\n  List of tslint rule names to ignore.\n\n- **ignoreLintWarnings** `boolean`:\n  If true, will ignore all lint warnings.\n\n- **reportFiles** `string[]`:\n  Only report errors on files matching these glob patterns. This can be useful when certain types definitions have errors that are not fatal to your application. Default: `[]`. Please note that this may behave unexpectedly if using the incremental API as the incremental API doesn't look for global and semantic errors [if it has already found syntactic errors](https://github.com/Microsoft/TypeScript/blob/89386ddda7dafc63cb35560e05412487f47cc267/src/compiler/watch.ts#L141).\n\n```js\n// in webpack.config.js\nnew ForkTsCheckerWebpackPlugin({\n  reportFiles: ['src/**/*.{ts,tsx}', '!src/skip.ts']\n});\n```\n\n- **colors** `boolean`:\n  If `false`, disables built-in colors in logger messages. Default: `true`.\n\n- **logger** `object`:\n  Logger instance. It should be object that implements method: `error`, `warn`, `info`. Default: `console`.\n\n- **formatter** `'default' | 'codeframe' | ((message: NormalizedMessage, useColors: boolean) => string)`:\n  Formatter for diagnostics and lints. By default uses `default` formatter. You can also pass your own formatter as a function\n  (see `src/NormalizedMessage.js` and `src/formatter/` for api reference).\n\n- **formatterOptions** `object`:\n  Options passed to formatters (currently only `codeframe` - see [available options](https://www.npmjs.com/package/babel-code-frame#options))\n\n- **silent** `boolean`:\n  If `true`, logger will not be used. Default: `false`.\n\n- **checkSyntacticErrors** `boolean`:\n  This option is useful if you're using ts-loader in `happyPackMode` with [HappyPack](https://github.com/amireh/happypack) or [thread-loader](https://github.com/webpack-contrib/thread-loader) to parallelise your builds. If `true` it will ensure that the plugin checks for _both_ syntactic errors (eg `const array = [{} {}];`) and semantic errors (eg `const x: number = '1';`). By default the plugin only checks for semantic errors. This is because when ts-loader is used in `transpileOnly` mode, ts-loader will still report syntactic errors. When used in `happyPackMode` it does not. Default: `false`.\n\n- **memoryLimit** `number`:\n  Memory limit for service process in MB. If service exits with allocation failed error, increase this number. Default: `2048`.\n\n- **workers** `number`:\n  You can split type checking to a few workers to speed-up increment build. **Be careful** - if you don't want to increase build time, you\n  should keep free 1 core for _build_ and 1 core for a _system_ _(for example system with 4 CPUs should use max 2 workers)_. Second thing -\n  node doesn't share memory between workers - keep in mind that memory usage will increase. Be aware that in some scenarios increasing workers\n  number **can increase checking time**. Default: `ForkTsCheckerWebpackPlugin.ONE_CPU`.\n\n- **vue** `boolean`:\n  If `true`, the linter and compiler will process VueJs single-file-component (.vue) files. See the\n  [Vue section](https://github.com/Realytics/fork-ts-checker-webpack-plugin#vue) further down for information on how to correctly setup your project.\n\n- **useTypescriptIncrementalApi** `boolean`:\n  If true, the plugin will use incremental compilation API introduced in TypeScript 2.7. In this mode you can only have 1\n  worker, but if the changes in your code are small (like you normally have when you work in 'watch' mode), the compilation\n  may be much faster, even compared to multi-threaded compilation. Defaults to `true` when working with TypeScript 3+ and `false` when below 3. The default can be overridden by directly specifying a value.\n\n- **measureCompilationTime** `boolean`:\n  If true, the plugin will measure the time spent inside the compilation code. This may be useful to compare modes,\n  especially if there are other loaders/plugins involved in the compilation. **requires node 8+**\n\n- **typescript** `string`:\n  If supplied this is a custom path where `typescript` can be found. Defaults to `require.resolve('typescript')`.\n\n- **resolveModuleNameModule** and **resolveTypeReferenceDirectiveModule** `string`:\n  Both of those options refer to files on the disk that respectively export a `resolveModuleName` or a `resolveTypeReferenceDirectiveModule` function. These functions will be used to resolve the import statements and the `<reference types=\"...\">` directives instead of the default TypeScript implementation. Check the following code for an example of what those functions should look like:\n\n  <details>\n    <summary>Code sample</summary>\n\n  ```js\n  const { resolveModuleName } = require(`ts-pnp`);\n\n  exports.resolveModuleName = (\n    typescript,\n    moduleName,\n    containingFile,\n    compilerOptions,\n    resolutionHost\n  ) => {\n    return resolveModuleName(\n      moduleName,\n      containingFile,\n      compilerOptions,\n      resolutionHost,\n      typescript.resolveModuleName\n    );\n  };\n\n  exports.resolveTypeReferenceDirective = (\n    typescript,\n    moduleName,\n    containingFile,\n    compilerOptions,\n    resolutionHost\n  ) => {\n    return resolveModuleName(\n      moduleName,\n      containingFile,\n      compilerOptions,\n      resolutionHost,\n      typescript.resolveTypeReferenceDirective\n    );\n  };\n  ```\n\n</details>\n\n### Pre-computed consts:\n\n- `ForkTsCheckerWebpackPlugin.ONE_CPU` - always use one CPU\n- `ForkTsCheckerWebpackPlugin.ALL_CPUS` - always use all CPUs (will increase build time)\n- `ForkTsCheckerWebpackPlugin.ONE_CPU_FREE` - leave only one CPU for build (probably will increase build time)\n- `ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE` - **recommended** - leave two CPUs free (one for build, one for system)\n\n## Different behaviour in watch mode\n\nIf you turn on [webpacks watch mode](https://webpack.js.org/configuration/watch/#watch) the `fork-ts-checker-notifier-webpack-plugin` will take care of logging type errors, _not_ webpack itself. That means if you set `silent: true` you won't see type errors in your console in watch mode.\n\nYou can either set `silent: false` to show the logging from `fork-ts-checker-notifier-webpack-plugin` _or_ set `async: false`. Now webpack itself will log type errors again, but note that this can slow down your builds depending on the size of your project.\n\n## Notifier\n\nYou may already be using the excellent [webpack-notifier](https://github.com/Turbo87/webpack-notifier) plugin to make build failures more obvious in the form of system notifications. There's an equivalent notifier plugin designed to work with the `fork-ts-checker-webpack-plugin`. It is the `fork-ts-checker-notifier-webpack-plugin` and can be found [here](https://github.com/johnnyreilly/fork-ts-checker-notifier-webpack-plugin). This notifier deliberately has a similar API as the `webpack-notifier` plugin to make migration easier.\n\n## Known Issue Watching Non-Emitting Files\n\nAt present there is an issue with the plugin regarding the triggering of type-checking when a change is made in a source file that will not emit js. If you have a file which contains only `interface`s and / or `type`s then changes to it will **not** trigger the type checker whilst in watch mode. Sorry about that.\n\nWe hope this will be resolved in future; the issue can be tracked [here](https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/36).\n\n## Plugin Hooks\n\nThis plugin provides some custom webpack hooks (all are sync):\n\n| Event name                              | Hook Access Key      | Description                                                                    | Params                                                                     |\n| --------------------------------------- | -------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |\n| `fork-ts-checker-cancel`                | `cancel`             | Cancellation has been requested                                                | `cancellationToken`                                                        |\n| `fork-ts-checker-waiting`               | `waiting`            | Waiting for results                                                            | `hasTsLint`                                                                |\n| `fork-ts-checker-service-before-start`  | `serviceBeforeStart` | Async plugin that can be used for delaying `fork-ts-checker-service-start`     | -                                                                          |\n| `fork-ts-checker-service-start`         | `serviceStart`       | Service will be started                                                        | `tsconfigPath`, `tslintPath`, `watchPaths`, `workersNumber`, `memoryLimit` |\n| `fork-ts-checker-service-start-error`   | `serviceStartError`  | Cannot start service                                                           | `error`                                                                    |\n| `fork-ts-checker-service-out-of-memory` | `serviceOutOfMemory` | Service is out of memory                                                       | -                                                                          |\n| `fork-ts-checker-receive`               | `receive`            | Plugin receives diagnostics and lints from service                             | `diagnostics`, `lints`                                                     |\n| `fork-ts-checker-emit`                  | `emit`               | Service will add errors and warnings to webpack compilation ('build' mode)     | `diagnostics`, `lints`, `elapsed`                                          |\n| `fork-ts-checker-done`                  | `done`               | Service finished type checking and webpack finished compilation ('watch' mode) | `diagnostics`, `lints`, `elapsed`                                          |\n\nThe **Event name** is there for backward compatibility with webpack 2/3. Regardless\nof the version of webpack (2, 3 or 4) you are using, we will always access plugin hooks with **Hook Access Keys** as\ndescribed below.\n\n### Accessing plugin hooks\n\nAll plugin hooks are compatible with both [webpack](https://webpack.js.org) version\n4 and version 2. To access plugin hooks and tap into the event, we need to use\nthe `getCompilerHooks` static method. When we call this method with a [webpack compiler instance](https://webpack.js.org/api/node/),\nit returns the series of [tapable](https://github.com/webpack/tapable)\nhooks where you can pass in your callbacks.\n\n```js\n// require the plugin\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n// setup compiler with the plugin\nconst compiler = webpack({\n  // .. webpack config\n});\n// Optionally add the plugin to the compiler\n// **Don't do this if already added through configuration**\nnew ForkTsCheckerWebpackPlugin({\n  silent: true,\n  async: true\n}).apply(compiler);\n// Now get the plugin hooks from compiler\nconst tsCheckerHooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);\n// These hooks provide access to different events\n// =================================================== //\n// The properties of tsCheckerHooks corresponds to the //\n// Hook Access Key of the table above.                 //\n// =================================================== //\n// Example, if we want to run some code when plugin has received diagnostics\n// and lint\ntsCheckerHooks.receive.tap('yourListenerName', (diagnostics, lint) => {\n  // do something with diagnostics, perhaps show custom message\n  console.log(diagnostics);\n});\n// Say we want to show some message when plugin is waiting for typecheck results\ntsCheckerHooks.waiting.tap('yourListenerName', () => {\n  console.log('waiting for typecheck results');\n});\n```\n\nCalling `.tap()` on any hooks, requires two arguments.\n\n##### `name` (`string`)\n\nThe first argument passed to `.tap` is the name of your listener callback (`yourListenerName`).\nIt doesn't need to correspond to anything special. It is intended to be used\n[internally](https://github.com/webpack/tapable#interception) as the `name` of\nthe hook.\n\n##### `callback` (`function`)\n\nThe second argument is the callback function. Depending on the hook you are\ntapping into, several arguments are passed to the function. Do check the table\nabove to find out which arguments are passed to which hooks.\n\n### Accessing hooks on Webpack Multi-Compiler instance\n\nThe above method will not work on webpack [multi compiler](https://webpack.js.org/api/node/#multicompiler)\ninstance. The reason is `getCompilerHooks` expects (at lease as of now) the same\ncompiler instance to be passed where the plugin was attached. So in case of\nmulti compiler, we need to access individual compiler instances.\n\n```js\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n// setup multi compiler with the plugin\nconst compiler = webpack([\n  {\n    // .. webpack config\n  },\n  {\n    // .. webpack config\n  }\n]);\n\n// safely determine if instance is multi-compiler\nif ('compilers' in compiler) {\n  compiler.compilers.forEach(singleCompiler => {\n    // get plugin hooks from the single compiler instance\n    const tsCheckerHooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(\n      singleCompiler\n    );\n    // now access hooks just like before\n    tsCheckerHooks.waiting.tap('yourListenerName', () => {\n      console.log('waiting for typecheck results');\n    });\n  });\n}\n```\n\n## Vue\n\n1. Turn on the vue option in the plugin in your webpack config:\n\n```js\nnew ForkTsCheckerWebpackPlugin({\n  tslint: true,\n  vue: true\n});\n```\n\n2. To activate TypeScript in your `.vue` files, you need to ensure your script tag's language attribute is set\n   to `ts` or `tsx` (also make sure you include the `.vue` extension in all your import statements as shown below):\n\n```html\n<script lang=\"ts\">\n  import Hello from '@/components/hello.vue';\n\n  // ...\n</script>\n```\n\n3. Ideally you are also using `ts-loader` (in transpileOnly mode). Your Webpack config rules may look something like this:\n\n```js\n{\n  test: /\\.ts$/,\n  loader: 'ts-loader',\n  include: [resolve('src'), resolve('test')],\n  options: {\n    appendTsSuffixTo: [/\\.vue$/],\n    transpileOnly: true\n  }\n},\n{\n  test: /\\.vue$/,\n  loader: 'vue-loader',\n  options: vueLoaderConfig\n},\n```\n\n4. Add rules to your `tslint.json` and they will be applied to Vue files. For example, you could apply the Standard JS rules [tslint-config-standard](https://github.com/blakeembrey/tslint-config-standard) like this:\n\n```json\n{\n  \"defaultSeverity\": \"error\",\n  \"extends\": [\"tslint-config-standard\"]\n}\n```\n\n5. Ensure your `tsconfig.json` includes .vue files:\n\n```js\n// tsconfig.json\n{\n  \"include\": [\n    \"src/**/*.ts\",\n    \"src/**/*.vue\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n```\n\n6. It accepts any wildcard in your TypeScript configuration:\n\n```js\n// tsconfig.json\n{\n  \"compilerOptions\": {\n\n    // ...\n\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\n        \"src/*\"\n      ],\n      \"~/*\": [\n        \"src/*\"\n      ]\n    }\n  }\n}\n\n// In a .ts or .vue file...\nimport Hello from '@/components/hello.vue'\n```\n\n7. If you are working in **VSCode**, you can get extensions [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) and [TSLint Vue](https://marketplace.visualstudio.com/items?itemName=prograhammer.tslint-vue) to complete the developer workflow.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}