Get problem matcher for "Extension - Watch" working

.vscode/tasks.json

@@ -21,13 +21,29 @@
             "label": "Extension - Watch",
             "script": "watch",
             "group": "build",
-            "problemMatcher": [
+            "problemMatcher": {
-                // A bit difficult to get a proper one.
+                "source": "webpack-ts-loader",
-                // VSCode's language service stuff usually picks errors up, though
+                "fileLocation": "absolute",
-                // otherwise, they're quite obvious in the terminal, and we don't
+                "background": {
-                // have to worry about them slipping into release, as the release
+                    "activeOnStart": false,
-                // command will fail when there are any compilation errors
+                    "beginsPattern": "^Compilation results$",
-            ],
+                    "endsPattern": "^End of compilation results$"
+                },
+                "pattern":[
+                    {
+                        "regexp": "^\\[TS\\] (.+) in (.+)\\((\\d+):(\\d+)\\):$",
+                        "severity": 1,
+                        "file": 2,
+                        "line": 3,
+                        "column": 4
+                    },
+                    {
+                        "regexp": "^TS(\\d+): (.+)$",
+                        "code": 1,
+                        "message": 2
+                    }
+                ]
+            },
             "isBackground": true
         },
         {

webpack.config.js

@@ -2,7 +2,7 @@
 //@ts-check
 'use strict';
 
-const { join, resolve, basename, dirname } = require('path');
+const { join, resolve, dirname } = require('path');
 const fs = require('fs');
 const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin').default;
@@ -44,6 +44,32 @@ class CopyPuttyExecutable {
     }
 }
 
+class ProblemMatcherSupport {
+    /**
+     * @param {webpack.Compiler} compiler
+     */
+    apply(compiler) {
+        let lastHash = '';
+        compiler.hooks.afterEmit.tap('ProblemMatcher-AfterEmit', (comp) => {
+            const stats = comp.getStats();
+            if (stats.hash === lastHash) return;
+            lastHash = stats.hash;
+            console.log('Compilation results');
+            comp.warnings.forEach(msg => console.warn(msg.message));
+            comp.errors.forEach(msg => console.error(msg.message));
+            console.log('End of compilation results');
+        });
+    }
+}
+
+
+/**@type {Partial<import('ts-loader').Options>}*/
+const tsLoaderOptions = {
+    errorFormatter(message, colors) {
+        return `[TS] ${message.severity} in ${message.file}(${message.line}:${message.character}):\nTS${message.code}: ${message.content}`;
+    }
+};
+
 /**@type {webpack.Configuration}*/
 const config = {
     target: 'node',
@@ -72,12 +98,14 @@ const config = {
             include: /src/,
             use: [{
                 loader: 'ts-loader',
+                options: tsLoaderOptions,
             }]
         }]
     },
     plugins: [
         new CleanWebpackPlugin(),
         new CopyPuttyExecutable(),
+        new ProblemMatcherSupport(),
     ],
 }