VS Code Live Server: cómo actualizar automáticamente su navegador con esta extensión simple

Visual Studio Code es uno de los editores de código más populares que existen. Es gratis, tiene una interfaz limpia y cuenta con innumerables extensiones que hacen que la programación sea más fácil y divertida.

Soy un desarrollador web frontend y uso VS Code mientras trabajo y en mi canal de YouTube. Mucha gente me ha preguntado cómo se actualiza el navegador automáticamente mientras estoy codificando, sin hacer clic en el botón de recarga.

Bueno, esto es posible si configura una extensión útil en VS Code llamada live-server. En esta publicación, explicaré los detalles de cómo funciona y cómo instalar y configurar un servidor en vivo en su editor de VS Code.

¿Por qué debería usar la extensión del servidor en vivo?

Normalmente, cuando realiza un cambio en su código o escribe algo nuevo, debe actualizar la página manualmente para ver los cambios.

En otras palabras, si realiza 100 cambios en su código cada día, debe actualizar el navegador 100 veces.

La extensión del servidor en vivo, sin embargo, automatiza esto por usted. Después de instalarlo, un localhost automatizado podrá ejecutarse en su navegador, que puede comenzar con un solo botón.

Una vez que realice cambios en su código o escriba algo nuevo, después de guardarlo, el navegador se actualizará automáticamente. Entonces podrá ver los cambios de forma rápida y automática.

Si lo prefiere, también puede ver el video tutorial a continuación:

Primero, instale VS Code

Puede omitir esta parte si ya instaló VS Code en su computadora. De lo contrario, puede descargarlo desde su sitio web oficial.

Una vez que haya descargado e instalado VS Code, verá la pantalla de bienvenida:

En el lado izquierdo, debería ver un par de iconos. Uno de ellos (debajo del icono sin errores) es el botón de extensiones:

Una vez que haga clic en él, aparecerá una barra de búsqueda. Simplemente escriba "servidor en vivo".

Verá muchas opciones, por lo que puede elegir la que funcione para su sistema. Yo uso Live Server de Ritwick Dey, así que continuemos con ese en este ejemplo:

Haga clic en el botón de instalación e instalará la extensión.

Crear una nueva página HTML

Para iniciar el servidor en vivo, asegúrese de tener al menos una página HTML creada. Para hacer eso, haga clic en el botón de archivo en la parte superior, luego elija el botón de archivo nuevo y escriba index.html:

Problemas de configuración

Ahora, después de crear una página HTML e instalar la extensión, debería poder ver un icono de "Go Live" justo debajo en el campo azul:

Si no lo ve, simplemente reinicie VS Code. Entonces debería estar bien.

Haga clic en el botón "Go Live" y el localhost (asignado a un número de puerto) debería iniciarse en su navegador predeterminado. Puede iniciar y detener su servidor en vivo en cualquier momento haciendo clic en el mismo botón.

Si ha llegado a este paso, ¡enhorabuena! :) Ahora puede trabajar con el servidor en vivo. De lo contrario, si aún tiene problemas, consulte esta publicación para obtener más información.

Conclusión

Espero que esta publicación te ayude a instalar y configurar la extensión del servidor en vivo en VS Code. Si desea obtener más información sobre el desarrollo web, no dude en visitar mi canal de Youtube.

¡Gracias por leer!