Mi pequeño servidor de desarrollo web con VSCode

He de decir que en un principio Sublime Text captó toda mi atención al momento de escribir HTML y CSS. Fue como una hipnosis: su simplicidad, velocidad, plugins, todo llevaba a que no quisiera usar otro editor de código.

Pero en esto de inspeccionar código de otras webs o de dilucidar problemas en las webs que hace uno, me encontraba con la tediosa tarea de modificar el código, guardar archivo, pasar al navegador, actualizar navegador y recién ahí ver si algo de lo que había hecho tuvo efecto.

Hasta que un día conocí Brackets, ese editor de código desarrollado por Adobe que tenía algo que Sublime no me daba por defecto: un servidor web que mostrara al instante los cambios que hacía en el editor. No solo eso, sino que resaltaba los elementos que iba tocando vía código, mostrándome claramente qué elemento era tal o cual.

Pasé un tiempo usando Brackets por esta simple diferencia, hasta que -otra vez- un nuevo editor de código pasó delante de mis ojos. Hablo de Visual Studio Code, esa versión simplificada y menos pesada del Visual Studio, estos productos, por si no lo saben, son propiedad de Microsoft (la que formó parte de la temprana implementación de CSS Grid, que sacó un navegador decente luego del fiasco de IE y que últimamente viene sorprendiendo con varios movimientos más).

En VSCode encontré un editor rápido, versátil, de estética simple, Emmet incorporado, con una terminal integrada donde puedo trastear con Gulp, Git, y más cositas. Pero donde definitivamente clavó mi mirada fue en dos extensiones que encontré que me cambiaron por completo a la hora de picar código y testear webs.

Estas dos extensiones se llaman Live Server y Live Sass Compiler, de Ritwick Dey.

Live Server es un servidor web que se monta en el puerto 5500 (por defecto, se puede cambiar) y donde cualquier cambio que hagamos en el editor, se verá reflejado instantáneamente en el navegador (ya sea del ordenador, del móvil, de donde quieras! siempre y cuando apuntes a la IP donde está el servidor y el puerto en cuestión). Hasta ahí todo normal, ya que muchas otras extensiones en distintos editores ofrecen esta funcionalidad, pero lo mejor de esta extensión es que la puedo combinar con la otra que comenté arriba.

Live Sass Compiler, como su nombre indica, es un compilador de Sass que transforma tu código a CSS. Con lo cual, me limito a escribir en Sass y dejo que todo el trabajo lo haga la extensión, que además cuenta con muchas opciones. Por ejemplo: si queremos que el CSS final esté expandido o minificado, si queremos que se guarde en una carpeta especial, también podemos decirle que le agregue los prefix para los distintos navegadores e incluso especificarle hasta cuántas versiones anteriores tiene que hacerlo.

Es decir, con VSCode y estas dos extensiones tengo mi pequeño servidor web que además lo puedo bajar Portable y me lo puedo llevar a cualquier lado sin necesidad de tener que instalar nada.

Con un simple clic en estos dos enlaces, le puedo indicar que comiene a observar y trabajar mi archivo .scss y que ponga en funcionamiento el servidor.

Por esto, y mucho más, es que VSCode es mi pequeño servidor de desarrollo web y parece ser que lo será por un tiempo!

Gracias por leer,
Ale.
alejandronarvaja.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store