Emmet, herramienta imprescindible para desarrolladores web
¿Cuantas veces habeis escrito y reescrito las mismas etiquetas Html en vuestro código? ¿Cuánto tiempo habeis perdido con ello? ¿Cuántas veces os habéis equivocado al cerrar una etiqueta o al asignarle un atributo erroneo?
No mintáis, son afirmativas todas …
Pues espero que no lo volvais a hacer nunca más. Emmet es un plugin para resolvernos la vida a programadores, desarrolladores y diseñadores generando código fuente a partir de abreviaturas.
Instación del plugin en Sublime
Nuestro primer paso será instalar el plugin Emmet en Sublime ( que es en el que mejor funciona)
En la página de descargas podeis ver para qué IDEs podeis usarlo y los pasos para instarlarlo (Eclipse, NetBeans, Notepad++ … ) http://emmet.io/download/
En Sublime, los pasos para instalarlo son muy sencillos
- Preferences / Package Control : Vamos a usar el control de paquetes para instalar el plugin dentro del Menu Preferencias
- Installa Package: Le indicamos que queremos instalar un nuevo paquete seleccionando la opcion «Install Package»
- Emmet CSS Snippets: Buscamos el paquete a instalar
Aprendiendo a usar Emmet
Ya estamos listos para aplicar Emmet a nuestro código
Emmet nos va a permitir generar grandes cantidades de código a partir de un par de abreviaturas. Os cuento las más útiles
- operador «>» : nos va a permitir generar una estructura de etiquetas con hijos
- operador «+» : nos va a permitir generar una estructura de etiquetas al mismo nivel
- operador «*» : nos va a permitir indicar cuantas veces queremos incluir un elemento
- operador «()» : igual que en matemáticas para agrupar el resto de operadores
- aplicando atributos «[]» : nos permite añadir atributos a las etiquetas
- añadiendo texto «{}» : nos permite añadir texto a las etiquetas
Para aplicar los ejemplos que os pongo a continuación, solo hace falta pulsar la tecla Tabulador sobre la abreviatura y Emmet hará el resto. Se puede configurar la tecla o teclas para transformar la abreviatura en código Html.
Es necesario que vuestro documento sea un documento .html
div>table>tr>td
Este sería el resultado de aplicar la abreviatura anterior
<div> <table> <tr> <td></td> </tr> </table> </div>
div+p+span
<div></div> <p></p> <span></span>
a[href=»www.cantabriatic.com»]{Enlace}
<a href="www.cantabriatic.com">Enlace</a>
ul>li*10
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Rizando el rizo
div>(header>ul.claseLista>li*2>a)+footer>p[title=»Hello world»]>{Pincha}+a[href=»http://www.cantabriatic.com»]{aqui}+{ para continuar}
<div> <header> <ul class="claseLista"> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p title="Hello world">Pincha</p> <a href="http://www.cantabriatic.com">aqui</a> para continuar </footer> </div>
Podeis consultar el resto de operadores, atributos y abreviaturas en el cheat-sheet de la página de Emmet
http://docs.emmet.io/cheat-sheet/
One Response to “Emmet, herramienta imprescindible para desarrolladores web”