Soy nuevo en VS Code y JavaScript, y estoy tratando de crear una aplicación simple usando Vite y Svelte , pero tengo un problema que parece que no puedo resolver. (Actualmente, mi código es solo el código predeterminado que se proporciona cuando se crea un nuevo proyecto; no lo he cambiado en absoluto).
Cuando ejecuto mi aplicación a través de Windows Terminal (navegando al directorio raíz del proyecto y ejecutando npx vite dev ), la aplicación funciona bien y mi navegador puede conectarse a localhost:3000 .
Sin embargo, cuando presiono cualquiera de los dos:
Run > Start Debugging , oRun > Run Without Debugging en Visual Studio Code, abre Chrome a localhost:3000 pero solo veo que localhost refused to connect . Creo que VS Code en realidad nunca ejecuta el comando npx vite dev , pero no sé cómo cambiar esto.
Cuando abro .vscode/launch.json , veo esto:
{ "version": "0.2.0", "configurations": [ { "name": "Debug with Chrome", "type": "pwa-chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", } ] }Y no estoy seguro de qué debo agregar aquí para que esto funcione. Cualquier ayuda sería apreciada, y lo siento si esta es una pregunta un poco estúpida, pero no pude financiar ninguna ayuda para buscar en Google o SO.
EDITAR:
Casi conseguí que esto funcionara al agregar una preLaunchTask , pero ahora Chrome ya no se abre automáticamente cuando empiezo a depurar, por lo que también podría ejecutar npm: dev por sí solo.
Aquí está .vscode/launch.json ahora:
{ "version": "0.2.0", "configurations": [ { "name": "Debug with Chrome", "type": "pwa-chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "preLaunchTask": "npm: dev" } ] } Creo que esto podría deberse a que la tarea npm: dev (que efectivamente ejecuta npx vite dev ) se está bloqueando y solo finaliza cuando presiono el botón de detener (o hago doble clic en ctrl + c), por lo que Chrome no se abre porque VS Code piensa la tarea previa al lanzamiento aún se está ejecutando.
Si hay alguna forma de decirle a VS Code que abra Chrome mientras continúa ejecutando npm: dev ?
En lugar de ejecutar npx vite dev (que es la tarea npm: dev ), haga que ejecute npx vite dev --open :)
Esta es la forma VSCode de iniciar el servidor Vite Dev ( npx vite ) y luego abrir automáticamente Chrome y adjuntarle una sesión de depuración.
// 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" } }, ], }Muchas cosas se pueden personalizar en launch.json. Le recomiendo que lea la documentación vinculada anteriormente.
La "magia" ocurre en " serverReadyAction ", donde establece la " acción " en " debugWithChrome " para abrir Chrome.
El " patrón " es una expresión regular utilizada para capturar el puerto en el que se ha iniciado el servidor.
Finalmente, agrega el puerto a la URL en el " uriFormat " usando %s. %s representa la captura realizada con la expresión regular en " patrón "