Share
Cuando trabaje en un sitio estático, su vida puede hacerse mucho más fácil si tiene una forma sencilla de activar una vista previa local de su diseño..
Lo que es aún mejor es si esta vista previa local tiene una función de recarga en vivo para que automáticamente veas que los cambios surten efecto mientras trabajas. Y aún mejor, si le permite ver su sitio a través de un http: // protocolo, dado que a veces las cosas no funcionan como se espera cuando se ven a través de un expediente:// protocolo.
Hay varias formas de configurar vistas previas locales, pero una de las formas más sencillas es simplemente operar directamente a través del editor de código Atom, aprovechando su excelente ecosistema de paquetes de extensión. Todo lo que necesita hacer es instalar su paquete preferido, activarlo y listo..
En este rápido consejo, te mostraré tres de los mejores paquetes de Atom para configurar rápida y fácilmente la recarga de las previsualizaciones locales. Vamos a empezar!
Nota: Si aún no tiene Atom, puede obtenerlo desde https://atom.io/
los atom-live-server el paquete es mi "ir a" personal cuando necesito una manera rápida y fácil de obtener una vista previa de un código estático. Gira una vista previa local con una http: // protocolo y se actualiza automáticamente cuando se guardan los cambios en cualquiera de los archivos que se utilizan en su proyecto.
Para instalarlo ve a Paquetes> Vista de configuración> Instalar paquetes / temas. Luego busque "atom-live-server" y presione la instalación del paquete botón cuando lo encuentres.
Para usar el paquete necesitará tener una carpeta de proyecto agregada a la Proyecto barra lateral Desde aqui ir a Paquetes> atom-live-server> Iniciar servidor y se abrirá una vista previa de su sitio en su navegador predeterminado. Si necesita detener el servidor de nuevo vaya a Paquetes> atom-live-server> Detener servidor.
Si tiene varios proyectos abiertos en la barra lateral, cualquiera que esté en la parte superior será una vista previa. Si necesita pasar de la vista previa de un proyecto a otro, primero detenga el servidor, luego arrastre y suelte el proyecto que desea ver en la parte superior de la barra lateral y reinicie el servidor..
En lugar de abrir una vista previa en su navegador predeterminado, el atom-html-preview El paquete le ofrece una vista previa en línea de cualquier página HTML dentro del editor Atom. Para instalar este paquete, siga las mismas instrucciones que utilizamos para el paquete anterior, pero busque "atom-html-preview" en su lugar.
Una vez instalado, abra el archivo HTML que desea previsualizar, luego vaya a Paquetes> Vista previa de HTML> Habilitar vista previa. Luego verá su espacio de trabajo dividido, con su código en el panel izquierdo y su vista previa en vivo en el panel derecho.
Cuando usas atom-html-preview, No es necesario guardar los archivos para que la vista previa se actualice. Más bien, a medida que escribe su vista previa se actualizará de forma continua.
los navegador atómico El paquete le permite obtener fácilmente una vista previa de su HTML en una ventana del navegador incrustada dentro de Atom, de manera similar a atom-html-preview. Desafortunadamente las vistas previas son a través de expediente:// protocolo, pero incluye recarga en vivo.
Sin embargo, la verdadera ventaja sobresaliente de este paquete es que puede usar la ventana de vista previa en línea como un navegador normal. Esto hace que sea muy conveniente buscar documentación mientras trabaja, o seguir un tutorial de codificación, por ejemplo..
Instale el paquete siguiendo los pasos descritos anteriormente y buscando navegador atómico.
Después de la instalación, abra el navegador para navegar regularmente yendo a Paquetes> Atom Browser> Toggle.
Para obtener una vista previa de un documento HTML, haga clic con el botón derecho en él en la Proyecto barra lateral y elegir Vista previa del átomo. Para habilitar la recarga en vivo mientras codificas, haz clic en el pequeño icono de rayo al lado del campo de URL del navegador.
Eso cubre tres paquetes súper prácticos de previsualización en vivo para Atom. Con estos elementos en su kit de herramientas, mantener las pestañas de sus diseños a medida que avanza debería ser mucho más suave y fácil!
¿Tiene alguna otra sugerencia sobre formas rápidas y fáciles de manejar las vistas previas locales? Si es así, continúa y compártelos con otros lectores de Tuts + en los comentarios a continuación.
Accentsconagua