angular - VSCode tasks.json for ng build --watch

Question

我没有找到适用于 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
                }
            ]
        }
    }
]

Answer 1

这是我对 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 .我推荐第一个，因为它是第二个扩展的改进版本，支持语言服务插件。您可以在他们的页面上找到安装说明。