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

问题描述

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

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

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

当我按导航到第一个错误时F8，有时会清除问题列表。我猜匹配器与检测文件打开错误的 tsserver 冲突。
有时匹配器会遗漏一些错误。

// .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
        }
    }]
}

标签： angularvisual-studio-codevscode-tasks

我在 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
    }
  }
],

我也在这里写过这个问题

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

问题描述

解决方案

推荐阅读