Si alguna vez usaste Emmet sabrás de que estoy hablando, para los que no lo conozcan son un conjunto de snippets que nos permite escribir código mucho más rápido. Generalmente se suele usar en archivos html o css y sus preprocesadores.

Sin embargo, soporta otros tipos de archivos o lenguajes que por defecto no están habilitados. En este articulo te enseñaré a como activar emmet en archivos js/jsx desde Visual Studio Code.

Escribiendo componentes con y sin Emmet

Para los que suelen ser más visuales (como yo) les voy a mostrar que vamos a lograr con esto a través de algunos gifs que hice para ustedes 😎

Como activar Emmet para nuestros componentes de React

Para agregar al soporte de Emmet en Visual Studio Code debemos ir a las configuraciones del usuario para eso hay muchas formas de llegar ahí, la más conocida es ir al menú principal (File > Preferences > Settings)

Otra opción es acceder a las configuraciones del IDE con las combinaciones de teclas ctrl + , en Windows, desconozco el atajo para Mac pero tranquilo hay muchas formas de llegar hasta acá.

Una vez ahí busquemos "Emmet" y luego vayamos a la sección donde dice Emmet: Include Languagues y damos clic en el botón Add Item, en la descripción de este apartado tenemos un par de ejemplos para habilitar el soporte en otros tipos de archivos o lenguajes.

Para activar el soporte para javascript debemos agregar como item javascript y como value javascriptreact

Esta funcionalidad sirve tanto para archivos .js como para archivos .jsx

Si preferimos editar las configuraciones desde el formato JSON, podemos presionar las teclas ctrl + shift + p, escribimos settings y seleccionamos la opción que trae entre paréntesis JSON, se nos abrirá un JSON en el cual debemos agregar un key más que se llame emmet.includeLanguages; éste será un objeto con una key llamada javascript cuyo value debe ser javascriptreact

Una vez hecho cualquiera de estas opciones, no hace falta reiniciar nuestro editor podemos ir a nuestro archivo de javascript y podemos escribir JSX más rápido.

Además de escribir elementos de html comunes y corrientes, también podemos escribir componentes de React. Te dejo un pequeño ejemplo:

Conclusiones

Emmet tiene un montón de configuraciones y opciones que en este artículo no explicaré, pero si quería dejarles saber que pueden explorarlas una a una a través de este link.

Muchísimas gracias por llegar hasta acá, espero que hayas aprendido algo nuevo y si te gustan este tipo de material déjamelo saber en los comentarios ❤❤