TypeScript + Webpack Problem Matchers for VS Code

Provides problem matchers for use with TypeScript projects using Webpack with ts-loader, fork-ts-checker-webpack-plugin v5.0 or later with or without ESLint, and/or tslint-loader.

Features

Provides the following problem matchers:

• \$ts-webpack — adds errors and warnings reported by ts-loader
• \$ts-webpack-watch — adds errors and warnings reported by ts-loader while in watch mode
• \$ts-checker-webpack — adds errors and warnings reported by the fork-ts-checker-webpack-plugin
• \$ts-checker-webpack-watch — adds errors and warnings reported by the fork-ts-checker-webpack-plugin while in watch mode
• \$ts-checker-eslint-webpack — adds ESLint errors and warnings reported by the fork-ts-checker-webpack-plugin
• \$ts-checker-eslint-webpack-watch — adds ESLint errors and warnings reported by the fork-ts-checker-webpack-plugin while in watch mode
• \$tslint-webpack — adds lint warnings reported by tslint-loader
• \$tslint-webpack-watch — adds lint warnings reported by tslint-loader while in watch mode

Usage

The following example shows how to add problem matchers to your project:

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": ["$ts-webpack", "$tslint-webpack"]
        },
        {
            "type": "npm",
            "script": "watch",
            "group": "build",
            "isBackground": true,
            "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
        }
    ]
}

Webpack v5 (webpack-cli@4)

👉 Using Webpack v5 or later: In order for the watch matchers to work properly in Webpack v4, you must add --info-verbosity verbose to your webpack watch command e.g. webpack --watch --info-verbosity verbose as this instructs webpack to output lifecycle event messages for each re-compile.

Webpack v4 (webpack-cli@3)

n order for the watch matchers to work properly, you must add infrastructureLogging: { level: "log" } to your webpack.config.js as this instructs webpack to output lifecycle event messages for each re-compile.

For example:

// webpack.config.js
module.exports = {
    // ...the webpack configuration
    infrastructureLogging: {
        level: 'log',
    },
};

👉 In addition, when using the \$ts-checker-webpack, \$ts-checker-webpack-watch, \$ts-checker-eslint-webpack, and \$ts-checker-eslint-webpack-watch matchers, you must also set formatter: 'basic' in your fork-ts-checker-webpack-plugin options

Custom Usage

You can also use any of the problem matchers as a base problem matcher for your own custom needs:

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": ["$ts-webpack", "$tslint-webpack"]
        },
        {
            "type": "npm",
            "script": "watch",
            "group": "build",
            "isBackground": true,
            "problemMatcher": [
                {
                    "base": "$ts-webpack",
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": {
                            "regexp": "<your-custom-starting-regex-pattern here>"
                        },
                        "endsPattern": {
                            "regexp": "<your-custom-ending-regex-pattern here>"
                        }
                    }
                },
                {
                    "base": "$tslint-webpack",
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": {
                            "regexp": "<your-custom-starting-regex-pattern here>"
                        },
                        "endsPattern": {
                            "regexp": "<your-custom-ending-regex-pattern here>"
                        }
                    }
                }
            ]
        }
    ]
}