Usa los snippets de emmet para escribir más rápido en react.

En este pequeño tutorial te enseñare como ahorrarte muchísimas lineas de código si usas snippets de emmet.

Por si te preguntaste ¿Qué es emmet?

Emmet son una serie de snippets que te sirven para construir estructuras de HTML de una manera muy rápida. Si quieres saber más de él, te dejo un enlace con más info aquí y su cheat sheet.

Snippet es un termino que se usa para describir una abreviatura de un pequeño fragmento de código. Estos snippets son activados al momento de escribirlos y usar la tecla tab para mostrarlos.

Puedes ver un ejemplo en el siguiente GIF:

 
¡Es asombroso lo rápido que se puede escribir código con esto! 😱

Si quieres usar emmet en tus archivos de react sigue estos pasos.

1. Pulsa ctrl + shift + P en visual studio code. Te aparecerá una barra de comandos.
2. En la barra de commandos busca la opción de Preferences: Open Settings (JSON). Se abrirá el archivo de configuración de visual studio code que se mostrará en formato JSON.
3. Coloca dentro del archivo JSON las siguientes lineas para poder activar emmet.

//Esta linea activa la opción de usar emmet en React
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "jsx-sublime-babel-tags": "javascriptreact"
  },

//Esta linea es muy útil, nos permite usar emmet con componentes que no sean HTML.
//Por ejemplo un componente de react que escribamos llamado Layout, al darle tab
//nos lo mostrará como <Layout></Layout>
  "emmet.triggerExpansionOnTab": true,