Emmet.io – el toolkit esencial para los desarrolladores Web
0.Índice de Contenidos
1. Introducción
Si programas habitualmente en HTML, XML o CSS (o esporádicamente) entonces seguramente te interesa Emmet.io.
Emmet es un plugin que se puede incorporar a muchos de los editores de texto más populares, como Sublime Text, Brackets, Eclipse, Netbeans. Permite que la parte mecánica de la programación, que es escribir los tags o palabras reservadas suponga mucho menos esfuerzo y tiempo.
Se basa en poder escribir pequeñas abreviaciones que generan grandes estructuras de código de forma automática.
Por poner un ejemplo práctico del potencial de este plugin, vamos a crear una tabla 4X4 en HTML con Emmet:
Escribiendo table>tr*4>td*4 y pulsando el tabulador (Ctrl+E en Windows), generamos
<table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
Como se puede ver, una vez que la probéis, os preguntareis cómo podíais haber estado todo este tiempo sin Emmet, además tiene una curva de aprendizaje bastante rápida.
2. Instalación
Nosotros vamos a instalarlo en SublimeText3, que es el editor que uso actualmente para trabajar con frontend.
Si quereis instalarlo en otro editor que uséis a diario podéis buscar la forma en internet, hay bastante información al respecto.
Package Control
Lo primero es, si no teneis instalado el Package control, que es un cómodo instalador de paquetes, instalarlo.
Sugiero que lo hagáis a través de la consola de SublimeText
En lugar de proporcionaros yo el código, os recomiendo que copiéis el código desde el enlace oficial por si sufriera algún cambio.
https://sublime.wbond.net/installation
El que yo he usado es el correspondiente a la versión 3
Ahora, abrimos la consola de Sublime con View > Show Console
Pegamos en la parte de abajo el código, si todo sale bien, este código habrá descargado los paquetes necesarios.
Ahora procedemos a instalar Emmet.io para Sublime Text 3
Cerramos la consola y pulsamos Ctrl + Shift + P para abrir la paleta de comandos.
Escribimos install para instalar el Install Package y lo seleccionamos
Ahora buscamos Emmet y lo instalamos, puede tardar un poco dependiendo de nuestra conexión a internet.
Ya tenemos todo lo necesario, vamos a ver qué podemos hacer con este plugin.
3. Primer contacto
Vamos a ver algunos ejemplos de uso para este plugin
Hijos >
Si queremos por ejemplo hacer un div con un párrafo hijo dentro, podemos escribir algo como
div>p Dándole al tabulador se transforma en
<div> <p></p> </div>
Esto podemos encadenarlo tantas veces como queramos
body>div>p>strong da como resultado
<body> <div> <p><strong></strong></p> </div> </body>
Hermanos +
Podemos querer que dos tags sean hermanas entre sí, esto se consigue con el +
body>p+img
<body> <p></p> <img src="" alt=""> </body>
Subir un nivel ^
Si estamos en una estructura más larga, quizá queramos que un elemento pertenezca al nivel del padre del anterior, esto se consigue con ^
body>div>p^img
<body> <div> <p></p> </div> <img src="" alt=""> </body>
Número de elementos
Para el caso de la introducción creamos una tabla con varios td, esto lo hicimos gracias al *
p*5 devuelve 5 veces <p>
<p></p> <p></p> <p></p> <p></p> <p></p>
Esto es especialmente útil haciendo tablas o listas
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Agrupaciones ()
(p*2)(img*2)
<p></p> <p></p> <img src="" alt=""> <img src="" alt="">
div>(header>ul>li*2>a)+footer>p
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
Clases e Ids
Muchos usamos clases e ids en las tags para el uso de javascript o css, Emmet tambien nos proporciona una forma cómoda de añadirlas
p.clase
<p class="clase"></p>
p#clase
<p id="clase"></p>
Se pueden añadir varias clases concatenándolas
p.clase1.clase2
<p class="clase1 clase2"></p>
Incluso podemos definir autonuméricos con el $
ul>li.clase$*5
<ul> <li class="clase1"></li> <li class="clase2"></li> <li class="clase3"></li> <li class="clase4"></li> <li class="clase5"></li> </ul>
Esto es muy potente, pudiendo usarse varios dígitos
ul>li.clase$$*5
<ul> <li class="clase01"></li> <li class="clase02"></li> <li class="clase03"></li> <li class="clase04"></li> <li class="clase05"></li> </ul>
Se puede completar aún más usando la @
@- le da el orden inverso a la ordenación
ul>li.clase$@-*5
<ul> <li class="clase5"></li> <li class="clase4"></li> <li class="clase3"></li> <li class="clase2"></li> <li class="clase1"></li> </ul>
@4 empezará por el numero 4
ul>li.clase$@4*3
<ul> <li class="clase4"></li> <li class="clase5"></li> <li class="clase6"></li> </ul>
Se pueden incluso definir los atributos del tag
p[title=»Hola mundo»]
<p title="Hola mundo"></p>
Un detalle importante es que no tiene un listado de tags, por lo que funcionará para cualquier nombre que escribamos, haciendolo útil para xml
etiqueta>subetiqueta
<etiqueta> <subetiqueta></subetiqueta> </etiqueta>
También tiene modos para trabajar en CSS pero por no extenderme demasiado os dejo el enlace con la documentación oficial para el que lo quiera mirar.
4. Conclusión
Espero que os haya gustado este tutorial y que os sea útil. Considero una gran mejora mi manera de programar HTML/XML con Emmet a como lo hacía antes a mano.
También ayuda a eliminar el mal hábito de estar copiando y pegando trozos de otros programitas.
