En este post, te enseñaremos qué es y cómo funciona Live Server en Visual Studio Code, una herramienta fundamental para todo desarrollador web.
Existen varias herramientas que nos permiten previsualizar el resultado a medida que escribimos nuestro código en Visual Studio Code.
¿Qué es la extensión Live server?
La extensión Live Server es una herramienta de desarrollo web para el editor de código Visual Studio Code.
Live server es una herramienta que nos permite lanzar un servidor local para previsualizar en el navegador lo que estamos escribiendo en nuestro editor de código.
Esta extensión permite a los desarrolladores web crear aplicaciones web y ver los cambios en tiempo real sin necesidad de recargar manualmente la página web cada vez que se realiza una modificación en el código.
Lo interesante de esta herramienta es que la previsualización se actualiza inmediatamente al guardar el proyecto desde el editor. Esto es ideal para revisar los cambios que hacemos en nuestras páginas tanto estáticas como dinámicas.
Esto permite ver los cambios realizados en el código en tiempo real mientras se edita y actualiza una página web.
Además, Live Server también proporciona una funcionalidad de recarga automática de la página web para que los desarrolladores no tengan que actualizar la página manualmente cada vez que realicen cambios en el código.
En resumen, Live Server es una herramienta útil para el desarrollo web que ahorra tiempo y mejora la productividad del desarrollador al permitirles ver los cambios en tiempo real mientras trabajan en el código.
Para automatizar aún más el proceso, puedes editar la configuración de guardado automático en Visual Studio Code.
Además de live server existen muchas herramientas que nos permiten visualizar el resultado del código que estamos desarrollando al mismo tiempo que lo desarrollamos. Sin embargo, esta herramienta es la más utilizada cuando escribimos usando VSCode, pues se enfoca en el desarrollo frontend.
Algunas de las características de esta herramienta, además de tener una actualización rápida en el navegador, son el soporte de HTTPS de todos los navegadores, de la extensión de debugger de Chrome y el soporte de archivos para detectar cambios. Además, soporta proxies y un espacio de trabajo multiroot.
¿Cómo funciona live server en Visual Studio Code?
Lo primero que debes hacer para usar live server en Visual Studio Code es instalar los dos programas. Para ello, te recomendamos seguir el tutorial de Visual Studio Marketplace sobre Live Server.
Una vez instalados los programas, debes asegurarte de que están en funcionamiento. Ahora, para hacer funcionar la herramienta basta con ejecutar el siguiente comando en la terminal del editor de código:
npx live-server
Al darle a enter tras escribir este comando, se nos montará un servidor HTTP. Para conocer cuál es el servidor que se ha montado y cómo acceder a él, solo hay que leer la instrucción serving «/proyecto» at http://servidor. Este servidor recargará todo nuestro código en el navegador de manera inmediata en cuanto guardemos nuestro proyecto.
Como muchas de las herramientas en el mundo de la programación, podemos personalizar el funcionamiento de live server en Visual Studio Code. Para conocer las configuraciones que podemos darle a esta herramienta, te recomendamos explorar el github vscode-live-server/docs/settings.md.
¿Cómo instalar Live Server en Visual Studio?
Lo que debes tener claro es que Live Server es una extensión que está disponible exclusivamente para Visual Studio Code y no para Visual Studio.
Si está utilizando Visual Studio y desea tener una funcionalidad similar a la de Live Server, puede usar el servidor web integrado de Visual Studio para ver sus cambios en tiempo real mientras trabaja en su proyecto web.
Para hacerlo, siga los siguientes pasos:
- Abra su proyecto web en Visual Studio.
- Abra el archivo HTML que desea visualizar en el navegador.
- Haga clic derecho en el archivo HTML y seleccione “Establecer como página de inicio” en el menú contextual.
- Seleccione el menú “Depurar” y luego “Iniciar sin depuración” (o use la combinación de teclas “Ctrl + F5”).
- Esto iniciará el servidor web integrado de Visual Studio y abrirá su sitio web o aplicación web en el navegador predeterminado de su sistema.
A medida que realice cambios en su código, simplemente guarde el archivo y el servidor web integrado de Visual Studio actualizará automáticamente la página en el navegador para mostrar los cambios en tiempo real.
Aunque Live Server no está disponible para Visual Studio allí podemos utilizar el servidor web integrado para obtener una funcionalidad similar.
¿Cómo abrir el Live server en Visual Studio Code?
Para abrir Live Server en Visual Studio Code, siga los siguientes pasos:
- Abra su proyecto de Visual Studio Code.
- Instale la extensión Live Server si aún no lo ha hecho. Puede hacerlo yendo a la pestaña Extensiones en la barra lateral de Visual Studio Code y buscando “Live Server”.
- Después de instalar la extensión, abra el archivo HTML que desea visualizar en el navegador.
- Haga clic derecho en el archivo HTML en la barra lateral de Visual Studio Code y seleccione “Abrir con Live Server” en el menú contextual. Si no ve la opción “Abrir con Live Server”, haga clic en el archivo HTML y presione el botón “Go Live” que aparece en la esquina inferior derecha de Visual Studio Code. Alternativamente, puede usar el atajo de teclado “Ctrl+Shift+L” para abrir Live Server.
- El navegador predeterminado de su sistema se abrirá automáticamente y cargará su sitio web o aplicación web en la dirección “http://localhost:5500” o una dirección similar.
- A medida que realice cambios en su código, Live Server actualizará automáticamente la página en el navegador para mostrar los cambios en tiempo real.
En resumen, estos son los pasos básicos para abrir Live Server. Una vez que haya iniciado Live Server, puede comenzar a editar su código y ver los cambios en tiempo real en su navegador web.
Problemas con Live Server en Visual Studio Code
Si al utilizar Live server extension en VStudio Code nos encontramos con el mensaje “La conexión fue restablecida” podemos encontrar la solución en el siguiente enlace:
https://trucosyayudas.com/live-server-extension-en-vstudio-code-la-conexion-fue-restablecida/
Otros articulos interesantes:
