用于 Angular CLI 构建/服务/测试命令的 VS Code 任务问题匹配器

Question

我正在尝试为标准 Angular CLI 命令（例如ng build, ng serve, ）配置 VS 代码任务ng test。目的是获取问题列表，当我运行 CLI 命令时，我可以轻松遍历该列表。目前，我直接从 VS Code 终端运行这些命令，但有时很难导航到错误，因为并非终端中的所有源链接都是可单击的。无论如何，VS Code 问题列表会更方便。我想知道尽管 Angular 如此流行，仍然没有一个标准的匹配器，还是我错过了一个？

我尝试创建一个自定义匹配器，但它看起来比我预期的要难。Angular CLI 输出打字稿错误以及 html 和 scss 错误，因此任务应该包含多个匹配器。我无法使用标准$tsc匹配器，因为 Angular CLI 输出与 TS 编译器输出略有不同 - 第一个错误以 开头，ERROR in并且匹配器无法识别此错误$tsc。

例如，这是ng test任务，但它没有按预期工作：

1. 当我按 导航到第一个错误时F8，问题列表有时会被清除。我猜想匹配器与检测文件打开错误的 tsserver 发生冲突。
2. 有时匹配器会错过一些错误。

// .vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [{
        "label": "test",
        "type": "shell",
        "command": "ng test",
        "problemMatcher": [{
            "base": "$tsc",
            "fileLocation": [
                "relative",
                "${workspaceRoot}/src"
            ],
            "pattern":[{
                "kind": "ts",
                "regexp": "^(?:ERROR in )?(.*):(\\d+):(\\d+) - (error|warning|info) TS(.*): (.*)$",
                "file": 1,
                "line": 2,
                "column": 3,
                "severity": 4,
                "code": 5,
                "message": 6
            }]
        }],
        "group": {
            "kind": "test",
            "isDefault": true
        }
    }]
}

Answer 1

我在 Angular 11 中遇到了同样的问题。我在 vscode 源代码中找到了标准的 $tsc 问题匹配器， 并且我还在开头添加了 Error 一词：

"problemMatcher": [
  {
    "base": "$tsc",
    "pattern": {
      "regexp": "^(Error: )?([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
      "file": 2,
      "line": 3,
      "column": 4,
      "severity": 5,
      "code": 6,
      "message": 7
    }
  }
],

我也在这里写过这个问题