用于 ng build --watch 的 VSCode tasks.json答案

【问题标题】：VSCode tasks.json for ng build --watch用于 ng build --watch 的 VSCode tasks.json
【发布时间】：2018-07-29 01:36:07
【问题描述】：

我没有找到适用于 Angular cli“ng build --watch”commapnd 的有效 Visual Studio Code tasks.json 定义。有人可以提供经过良好测试的定义吗？

要重现，尝试出现错误，然后修复它。错误将保留在“问题选项卡”中

还需要“ng lint”的任务定义。

这是我拥有的，但效果不佳。

{
"version": "2.0.0",
"tasks": [
    {
        "label": "ngBuildWatch",
        "type": "shell",
        "command": "ng",
        "args": [
            "build",
            "--watch"
        ],
        "isBackground": true,
        "problemMatcher": {
            "owner": "angular",
            "severity": "error",
            "fileLocation": "relative",
            "background": {
                "activeOnStart": true,
                "beginsPattern": {
                    "regexp": "^\\s*(?:message TS6032:|\\d{1,2}:\\d{1,2}:\\d{1,2} (?:AM|PM) -) File change detected\\. Starting incremental compilation\\.\\.\\./"
                },
                "endsPattern": "/^\\s*(?:message TS6042:|\\d{1,2}:\\d{1,2}:\\d{1,2} (?:AM|PM) -) Compilation complete\\. Watching for file changes\\./ "
            },
            "pattern": [
                {
                    "regexp": "ERROR in (.*)\\(",
                    "file": 1
                },
                {
                    "regexp": "\\((\\d+),(\\d+)\\):(.*)",
                    "line": 1,
                    "column": 2,
                    "message": 3
                }
            ]
        }
    }
]

}

【问题讨论】：

标签： angular visual-studio-code

【解决方案1】：

将此用于手表：

{
          "label": "ng serve",
          "type": "npm",
          "script": "start",
          "group": "build",
          "isBackground": true,
          "presentation": {
            "focus": true,
            "panel": "dedicated"
          },
          "problemMatcher": {
            "owner": "typescript",
            "source": "ts",
            "applyTo": "allDocuments",
            "fileLocation": [
              "relative",
              "${cwd}"
            ],
            "pattern":   {
              "regexp": "^\\s*(?:ERROR in )?([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
              "file": 1,
              "line": 2,
              "column": 3,
              "severity": 4,
              "code": 5,
              "message": 6
            },
            "background": {
              "activeOnStart": true,
              "beginsPattern": {
                "regexp": "Compiling\\.\\.\\.$"
              },
              "endsPattern": {
                "regexp": "Compiled successfully\\.$|Failed to compile"
              }
            }
          }
      }

【讨论】：

【解决方案2】：

这是我对 ng build 的 tasks.json 定义（对 Typescript 扩展 definition 的一些修改），我想你也可以将它修改为 ng build --watch：

{
    "label": "show all TS errors: ng build",
    "type": "npm",
    "script": "build",
    "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "pattern": {
            "regexp": "^ERROR in ([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
            "file": 1,
            "line": 2,
            "column": 3,
            "severity": 4,
            "code": 5,
            "message": 6
        },
        "fileLocation": "relative"
    }
}

对于 ng lint：

{
    "label": "show all TSLint errors: ng lint",
    "type": "npm",
    "script": "lint",
    "problemMatcher": "$tslint5"
},

package.json:

"scripts": {
    "ng": "ng",
    "build": "ng build",
    "lint": "ng lint",
},

$tslint5 problemMatcher 包含在扩展 TypeScript TSLint Plugin 和 TSLint 中。我推荐第一个，因为它是第二个扩展的修改版本，支持语言服务插件。您可以在他们的页面上找到安装说明。

【讨论】：