Hoy por hoy Visual Studio Code se ha vuelto una de las herramientas más utilizadas por los desarrolladores web, móvil y backend al tener una gran colección de extensiones, temas y sobre todo liviano para trabajar con diferentes lenguajes de programación.

Sin embargo, por default, algunas cosas hay que activarlas o configurarlas de acuerdo a nuestras necesidades. Este artículo justamente sirve para detallar cómo configurar el soporte de Emmet para programar aplicaciones Web / Móvil utilizando React.

¿Qué es Emmet?

Es un conjunto de herramientas que permite generar estructuras de código HTML, JS y Css con tan solo pequeñas abreviaciones de código.

A continuación los pasos a seguir para configurar esta herramienta.

1. Abrir configuración de Visual Studio Code (selecciona una opción de acuerdo a tu Sistema operativo).

Si utilizas Mac : Command + ,
Si utilizas Windows / GNU Linux : Ctrl + ,

Deberá abrir una ventana como la que te muestro a continuación:

En el buscador, colocaremos la palabra Emmet y presionamos enter. Aparecerá una ventana como la que te muestro a continuación. En ella deberás dar click en el enlace Edit in settings.json

De acuerdo a mi configuración, aparece el siguiente código de configuración. Podría variar si previamente haz hecho cambios en tu configuración.

Añadiremos el siguiente código:

{
   "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }
}

Deberá quedar de la siguiente manera:

Reiniciamos Visual Studio Code.

Al abrir tu proyecto, podrás ver que ya también es posible auto completar utilizando las bondades y magia de Emmet.

A desarrollar exitosas apps con React ;).