如何配置 VS Code 在调试时运行 npx vite dev

Question

我是 VS Code 和 JavaScript 的新手，我正在尝试使用Vite和Svelte制作一个简单的应用程序，但我有一个似乎无法解决的问题。（我的代码目前只是创建新项目时给出的默认代码；我根本没有更改它。）

当我通过 Windows 终端运行我的应用程序时（通过导航到项目根目录并运行npx vite dev），应用程序运行良好，并且我的浏览器可以连接到localhost:3000.

但是，当我按下任一按钮时：

• Run > Start Debugging， 或者
• Run > Run Without Debugging

在 Visual Studio Code 中，它打开 Chrome，localhost:3000但我只看到localhost refused to connect. 我认为 VS Code 从未真正运行该命令npx vite dev，但我不知道如何更改它。

当我打开时.vscode/launch.json，我看到这个：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            
        }
    ]
}

我不确定应该在此处添加什么才能使其发挥作用。任何帮助将不胜感激，很抱歉，如果这是一个有点愚蠢的问题，但我无法资助任何搜索谷歌或SO的帮助。

编辑：

我几乎通过添加一个 来完成这项工作preLaunchTask，但现在当我开始调试时，chrome 不再自动打开，所以我不妨单独运行npm: dev。

现在是这样.vscode/launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "npm: dev"
        }
    ]
}

我认为这可能是因为npm: dev任务（有效地运行npx vite dev）正在阻塞，并且只有当我按下停止按钮（或双击 ctrl+c）时才完成，因此 chrome 未打开，因为 VS Code 认为预启动任务是仍在运行。

是否有任何方法可以告诉 VS Code 在继续运行的同时打开 Chrome npm: dev？

Answer 1

这是启动 Vite Dev 服务器（npx vite）然后自动打开 Chrome 并向其附加调试会话的VSCode 方式。

// launch.json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Vite DEV server",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "vite",
      ],
      "type": "node",
      "serverReadyAction": {
        "action": "debugWithChrome",
        "pattern": "Local: http://localhost:([0-9]+)",
        "uriFormat": "http://localhost:%s"
      }
    },
  ],
}

很多东西都可以在 launch.json 中自定义。我建议您阅读上面链接的文档。

“神奇”发生在“ serverReadyAction ”中，您将“ action ”设置为“ debugWithChrome ”以打开chrome。

“ pattern ”是一个正则表达式，用于捕获启动服务器的端口。

最后，使用 %s将端口添加到“ uriFormat ”中的 URL。%s 表示使用“ pattern ”中的正则表达式完成的捕获