22

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:

emmet


¡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,
Escribe tu comentario
+ 2
Ordenar por:
3
11857Puntos

Muchas Gracias , me ayudaste un monton y funciona 😄 me ahorraré mucho tiempo al escribir código. Gracias de nuevo.

2
2452Puntos

a mi no me funciona… es decir me sirve solo para tabs y ya, alguna manera de que emmet me autocomplete metodos de js en jsx?

2
22084Puntos

muchas gracias bro

2
1584Puntos

Uff demasiado bueno el aporte. Muchas gracias!

2
7623Puntos

Muchas gracias hace mucho que buscaba una opcion para resolver este problema.

1
7288Puntos

Muchas gracias, estaba buscando una extion de vs code que me permitiera hacer esto

1
9015Puntos

desde que empece a seguir los cursos de react me estaba preguntando si se podria 😄, gracias me a sido de gran utilidad.