fork-ts-checker-webpack-plugin

The issue option allows you to include or exclude specific issues based on their properties (severity, code, or file) or via a predicate function.

An Issue object contains:

• severity: 'error' | 'warning'
• code: string
• file: string (supports glob matching)

You can provide an IssueMatch (partial object), an IssuePredicate (function), or an array of both to the include or exclude keys.

interface Issue {
  severity: 'error' | 'warning';
  code: string;
  file?: string;
}

type IssueMatch = Partial<Issue>; // file field supports glob matching
type IssuePredicate = (issue: Issue) => boolean;
type IssueFilter = IssueMatch | IssuePredicate | (IssueMatch | IssuePredicate)[];

The plugin uses TypeScript's module resolution, not Webpack's. This is done for performance reasons to avoid waiting for Webpack to compile files.

Because of this, you must ensure your tsconfig.json is configured correctly for your module resolution needs. If you encounter resolution issues, you can debug them using the TypeScript command: tsc --traceResolution.

The plugin supports external configuration using cosmiconfig. You can define your configuration in one of the following locations:

1. The "fork-ts-checker" field in your package.json.
2. A .fork-ts-checkerrc file in JSON or YAML format.
3. A fork-ts-checker.config.js file that exports a JavaScript object.

Note: Options passed directly to the plugin constructor in your Webpack configuration will overwrite options found in cosmiconfig files using deep merging.

When using babel-loader instead of ts-loader, you must enable syntactic diagnostics in the plugin configuration to ensure that TypeScript syntax errors are caught. This is because babel-loader only handles transpilation and does not perform type checking itself.

To enable these diagnostics, set semantic and syntactic to true within the typescript.diagnosticOptions object.

new ForkTsCheckerWebpackPlugin({
  typescript: {
    diagnosticOptions: {
      semantic: true,
      syntactic: true,
    },
  },
})

To enable incremental mode, you must configure both your TypeScript configuration and the plugin settings:

1. In your tsconfig.json, set "incremental": true under compilerOptions.
2. In your ForkTsCheckerWebpackPlugin settings, specify mode: 'write-references'.

If you are using TypeScript 4.3.0 or newer, you can profile long type checks using the generateTrace compiler option:

1. Set "generateTrace": "{folderName}" in your tsconfig.json under compilerOptions.
2. Locate the resulting folder. If using build mode, it contains legend.json. Otherwise, it contains trace.json and types.json files.
3. Open chrome://tracing or edge://tracing in your browser and load the trace.json file.
4. Expand Process 1 in the sidebar to inspect payloads.
5. To map type IDs from the tracing output to actual data, open types.json in an editor and use the ID to find the corresponding type information.

To see type-checking errors from fork-ts-checker-webpack-plugin directly in the Visual Studio Code Problems tab, you must configure a .vscode/tasks.json file. This configuration uses a problem matcher to parse the webpack output and map errors to the correct files and lines.

This specific implementation relies on the TypeScript + Webpack Problem Matchers extension by @eamodio to correctly interpret the error output.

Use the issue property in the plugin configuration to filter which errors and warnings are reported. For example, you can include only issues from a specific directory and exclude test files using glob patterns.

module.exports = {
  // ...the webpack configuration
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      issue: {
        include: [
          { file: '**/src/**/*' }
        ],
        exclude: [
          { file: '**/*.spec.ts' }
        ]
      }
    })
  ]
};

The changelog.config.js file defines how changelogs are generated, including allowed commit types, message length constraints, and the structure of the changelog questions. You can customize the list of valid types, their descriptions, and which sections they appear in.

module.exports = {
  list: ['feat', 'fix', 'refactor', 'perf', 'test', 'chore', 'docs'],
  maxMessageLength: 64,
  minMessageLength: 3,
  questions: ['type', 'subject', 'body', 'breaking', 'issues'],
  types: {
    feat: {
      description: 'A new feature',
      value: 'feat',
      section: 'Features',
    },
    fix: {
      description: 'A bug fix',
      value: 'fix',
      section: 'Bug Fixes',
    },
    // ... other types
  },
};