¿Escribir códigos más rápidamente? EMMET es la elección correcta

Muchas veces, literalmente, se pierde mucho tiempo, especialmente para aquellos que son principiantes, escribiendo código. Para solucionar este problema se han creado innumerables herramientas (plugins), que nos proporcionan abreviaturas dedicadas a autocompletar nuestro código HTML y CSS.

Uno de los más conocidos y más utilizados es precisamente EMMET, que no solo se encarga de tomar una cuerda y expandirla creando una estructura bien definida, sino mucho más.

Para utilizar EMMET, primero debe instalarlo dentro del editor de texto que ha decidido utilizar.

Los editores de texto más modernos y usados ​​cuentan con un administrador de paquetes interno, que nos permite instalar y activar EMMET en muy poco tiempo.

Algunos ide (editores de texto), como Visual Studio Code, tienen esta funcionalidad incorporada.

Si su editor no tiene un administrador de extensiones, le recomiendo que use otro más moderno y de rendimiento.

Después de instalarlo, es hora de concentrarse en cómo funciona.

Los atajos de teclado pueden cambiar según su editor de texto y su sistema, así que verifique la configuración para ver y cambiar los comandos.

Ahora veamos ejemplos paso a paso que te permitirán aprender a utilizar esta fantástica herramienta.

Para crear la estructura HTML completa, simplemente escriba html: 5 y presione la tecla TAB.

Con EMMET puede crear un tag div HTML especificando la clase o id que queremos agregar al elemento.

Simplemente escriba el nombre de la clase o id precedido por el punto (.) O el hash (#respectivamente y presione TAB.

Obtenemos: 

La peculiaridad de esta poderosa herramienta es que puede crear estructuras HTML completas en muy poco tiempo.

Por ejemplo, si quisiéramos crear una lista dentro del elemento de pie de página, escriba este código y presione TAB.

Resultado:

Con una facilidad impresionante, logró crear esta estructura que consta del elemento de pie de página con una lista desordenada de 5 elementos en su interior. Los dos símbolos usados> y * indican respectivamente el elemento contenido dentro y cuántas ocurrencias hay de ese elemento:

Resultado: 

Después de ver todo esto podemos centrarnos en cómo insertar contenido de forma rápida y automática.

Resultado: 

En este caso concreto nos enfocamos en el uso del símbolo $, que permitía crear un id único para cada elemento de la lista de forma automática y sobre todo respetando el orden de los mismos.

Por otro lado, en lo que respecta al uso de corchetes, estos últimos se utilizan para insertar contenido textual personalizado en su interior.

En este artículo hemos analizado cuidadosamente algunas de las principales características de EMMET.

Consulte la documentación oficial https://docs.emmet.io/ para conocer más sobre el tema.

Personalmente te aconsejo que lo uses y aprendas a sacarle el máximo partido a estos pequeños trucos que te facilitarán considerablemente tu trabajo