How to implement `au run --watch` task + debugging

Question

I'm trying to implement "F5" debugging for Aurelia CLI based applications in VS Code. The Aurelia CLI is built on top of Gulp tasks. I'd like to set up a task that runs au run --watch and have this task launched when pressing "F5" for debugging ("Launch Chrome" option).

Creating a basic task for the au run --watch command is simple enough.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "au",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "suppressTaskName": true,
      "args": [
        "run",
        "--watch"
      ],
      "isBuildCommand": false,
      "isBackground": true
      }
  ]
}

I can then have this task launched when I press F5 by adding it to the "Launch Chrome against localhost" debug configuration:

    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:9000",
        "webRoot": "${workspaceRoot}",
        "preLaunchTask": "watch"
    }

The problem that I'm seeing is that because this task is a "watch" task that doesn't complete, Code never launches a Chrome tab or starts the debugging session.

I've tried added a "problemMatcher" to my task configuration, but frankly, the documentation for this feature is a bit sparse. The error outputs I get don't seem to match what the JSON schema says. Hopefully somebody can help me out though. Here is my current, non-working task configuration. When I say non-working, I mean that the task runs successfully, but VS Code doesn't notice that the watching part of the task has begun.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "au",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "suppressTaskName": true,
      "args": [
        "run",
        "--watch"
      ],
      "isBuildCommand": false,
      "isBackground": true,
      "problemMatcher": {
        "owner": "au",
        "severity": "info",
        "fileLocation": [
          "relative",
          "${workspaceRoot}"
        ],
        "pattern": {
          "regexp": "^BrowserSync Available At: http://localhost:3001$",
          "file": 1
        },
        "watching": {
          "activeOnStart": true,
          "beginsPattern": "^File Changed: (.*)", 
          "endsPattern": "^Finished 'reload'"
        }
      }
    }
  ]
}

For reference, when I run this task, this is the output of the command:

Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
Tracing app...
Tracing environment...
Tracing main...
Tracing resources/index...
Tracing app...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-pal-browser...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing text...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'
Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001

When I edit and save a file, something like the following is added to the console output:

File Changed: src\app.js
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
Tracing app...
Writing app-bundle.js...
Finished 'writeBundles'
Starting 'reload'...
Finished 'reload'

Answer 1

We are aware of this and the two corresponding GitHub issues are:

• https://github.com/Microsoft/vscode/issues/6209
• https://github.com/Microsoft/vscode/issues/24589

We plan to improve this in two ways:

• debugging will ask after a timeout if you want to start debugging even if the prelaunch task has not finished
• the task framework will allow to specify the watching attribute on a task itself without the need of a problem matcher.

The issue 6209 contains steps how to workaround this problem today and you are on the right path :-). Things that should be different:

Since you don't want to match any problem use a regexp that doesn't match anything. Something like:

"pattern": {
    "regexp": "__________"
}

The bigger problem is that on first run the end of the activity is signaled differently then when reacting to a file change. So the endsPattern must match both BrowserSync Available At: http://localhost:3001 and Finished 'reload'. So a regexp something like/(?:BrowserSync Available At:)|(?:Finished 'reload')/ The beginsPattern and "activeOnStart": true is correct.

If you still don't get it to work please ping me in #6209.