Live server en Visual Studio Code

Visualiza los cambios al desarrollar una página web en tiempo real con la extensión Live Server en Visual Studio Code.

Live Server ejecuta en un explorador el archivo que se está modificando, este explorador se actualiza con cada cambio en el archivo.

Instalación de Live Server en Code

Comencemos instalando el plugin en visual Studio Code, vamos a la sección de Extensiones y busquemos Live Server.

Live server en Visual Studio Code

Una vez instalado reiniciamos la aplicación, no hace falta configurar alguna otra cosa.

Probar la extensión

Para que la extensión funcione es necesario tener un espacio de trabajo (Workspace) si no lo tienes NO aparecerá la extensión.

Para tener un espacio de trabajo basta con agregar una carpeta que ya tengas creada con el botón Abrir carpeta.

Agregar carpeta a workspace

Abrimos o creamos un archivo HTML en nuestro espacio de trabajo para realizar una pequeña prueba.

Dentro del archivo creado coloquemos algunas líneas de código HTML y buscamos el botón Go Live en la parte inferior izquierda del editor.

Crear archivo HTML

Al hacer clic sobre el botón Go Live se abre un explorador web con el contenido del HTML que se está modificando.

Ejecutar Live Server

Podría interesarte Bundler and Minifier  

La extensión crea un servidor local (localhost) para ejecutar el sitio web, por lo tanto, puedes ejecutar código que requiera de servidor.

Haz algunos cambios en tu código, podrás ver reflejado los cambios automáticamente en el explorador.

Con esta aplicación agilizas el tiempo de desarrollo de sitios, además de ofrecerte un servidor web local sin mucho esfuerzo.

En el siguiente video podrás ver la explicación del contenido del post.

6 Comments

  1. hola, cuando pongo abrir con live server me sale que no se a encontrado la aplicacion,alguien sabe porque?

  2. que servidor ocupa VSC para visualizar nuestros archivos? tiene alguna relacion con los servidores web nginx, apache, etc.
    He visto que esos son los servidores web que más se usan.

    1. Es un servidor propio de la extensión, es para pruebas y desarrollo de sitios que no requieren de un servidor web en particular. Los servidores que mencionas son utilizados en producción.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *