Configurar entorno de desarrollo frontend en Visual Studio Code

Introducción

Cuando desarrollo web frontend suelo tener tres problemas:

  • CSS es muy tedioso.
  • JavaScript no ofrece gestión de módulos.
  • Odio tener que actualizar la página manualmente con F5.

De ahí que mis herramientas básicas sean:

  • SASS: Un lenguaje que transforma CSS a algo dinámico, permitiendo utilizar variables, mixins, herencia en bloques y más.
  • TypeScript: Un lenguaje creado por Microsoft que agrega varias funcionalidades a JavaScript transformándolo en un lenguaje mucho más potente.
  • LiveServer: Una herramienta que permite ver en tiempo real como está quedando el desarrollo, además de actualizar automáticamente la página al detectar una modificación en el código.

Hace unos años configurar todo esto llevaba un buen rato, pero con Visual Studio Code se puede preparar lo necesario en menos de 1 minuto.

Compilador SASS y LiveServer

Para conseguir estas funcionalidades sólo hay que instalar la extensión Live Sass Compiler que podéis instalar desde el Marketplace aquí mismo.

Node.js y compilador TypeScript

Para compilar los ficheros .ts de TypeScript hace falta Node.js, así que he instalado la versión LTS más actual de la web, la 10.16.0 a día de hoy. Es importante dejar marcada la opción de añadir Node al PATH durante la instalación.

Luego abrimos una terminal e instalamos TypeScript globalmente con npm:

npm install -g typescript

A continuación instalamos la extensión TypeScript Auto Compiler, que también podéis instalar desde el Marketplace aquí.

Reiniciamos Visual Studio Code y abrimos una carpeta para crear un proyecto web frontend ahí.

Creamos por ejemplo un index.html de prueba y activamos la opción Go Live de la barra inferior para poner en marcha el LiveServer:

Ahora para procesar los ficheros .scss con código SASS activamos la otra opción que pone Watch Sass:

Veremos como al guardar los .scss se generan los .css y se actualiza automáticamente la previsualización del Live Server:

Por si fuera poco, en este punto los ficheros .ts con código TypeScript también se compilan automáticamente y generan el .js resultante sin configurar nada. El propio editor está pendiente de compilarlos:

Y ya está, con esto tenemos un entorno bastante simple pero potente para desarrollar web frontend usando preprocesadores:

 

Herramientas
09/06/2019