Visual Studio Code: Extensiones y Shortcuts Esenciales

Katherine Durán Sanzana
2 min readJul 5, 2018

--

Por mucho tiempo fui fans de Sublime, sin embargo Microsoft sacó un editor de texto que a mi gusto es más amigable para los que no somos programadores, pues para mi ha sido mucho más fácil incorporando algunas extensiones.

1.-Visual studio code plugin for Bootstrap 4 & Font awesome

Esto salva minutos valiosos construyendo la columna vertebral de nuestro proyecto, pues solo basta crear el nuevo archivo “Index.html” de tu sitio, luego ingresar b4-$ e inmediatamente se escribirán tanto el Head y Body del sitio, como la inserción de Bootstrap 4 por CDN. Además del metatag responsivo para distintos dispositivos.

La única desventaja es que no inserta la última versión de Bootstrap 4, y/o Font Awesome, por lo tanto pueden haber algunos elementos o clases que no funcionen correctamente. De hecho con la última actualización de este último y el cambio de clase de los iconos, que pasaron a invocarse desde la clase .fa a fas, es probable que no se muestren.

2.- Visual Studio Code HTML Snippets

Esto salva minutos valiosos para cuando no recuerdas algún tag o si aún se encuentra disponible. Está extensión es básicamente como el autocompletar y corrector de cualquier editor de texto convencional, pero enfocado en HTML5.

3.- IntelliSense for CSS class names in HTML

Esto cumple básicamente la misma labor que la anterior, salvo que es específico para CSS.

4.- Formatear e Indentar el Código

Esto es clave para el orden, y la detección de errores en nuestro código. Aún así y aparentemente existen confusiones respecto al comando correcto no obstante y como vemos en la imágen la combinación correcta es Command + Shift + F para Mac y Ctrl +Shift+ P para Windows.

5.- Formatear e Indentar CSS Prettier-VSCode

Tiene básicamente la misma función que el comando anterior formateando incluso Javascript.

--

--

Katherine Durán Sanzana
Katherine Durán Sanzana

Written by Katherine Durán Sanzana

Diseñadora UX. Especializándome en HCI. Apasionada por el diseño, las plantas, la cocina la decoración, los animales y todo lo que alimente el espíritu

Responses (1)