Emmet: Escribe código HTML y CSS a base de abreviaciones

Para escribir código basta con el editor de texto más sencillo de tu sistema operativo llámese Bloc de Notas, Gedit, Kate o TextEdit. Pero todos los que trabajamos desarrollando código sabemos que escribir en un editor de texto plano equivale a darle a la cajera del supermercado una libreta y un boli (Con un poco de piedad una calculadora también). Una tarea posible en la teoría, pero imposible en la práctica. Cada vez tenemos editores más complejos y con más funcionalidades que ya no solo se limitan a colorear el código sino potentes herramientas de autocompletado, detección de errores en tiempo real, refactorización, etc.

Si desarrollas para la web, en concreto para el frontend, Emmet da una vuelta de tuerca más para hacerte altamente productivo, se trata de un plugin que a base de escribir pequeñas abreviaciones genera grandes estructuras de código HTML y CSS.

Los programadores somos vagos, reconócelo

Aunque parezca una contradicción estaréis de acuerdo conmigo en que a los programadores no nos gusta escribir código. Nos gusta resolver problemas, plasmarlo en código es un daño colateral para la mayoría. Siempre vamos a estar buscando la manera de escribiendo lo menos posible hacer más cosas, es la esencia de la programación.

El lenguaje HTML está muy bien, un lenguaje de marcas basado en XML que se basa en el uso de etiquetas y atributos. Fácil de procesar para la máquina y fácil de leer para el ser humano, aunque el que escribe el código no está tan de acuerdo con esto ya que es tedioso de escribir por repetitivo. Con Emmet se acabó para siempre lo tedioso, por fin nos podremos centrar en lo que de verdad importa, entregarlo a tiempo haciendo lo mínimo.

Como decíamos Emmet se base en pequeñas abreviaciones que generan grandes estructuras de código. Lo mejor es verlo con algunos ejemplos. Por ejemplo la siguiente línea:

nav.menu>ul>li.menu-item*5>a{Enlace $}

Generaría el siguiente código HTMl.

También tiene soporte para el típico texto de pruebas Lorem ipsum que nos permite generar texto fácilmente para ver como queda nuestro diseño.

ul.generic-list>lorem10.item-$*4

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatibus!
    
Eaque, impedit est tempora doloremque praesentium voluptatum quas nostrum consectetur.
    
Illum, reprehenderit minus ex soluta adipisci aperiam explicabo modi sapiente.
    
Nihil ratione voluptates iure cum eligendi dolores deleniti quos nostrum.

p*3>lorem15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, doloribus cum animi perferendis fugit tenetur.
Dolorum, rem labore voluptatem iusto officia corporis molestias distinctio. Voluptas corrupti consectetur molestiae sed libero!
Corporis, reiciendis quos cumque nihil harum eaque libero officiis enim amet eum odio a veniam.

Donde lorem15 es el número de palabras a generar.

Para ver todas las posiblidades de Emmet y como usarlo desde lo más básico a los casos más avanzados lo mejor es ver la documentación que es bastante completa y con muy buenos vídeos explicativos.

Emmet para todos

Como hemos dicho Emmet es un plugin, pero ¿Para que editor? Pues para ¡Muchos! Emmet está disponible de manera oficial para:

• Eclipse/Aptana

• TextMate

• Coda

• Espresso

• Chocolat

• Komodo Edit

• Notepad++

• PSPad

• textarea

• CodeMirror

• Brackets

• NetBeans

• Adobe Dreamweaver

También está disponible para algunas herramientas online y extraoficialmente par otro editores, puedes verlos todos en la página de descargas.

Sin duda un plugin muy interesante que si aprendemos a usarlo a fondo nos hará mucho más productivos y nos permitirá escribir líneas y líneas de código repetitivo con unos simples comandos y reglas.

Más información | emmet.io