Emmet, el editor que revoluciona la forma de codificar HTML

Acaba de presentarse en sociedad Emmet, un plug-in para múltiples editores de código fuente diseñado exclusivamente para reducir el tiempo de codificación de HTML y CSS. Hasta ahora, era conocido como Zen Coding pero la nueva versión llega tanto con cambio de nombre como con nuevas capacidades de edición.

Básicamente, su funcionamiento es similar al que proporcionan otros editores avanzados capaces de expandir comandos y etiquetas mediante el proceso de autocompletado. Sin embargo, la potencia de Emmet radica en que va más allá de esta funcionalidad consiguiendo complejas secuencias de código tras teclear abreviaturas ya predefinidas.

A modo de ejemplo, el programador tan sólo tendría que teclear la instrucción ‘html:5’ o simplemente ‘!’ y pulsar la tecla Tabulador, desplegándose automáticamente toda la estructura básica de una página en HTML5.

Las abreviaturas también se pueden combinar entre sí y están disponibles para los distintos tipos de elemento habituales en el código fuente, desde etiquetas a clases, IDs, textos, atributos… Otro ejemplo interesante podría ser el de la creación de una tabla con las etiquetas ‘ul’ y ‘li’. En este caso, el programador simplemente tendría que teclear ‘ul>li.clase$*5’ y pulsar la tecla Tabulador para que se creara una tabla de 5 columnas y clases clase1, clase2, clase3, clase4 y clase5, así de sencillo.

En el caso de las hojas de estilo, el proceso es idéntico. También es posible utilizar abreviaturas personalizadas en función de cada usuario, tal y como explican en el sitio web de Emmet. En cuanto a los editores compatibles, se trata de los más extendidos y populares como Notepad++, PSPad, CodeMirror2/3, Sublime Text, TextMate, Eclipse/Aptana, Komodo, etc.