Extensiones Live Server y Live Sass Compiler en Visual Studio Code

Configuración de las extensiones Live Server y Live Sass Compiler en Visual Studio Code.

Live Server

Live Server nos permite ver los cambios realizados en nuestras páginas sin necesidad de ser actualizadas desde el navegador.

Nos lanzará un servidor local o el que nosotros le indiquemos en el fichero de configuración.

Live Sass Compiler

Live Sass Compiler es una extensión esencial en Visual Studio Code que se instala conjuntamente con la extensión Live Server.

Si eres programador y usas Sass para mejorar y ampliar la sintaxis de CSS la amarás por encima de todas las cosas.

Sus ventajas son las siguientes:

  • Compilación de código SCSS a CSS.
  • Personalización de la exportación, su formato, extensión y carpetas de destino.
  • Personalizar como sera exportado el fichero CSS (expanded, compact, compressed, nested)
  • Control a través de la barra de estado si queremos que el código sea compilado automáticamente.
  • Exclusión de ficheros o carpetas donde no queremos que el código sea compilado.

Instalación

Su instalación es realmente sencilla, pulsaremos CTRL+P y escribiremos ext install live serverext install live-sass

Configuraciones

Empezaremos con la configuración de Live Server.

En nuestro fichero de configuración .vscode/settings.json incluiremos las siguientes líneas.

Donde proxyUri es la url de vuestro servidor local, ya sea un servidor WAMP, LAMP ó LEMP.

Por defecto sino tocamos esta configuración se ejecutará en la dirección http://127.0.0.1:5503/

El siguiente paso es configurar nuestro compilador automático de Sass.

Por lo que en nuestro fichero de configuración .vscode/settings.json incluiremos las siguientes líneas.

  • liveSassCompile.settings.includeItems, utilizado para cuando usamos solo unos pocos ficheros SCSS en nuestros proyectos.
  • liveSassCompile.settings.autoprefix, son los prefijos de propiedades CSS específicas de cada navegador.
  • liveSassCompile.settings.excludeList, nos permite excluir carpetas donde no queremos que el código SCSS sea compilado.
  • liveSassCompile.settings.generateMap, genera mapas para poder localizar rápidamente selectores y propiedades en los ficheros SCSS.
  • liveSassCompile.settings.formats, nos permite exportar los ficheros CSS en diferentes formatos (expanded, compact, compressed, nested), directorios y su extensión.
  • liveServer.settings.port es el puerto donde el servidor escuchará las peticiones.

Activación

Podremos activar Live Server y Live Sass Compiler desde la propia barra de estado en Visual Studio o pulsando F1 y tecleando

Otras alternativas

Si no eres de instalar Plugins quizá te interese crear una tarea en VSCode que realice el compilado de tus códigos SCSS. Ver más información aquí.

Etiquetado

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.