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

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?