Awesome

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>"
						}
					}
				}
			]
		}
	]
}