¿Sabes qué es Live server en Visual Studio Code? ¿para que sirve live server en visual studio code? Aunque se piense lo contrario, el mundo de un desarrollador web es mucho más que el editor de código, pues el resultado final se crea realmente en el navegador. Por ello, hay varias herramientas que le permiten previsualizar el resultado a la par que escribe su código.
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.
¿Qué es live server en Visual Studio Code?
Live server en Visual Studio Code es una herramienta que nos permite lanzar un servidor de desarrollo local para previsualizar en el navegador lo que estamos escribiendo en nuestro editor de 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.
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 en Visual Studio Code, existen muchas herramientas que nos permiten visualizar el resultado del código que estamos desarrollando al mismo tiempo que lo desarrollamos (visual studio code ver en tiempo real). 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 live server en Visual Studio Code, 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 del live server. 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.
¿Qué sigue?
Ahora que sabes qué es y cómo funciona live server en Visual Studio Code, ¡ha llegado la hora de usarlo en tus propios proyectos! Para seguir aprendiendo sobre el desarrollo de todo tipo de proyectos web y la extension visual studio code para ver pagina web en tiempo real, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, en donde aprenderás a dominar los lenguajes y herramientas del desarrollo web en pocos meses para convertirte en un experto y destacar en el sector IT. ¡Pide ya más información para cambiar tu vida!
