Cómo previsualizar archivos HTML sin problemas en Visual Studio Code

Al trabajar con HTML en VS Code, ver cómo tu página web cambia al instante sin tener que actualizar constantemente es una auténtica revolución. Aquí tienes la información sobre cómo configurar una vista previa en vivo con la extensión Live Server. Es muy útil, sobre todo para ajustar cosas sobre la marcha. Un aviso: a veces no funciona a la perfección a la primera, pero reiniciar o cambiar algunos ajustes ayuda.

Paso 1: Abra su archivo HTML

Abre VS Code y abre ese index.htmlarchivo HTML o cualquier otro que estés manipulando. Puede ser HTML simple o tener CSS o JS vinculado. Lo importante es que esté listo para usar en el editor, ya que todo depende de lo que hagas a continuación.

Paso 2: Instalar la extensión Live Server

Aquí es donde empieza la magia. Para que la vista previa en vivo funcione, instala la extensión:

Haga clic en el ícono Extensiones en la barra lateral izquierda o presione Ctrl+ Shift+ Xpara abrir el mercado.
Escriba Live Server en el cuadro de búsqueda.
Busca el servidor Live de Ritwick Dey. Debe ser el más popular, con muchas instalaciones y un icono reconocible.
Pulsa «Instalar». Listo, extensión añadida. En algunas configuraciones, podría fallar la primera vez y tendrás que reiniciar VS Code o deshabilitar/habilitar la extensión de nuevo. No hay problema, simplemente instálala.

Paso 3: Iniciar el servidor en vivo

Una vez instalado, iniciar la vista previa es sencillo:

Asegúrese de que su archivo HTML esté activo en VS Code.
Abra la paleta de comandos presionando Ctrl+ Shift+ P.
Escriba Live Server: Abra Live Server y selecciónelo. Si no lo ve inmediatamente, asegúrese de haber guardado el archivo recientemente o reinicie VS Code.
Esto abrirá tu página web en tu navegador predeterminado, sirviéndola desde una dirección local, generalmente algo como [nombre del http://127.0.0.1:5500/index.htmlservidor].Verás un pequeño icono de Live Server en la esquina inferior derecha que confirma que está funcionando.

Paso 4: Editar y ver los cambios en vivo

Esta es la parte divertida. A medida que ajustes tu HTML (o CSS/JS vinculado), simplemente pulsa Ctrl«+» Spara guardar. El navegador debería actualizarse automáticamente, mostrando tus últimas modificaciones. A veces, funciona un poco inestable si tienes un proyecto grande o muchos errores, pero normalmente funciona de maravilla. Si no se actualiza, prueba a pulsar «actualizar» manualmente o reinicia el Live Server desde la paleta de comandos; claro, Windows a veces lo complica más de lo necesario.

Consejos adicionales y problemas comunes

Para mantener las cosas fluidas:

Verifique la configuración de su firewall: si algún bloqueo de red extraño impide que el servidor se comunique, la página no se actualizará.
Si la página no se actualiza, detenga el servidor y vuelva a iniciarlo. A veces, F5 ayuda, o puede hacer clic derecho en el botón «En vivo» si está disponible.
Revisa tu código para detectar etiquetas rotas o errores de sintaxis. Esto puede afectar la representación y hacer que parezca que Live Server no funciona.
Si trabaja con un proyecto complejo, considere exportar su configuración o ajustar el puerto en settings.json. Puede encontrarlo en Archivo > Preferencias > Configuración y buscar liveServer.settings.port.

Resumen

Instalar la extensión Live Server
Iniciarlo a través de la paleta de comandos — Live Server: Abrir con Live Server
Edite y guarde, observe cómo las actualizaciones en vivo se realizan automáticamente

Ojalá esto le ahorre algunas horas a alguien. No hay nada como poder ver tu trabajo sobre la marcha sin tener que estar presionando constantemente Ctrl+R. Solo ten en cuenta que a veces es un poco caprichoso, pero un reinicio rápido soluciona la mayoría de los problemas.¡Mucha suerte y disfruta programando!