开始调试 RoR 会话时如何自动运行 webpack-dev-server？答案

【问题标题】：How to autorun webpack-dev-server when starting debugging RoR session?开始调试 RoR 会话时如何自动运行 webpack-dev-server？
【发布时间】：2021-04-02 23:50:13
【问题描述】：

从 Rails 5.1 开始，可以在 webpack-dev-server 旁边运行 rails server。我在launch.json 中配置了调试器来运行rails 服务器。当我通过 vscode 启动 rails 服务器时，我希望它在后台自动运行 ./bin/webpack-dev-server 以将 javascript 更改作为另一个进程自动编译，但我不知道如何实现这一点。

我在tasks.json 中创建了任务来运行webpacker，但我不知道如何将它与launch.json 结合起来。

这是我的launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "preLaunchTask": "webpack-dev-server",
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": [
        "server"
      ]
    }
  ]
}

这里是tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "webpack-dev-server",
      "type": "shell",
      "command": "${workspaceRoot}/webpack-dev-server",
      "isBackground": true,
    }
  ]
}

当我分别运行调试和任务时，它按预期工作，但在开始调试时自动运行不工作。

我尝试过的事情：

使用“preLaunchTask”运行 webpack-dev-server - 问题是“preLaunchTask”等到 webpack-dev-server 停止运行，然后运行调试。我需要它们彼此相邻同时运行。
将 webpack-dev-server 指定为另一个启动配置，并通过 compond in 合并这两个启动 launch.json - 这不起作用，因为 vscode 需要指定启动类型而 shell 不是支持
以 & 结尾运行任务以抑制等待进程完成 - 不工作

如果有人解决了这个问题或者知道如何通过一键同时运行两个进程，分享这些知识会很有帮助。

谢谢。

【问题讨论】：

标签： ruby-on-rails visual-studio-code

【解决方案1】：

感谢https://stackoverflow.com/a/54017304/3442759，我找到了解决方案。

在tasks.json 中需要指定problemMatcher，即使它没有被使用。如果没有指定problemMatcher，即使isBackground 设置为true，任务也不会在后台运行。

我已经创建了带有设置步骤的要点。 https://gist.github.com/tomkra/b1d67a7ae96af34cba78935f15b755b6

所以最终的配置是：

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": [
        "server"
      ],
      "preLaunchTask": "webpack-dev-server"
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "webpack-dev-server",
      "type": "shell",
      "isBackground": true,
      "command": "./bin/webpack-dev-server",
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".",
          }
        }
      ]
    }
  ]
}

【讨论】：