Emmet: Escribe cdigo HTML y CSS a base de abreviaciones

Comentarios 29 Me gusta 1 Para escribir cdigo basta con el editor de texto ms sencillo de tu sistema operativo llmese Bloc de Notas, Gedit, Kate o TextEdit. Pero todos los que trabajamos desarrollando cdigo 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 tambin). Una tarea posible en la teora, pero imposible en la prctica. Cada vez tenemos editores ms complejos y con ms funcionalidades que ya no solo se limitan a colorear el cdigo sino potentes herramientas de autocompletado, deteccin de errores en tiempo real, refactorizacin, etc. Si desarrollas para la web, en concreto para el frontend, Emmet da una vuelta de tuerca ms para hacerte altamente productivo, se trata de un plugin que a base de escribir pequeas abreviaciones genera grandes estructuras de cdigo HTML y CSS.

Los programadores somos vagos, reconcelo

Aunque parezca una contradiccin estaris de acuerdo conmigo en que a los programadores no nos gusta escribir cdigo. Nos gusta resolver problemas, plasmarlo en

cdigo es un dao colateral para la mayora. Siempre vamos a estar buscando la manera de escribiendo lo menos posible hacer ms cosas, es la esencia de la programacin. El lenguaje HTML est muy bien, un lenguaje de marcas basado en XML que se basa en el uso de etiquetas y atributos. Fcil de procesar para la mquina y fcil de leer para el ser humano, aunque el que escribe el cdigo 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 mnimo. Como decamos Emmet se base en pequeas abreviaciones que generan grandes estructuras de cdigo. Lo mejor es verlo con algunos ejemplos. Por ejemplo la siguiente lnea: nav.menu>ul>li.menu-item*5>a{Enlace $} Generara el siguiente cdigo HTMl. ?

1 2 3 4 5 6 7 8 9

<nav class="menu"> <ul> <li class="menu-item"><a <li class="menu-item"><a <li class="menu-item"><a <li class="menu-item"><a <li class="menu-item"><a </ul> </nav>

href="">Enlace href="">Enlace href="">Enlace href="">Enlace href="">Enlace

1</a></li> 2</a></li> 3</a></li> 4</a></li> 5</a></li>

Tambin tiene soporte para el tpico texto de pruebas Lorem ipsum que nos permite generar texto fcilmente para ver como queda nuestro diseo. ul.generic-list>lorem10.item-$*4 ?

1 2 3 4 5 6

<ul class="generic-list"> <li class="item-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, <li class="item-2">Eaque, impedit est tempora doloremque praesentium voluptatum q <li class="item-3">Illum, reprehenderit minus ex soluta adipisci aperiam explicab <li class="item-4">Nihil ratione voluptates iure cum eligendi dolores deleniti qu </ul>

p*3>lorem15 ?

1 2 3 4

<br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, doloribus cum <p>Dolorum, rem labore voluptatem iusto officia corporis molestias distinctio. Volup <p>Corporis, reiciendis quos cumque nihil harum eaque libero officiis enim amet eum

Donde lorem15 es el nmero de palabras a generar. Para ver todas las posiblidades de Emmet y como usarlo desde lo ms bsico a los casos ms avanzados lo mejor es ver la documentacin que es bastante completa y con muy buenos vdeos 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

Tambin est disponible para algunas herramientas online y extraoficialmente par otro editores, puedes verlos todos en la pgina de descargas. Sin duda un plugin muy interesante que si aprendemos a usarlo a fondo nos har mucho ms productivos y nos permitir escribir lneas y lneas de cdigo repetitivo con unos simples comandos y reglas. Ms informacin | emmet.io