Introducción
No sé cómo definir a Emmet, pero es algo como un plugin para los editores de texto más populares. Permite expandir “abreviaciones” desde las más simples hasta las más complejas.
Con Emmet, podemos agilizar el proceso de desarrollo, pues nos ahorra escribir mucho código. Este plugin es muy querido por la comunidad porque tiene soporte para la mayoría de editores.
Hoy mostraré algunas abreviaciones que utilizo en mi día a día.
Abreviaciones
Para expandir las abreviaciones, creo que se utiliza la tecla del tabulador.
Estructura de un documento HTML 5
html:5
Etiqueta meta viewport para sitios responsivos
meta:vp
Div con el id “contenedor”
#contenedor
Div con la clase “clase-1” y “borde-rojo”
.clase-1.borde-rojo
Div con el id “principal”, que tenga las clases “xs-12” y dentro de él tenga otros dos divs con las clases “borde-azul”
#principal.xs-12>.borde-azul*2
Botón con clases
btn.clase-1.clase-2
Botón con clases “btn” y “btn-success” cuyo tipo sea “button”
btn.btn.btn-success[type=“button”]
Botón tipo “submit”, que en su interior diga “Guardar”
btn[type=“submit”]{Guardar}
Lista con 5 elementos
ul>li*5
Lista en donde el contenido de cada elemento tenga el texto con el índice y la clase “list-element”
ul>li.list-element{Soy el elemento $}*5
Formulario con nombre, action y método para solicitar un correo electrónico. El input debe tener la clase “form-control” y un placeholder
form[name=“miFormulario”][action=“archivo.php”][method=“POST”]>label[for=“correo”]{Correo electrónico:}+input[type=“email”][placeholder=“Escribe tu correo…”]#correo.form-control
Tabla completa con clases
Mi favorito, genera la estructura de una tabla.
table.table.table-bordered>(thead>tr>th*3)+(tbody>tr>td*3)
Escapar índice
Si deseamos que aparezca el $ en lugar del número de elemento, debemos escaparlo con \. Pongamos el ejemplo de una lista con 3 elementos:
Conclusión
Todos los gifs que ves lo he grabado usando ScreenToGif.
Espero no haberme pasado con los ejemplos, pero si lo hice fue para demostrar todo lo que podemos hacer. Igualmente podemos ir generando elemento por elemento; es decir, en el caso del formulario, primero hacemos el form, una vez dentro expandimos el label e input, etcétera.
De esta forma no se complican tanto las cosas y todo es legible. Espero que este tutorial haya servido para algo. Te invito a probar con tus propias abreviaciones y a leer la documentación oficial.