在停止调试时终止 vs 代码中的 ng serve 任务答案

【问题标题】：Terminate ng serve task in vs code on stop debugging在停止调试时终止 vs 代码中的 ng serve 任务
【发布时间】：2018-12-11 21:26:22
【问题描述】：

我有一个 Angular 项目，目前正在通过 chrome 的调试器在 vs 代码中进行调试。我的launch.json 使用"preLaunchTask": "serve"，其中在tasks.json 中将服务定义为"ng serve"，以便我首先执行“ng serve”，并且在调试器打开浏览器以点击http://localhost:4200 之前，服务器已准备好。

一切正常。但是，当我停止调试时，"ng serve" 任务仍然按预期运行，并且每次都必须手动终止该任务。

我尝试在launch.json 中使用"postDebugTask"，但运气不佳，因为 vs 代码会抱怨启动一个新任务（postDebug），直到另一个正在运行的任务（preLaunch）没有终止。有人可以帮忙吗？

【问题讨论】：

标签： angular visual-studio-code vscode-debugger

【解决方案1】：

在研究了一段时间后，似乎没有任何干净的方法可以杀死 VS Code 中作为preBuildTask 的一部分启动的任务。这是一个构建任务，调试任务本身似乎与此分开。由于调试 PID 本身是针对 Chrome 的，因此两者之间存在奇怪的区别。

所以，让我们暴力破解吧。

首先，我们需要让我们的初始ng serve 作为子进程运行，这样另一个任务就不会抱怨第一个任务占用终端。这项任务对我有用：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "command": "ng serve",
            "isBackground": true,
            "type": "shell",
            "presentation": {
                "reveal": "always"
            },
            "problemMatcher": {
                "fileLocation": "relative",
                "background": {
                }
            }
        }
    ]
}

注意isBackground 属性。这将在它们自己的 shell 中生成任何未来的任务。 presentation 是 reveal: always，所以我们可以看到 CLI 输出。我们可以通过problemMatcher 中的调试过程来了解和捕获 CLI 问题，但我们暂时忘记它。

现在，让我们创建一个kill 任务。让我们通过我们的操作系统来完成，而不是通过 VS Code 来查找初始生成的任务。现在这高度依赖于您使用的哪个操作系统和哪个shell（可以通过shell 属性为每个任务配置shell）。

我们需要找到ng serve shell 的 PID 并将其发送到天空中的大型计算机。我们可以查找占用 localhost 端口的 PID，我假设默认情况下是 4200。

CMD 命令示例：

for /F "tokens=1,2,3,4,5" %A in ('"netstat -a -n -o | find 4200""') DO ('"Taskill /PID %E /F"')

bash/terminal 命令示例（像往常一样简单）：

[sudo] lsof -ti:4200 | xargs kill

然后只需使用命令创建一个kill 任务并将其添加到postDebugTask：

    {
        "label": "kill",
        "command": "lsof -ti:4200 | xargs kill",
        "type": "shell",
    }

如果您遇到访问权限，您可以通过以管理员身份运行 VS Code 或提供您已经拥有管理员权限的 .exe 的路径来修复它。同样，取决于您的 shell 和操作系统。

【讨论】：

【解决方案2】：

正如this S.O. answer 中所指出的，从任务运行工作台命令的功能最近被添加到 VSCode。似乎解决此问题的最佳方法是运行以下任务"postDebugTask": "end serve"

{
   "label": "end serve",
   "type": "process",
   "command":[
      "${command:workbench.action.tasks.terminate}"
   ],
},

这将提示您从下拉列表中选择要终止的任务。不幸的是，我无法找到一种方法来告诉 VSCode 你想通过参数终止什么任务。

正如链接答案中指出的那样，如果您只有一项任务可供选择，您可以使用自动选择该任务

{
   "label": "end serve",
   "type": "process",
   "command":[
      "${command:workbench.action.tasks.terminate}",
      "${command:workbench.action.acceptSelectedQuickOpenItem}",
   ],
},

从而消除了下拉菜单。

【讨论】：