Si haces desarrollo front-end en Visual Studio Code y quieres disponer de un previsualizador automático para poder ver tus cambios de código aplicados en vivo en un navegador, en este vídeo te explico paso a paso cómo hacerlo. Además conseguiremos que funcione también por https de manera local. Y todo ello gratis, sin pagar certificados.
¿Qué necesito para previsualizar en tiempo real una web que edito en VS Code?
En el funcionamiento por defecto de VS Code, si quieres ver cómo está quedando una página web que estás editando tienes que ir al archivo y hacer doble clic para abrirlo en un navegador.
Después, cada vez que modifiques el código, tienes que volver al navegador y refrescar la página para ver los cambios aplicados. Vamos, lo que se dice un engorro.
Así que vamos a instalar una extensión para VS Code que se llama Live Server, la cual al iniciarla nos abrirá por defecto una ventana de navegador con el archivo que estamos editando y se encargará de refrescar automáticamente el navegador cada vez que modifiquemos el código en VS Code.
Poner el previsualizador dentro de Visual Studio Code
Pero no acaba aquí, además podemos abrir el navegador dentro de VS Code gracias al comando "Simple Browser". Para ello, desde la paleta de comandos (Ctrl+Mayúsculas+P) buscamos "Simple Browser" y le indicamos la ruta y puerto donde se está ejecutando Live Server. Con esto tendremos el navegador ejecutándose en su propia pestaña, y por lo tanto, lo podremos colocar donde queramos dentro de la ventana de VS Code. Para ello, prueba a arrastrar la pestaña hacia cualquier punto de la pantalla y suelta cuando se "ilumine" la zona de la pantalla que prefieras..
Por otro lado, Live Server también te permite muchas opciones de configuración desde File > Preferences > Settings dentro del apartado de "Extensions". Entre las posibilidades más prácticas podemos definir un navegador específico a usar, desactivar notificaciones repetitivas o elegir si queremos usar un puerto específico o aleatorio.
Usar un puerto aleatorio es especialmente interesante si vamos a tener varias instancias de VS Code funcionando a la vez, ya que si todas usan el mismo puerto entrarán en conflicto.
En el vídeo te explico todos estos ajustes (y más) en detalle para que no te quedes con dudas. Por cierto, estas configuraciones no solo las podemos hacer a nivel de aplicación, sino que también las podemos aplicar a nivel de proyecto a través de la configuración de "Worksapces" o "Espacios de trabajo".
Usar certificados HTTPS de manera local
Con Live Server la conexión local es http pero quizá necesitas probar en local una aplicación para conectarte a una API que te exige https. En ese caso también te explico en el vídeo una solución para usar certificados https en local.
Ojo, son certificados solo para uso local en tareas de desarrollo. No son certificados reales para usar en internet.
Para ello nos descargaremos la utilidad MKCert, lo instalaremos a través de la línea de comando y crearemos un certificado raíz con el que certificaremos todos los dominios que necesitemos (por defecto tienen una validez de 10 años desde el momento de la creación). En el vídeo está detallado paso a paso para que lo puedas seguir sin problema.
Con todo esto hemos habilitado un servidor web local en nuestra máquina que además nos muestra los cambios en tiempo real que estamos haciendo en nuestro desarrollo front-end y que además funciona con https para poder probar bien cualquier característica en cualquier navegador aunque necesite seguridad.
De esta manera podemos tener un entorno de desarrollo para front-end con Visual Studio code en un periquete que nos va a facilitar mucho la vida a la hora de trabajar o aprender.
Fecha de publicación: