How to configure VS Code to run npx vite dev when debugging

Question

I am new to VS Code and JavaScript, and I am trying to make a simple app using Vite and Svelte, but I have a problem which I can't seem to resolve. (My code is currently just the default code given when a new project is created; I haven't changed it at all.)

When I run my app through Windows Terminal (by navigating to the project root directory and running npx vite dev), the app runs fine and my browser can connect to localhost:3000.

However, when I press on either:

• Run > Start Debugging, or
• Run > Run Without Debugging

in Visual Studio Code, it opens up Chrome to localhost:3000 but I just see localhost refused to connect. I think VS Code is never actually running the command npx vite dev, but I don't know how to change this.

When I open up .vscode/launch.json, I see this:

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

And I am not sure what I should add here to get this to work. Any help would be appreciated, and sorry if this is a bit of a stupid question, but I couldn't fund any help searching Google or SO.

EDIT:

I have almost got this working by adding a preLaunchTask, but now chrome no longer automatically opens when I start debugging, so I might as well just run npm: dev on its own.

Here is .vscode/launch.json now:

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

I think this might be because the npm: dev task (which effectively runs npx vite dev) is blocking, and only finishes when I press the stop button (or double-click ctrl+c), so chrome is not opened because VS Code thinks the pre-launch task is still running.

If there any way I can tell VS Code to open Chrome while continuing to run npm: dev?

Answer 1

Instead of having it run npm dev, have it run npm vite dev --open instead :)