Hoy quiero escribir la herramienta Emmet que, aunque los desarrolladores web la encontrarán útil en general, serán los maquetadores en particular los que la encontrarán especialmente útil y, de hecho, es probable que ya la conozcan. Por tanto, cualquier freelance que realice proyectos pequeños donde lo mismo se realiza el «backend» como el «frontend», le sacará mucho partido.Los usuarios del editor de código Sublime Text, seguramente son viejos conocidos de este plugin. Personalmente, el hecho de que Sublime sea una herramienta de pago, lo deja fuera de mi elección en principio, puesto que prefiero el software libre y hay muy buenas alternativas. Por lo tanto, en lo particular uso Eclipse, Geany, Notepad++, CodeLobster, etc., dependiendo del proyecto.
No es una herramienta nueva, desde luego, pero si realmente útil. Me refiero al plugin Emmet, anteriormente conocido como Zend Coding, y la buena noticia es que está disponible para diferentes entornos de trabajo y editores, tal y como puede verse en la página de Download.
Como puede verse, los usuarios de herramientas como Vim y Emacs pueden utilizarlo. Pero si como yo, utilizas Geany a menudo, la cosa se complica un poco, ya que no aparece directamente en la web de Emmet.Tendremos por tanto, que utilizar una adaptación que puede conseguirse aquí: https://github.com/sagarchalise/geanypy-emmet
Las funcionalidades de Emmet
Procesamiento de abreviaturas:
Escribimos unas secuencias de caracteres que se transforman en un bloque de código HTML con solamente pulsar una tecla (Tab normalmente). Ejemplo (viene en la documentación oficial):
La documentación acerca de todas las funcionalidades de Emmet es excelente, así que me limito a poner enlaces a su documentación, aún a riesgo de hacer un poco más incómoda la lectura del artículo:
http://docs.emmet.io/abbreviations/
Siguiendo con abreviaturas, CSS no escapa a ellas y podemos generar (entre otros), el código CSS necesario para realizar gradientes compatibles con diferentes navegadores: http://docs.emmet.io/css-abbreviations/gradients/
Toda etiqueta está formada por una de apertura y otra de cierre. Si nos situamos dentro de un texto, Emmet puede buscar y seleccionar el texto donde estamos situados, más el par de etiquetas (apertura y cierre) que lo contiene:
http://docs.emmet.io/actions/match-pair/
Búsqueda de la etiqueta complementaria:
Funcionalidad que complementa a la anterior. Si nos situamos en una etiqueta de apertura o cierre, Emmet buscará su contraparte: http://docs.emmet.io/actions/go-to-pair/
Es una funcionalidad que traen por defecto muchos editores. Analiza el elemento dónde se encuentra el cursor (no hace falta seleccionar código) e intuye el tipo de comentario que debe insertarse. http://docs.emmet.io/actions/toggle-comment/
Aunque es una funcionalidad que tienen diversos editores, Emmet permite eliminar los saltos de línea sin necesidad de seleccionar, solamente por el contexto. http://docs.emmet.io/actions/merge-lines/
Para proveer compatibilidad entre navegadores, muchas veces se recurre a utilizar varias propiedades CSS, con distinta sintaxis, pero que realizan lo mismo. Si cambiamos el valor de una, Emmet cambiará el valor de todas las relacionadas, según el contexto.
http://docs.emmet.io/actions/reflect-css-value/
Codificación y decodificación de imágenes:
Codifica o decodifica una imagen en base64. En mi opinión, una excelente funcionalidad que evita usar alguna herramienta externa. http://docs.emmet.io/actions/base64/
Desde luego, existen algunas más como la creación de plantillas, mediante las cuáles podemos usar una abreviatura para generar todo un documento HTML. Pueden verse en la citada documentación.Puesto que las funcionalidades son muchas, la sintaxis de las abreviaturas amplia y las combinaciones de teclas numerosas, se aporta una «chuleta» o referencia en un documento PDF.
Es personalizable
Las teclas y combinaciones de éstas que ejecutan las acciones que describen las anteriores funcionalidades son totalmente personalizables. Por ejemplo: me encontré que al instalar el plugin en Eclipse, al escribir los corchetes [], se ejecutaba una acción de desplazamiento y no se escribían los corchetes. Finalmente, personalicé estas acciones y asunto arreglado.Realizar la personalización de las combinaciones de teclas, dependerá del editor al que añadimos el plugin pero podemos hacerlo de dos formas: o bien el plugin provee una interfaz para el editor (como mi caso con Eclipse), o bien modificamos directamente unos ficheros JSON como se describe aquí:
http://docs.emmet.io/customization/El único «pero» que le veo, es que para sacarle todo el jugo, hay que usarlo frecuentemente para que todas esas abreviaturas, acciones, etc., se nos queden grabadas de tal forma que las usemos de forma inconsciente, aparte de preparar plantillas y personalizar lo que no nos guste.Recomiendo su uso por el aumento significativo de productividad que supone. Nada más, un cordial saludo y hasta la próxima.
¡Llévate un descuentazo de Adamo de mi parte!Pásate a La Mega Fibra de 1.000 Mb con esta oferta exclusiva y 60 € de regalo.¡Entra en el link y no la dejes escapar!
(Los patrocinadores incluyen enlaces de afiliados, con cuyos servicios llevamos años, sin queja alguna y por tanto contrastados y recomendados por nosotros)
