如何配置VS代码在调试时运行NPX Vite Dev

Question

我是VS代码和JavaScript的新手，并且我正在尝试使用 svelte ，但是我有一个我似乎无法解决的问题。 （我的代码当前只是创建新项目时给出的默认代码；我根本没有更改它。）

当我通过Windows终端运行应用程序时（通过导航到项目root Directory并运行npx vite dev），该应用程序运行正常，我的浏览器可以连接到localhost：3000。

但是，当我按两个：

• run＆gt;开始调试，或
• 运行＆gt; 在Visual Studio代码中不调试的情况下运行

，它将Chrome打开到localhost：3000，但我只看到localhost拒绝连接。我认为VS代码从未真正运行命令npx vite vite dev，但我不知道该如何更改。

当我打开.vscode/lunaine.json时，我看到了这一点：

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

我不确定我应该在这里添加什么以使其工作。任何帮助都将不胜感激，如果这是一个愚蠢的问题，则很抱歉，但是我无法为搜索Google或Soe的任何帮助提供资金。

编辑：

我几乎通过添加prelaunchtask来工作，但是现在Chrome在我开始调试时不再自动打开，因此我不妨运行npm ：dev自己。

这是.vscode/lunaine.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 task（有效运行npx vite vite vite vite dev）正在阻止，只有在我按下停止按钮（或双击CTRL+C）时才能完成，因此未打开Chrome，因为VS代码认为预定任务仍在运行。

如果有任何办法，我可以告诉VS代码在继续运行npm：dev时打开Chrome？

Answer 1

这是启动Vite Dev Server（ npx vite ），然后自动打开Chrome并将调试会话附加到它。

// 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"
      }
    },
  ],
}

可以在启动中自定义许多事情。我建议您阅读上面链接的文档。

“魔术”在“ serverreadyAction ”中发生了，其中将“ Action ”设置为“ debugwithchrome ”以打开Chrome。

“ 模式”是用于捕获服务器已启动的端口的正则表达式。

最后，通过使用％s，您可以将端口添加到“ uriformat ”中的URL中。 ％s表示用“ 模式”中的正则捕获的捕获

Answer 2

与其让它运行npx vite dev（这是npm：dev任务），让它运行npx vite vite dev -open :)

Answer 3

接受的答案对我不起作用（也许是因为我在vscode中进行远程开发）。

这是对我有用的方法：

1. 编辑'lunaine.json'包含以下内容：

     {
     //使用Intellisense了解可能的属性。
     //悬停以查看现有属性的描述。
     //有关更多信息，请访问：https：//go.microsoft.com/fwlink/?linkid=830387
     “版本”：“ 0.2.0”，
     “配置”：[
       {
         “ type”：“ chrome”，
         “请求”：“启动”，
         “名称”：“启动Chrome”，
         “ url”：“ http：// localhost：5173”，，
         “ webroot”：“ $ {workspacefolder}”，
         “ sourcemaps”：是的，
         “ esolvesourcemaploclocations”：[
             “ $ {workspacefolder}/**”，
             “！**/node_modules/**”
         ]，，
       }，，
     这是给出的
   }
    

2. 编辑'package.json'的“脚本”元素，以便“ dev”项目包含以下内容：

    “ dev”：“ vite -horst -open”，
    

3. 由于我在运行岩石linux的远程系统上开发，因此我必须从shell中进行以下（一次）：

     sudo firewall-cmd -permanent -add-port = 5173/tcp
    

   然后重新启动远程系统（确保端口实际上打开）

     sudo关闭-r现在
    

）嵌入式终端窗口启动服务器：

yarn dev

这启动了开发服务器，该服务器会在端口5173上听，并打开Chrome Development浏览器。

您可以关闭开发浏览器，然后通过单击“运行”视图顶部的“启动Chrome”按钮重新打开它。

这为我解决了问题。我将所有内容都使用远程开发，因此我需要一个本地的Chrome开发浏览器（通过其特殊VSCODE端口）连接到远程服务器。

祝你好运！

Answer 4

仅供参考，Vite的较新版本为输出增添了颜色，从而破坏了正则表达式匹配。

我不得不添加：

"env": {
   "NO_COLOR": "1"
},

我的启动配置。