Últimamente he estado afinando mis procesos de desarrollo. El desarrollo en el 2013 es maravilloso, gracias a herramientas como node.js, npm, yeoman, grunt, bower y un largo etcétera (pronto escribiré al respecto). Pero lo que me convoca ahora es un truco que siempre quise, y hasta hoy me había mantenido alejado de abreviadores de código como Zen Coding (ahora Emmet).

Mi problema con Emmet

Me gusta comentar las clases y los IDs en mi html, así nunca estaré perdido en qué o dónde se está cerrando una etiqueta, y de esa forma es más legible para mí u otros colegas que pudieran trabajar en mis implementaciones.

Por ejemplo, una sintáxis básica en Emmet para Bootstrap sería más o menos así:

div.container-fluid>div.row-fluid>div.span8+div.span4

Resultando algo como esto:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8"></div>
        <div class="span4"></div>
    </div>
</div>

Como hasta ahora, no podía modificar el output del código, solía escribirlo a mano. Así:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8"></div><!-- .span8 -->
        <div class="span4"></div><!-- .span4 -->
    </div><!-- .row-fluid -->
</div><!-- .container-fluid -->

Ahora, con un par de preferencias definidas en un par de archivos json, podemos hacer esto.

Preferencias de Emmet

Leyendo la documentación de Emmet me di cuenta de que necesitaba dos cosas:

• Un filtro adicional a la salida del html
• Una sintáxis que pusiera los comentarios tal como me gustan.

Entonces, en un archivo snippets.json agregué un filtro (documentación)

{
...
"html": {
    ...
    "filters": "html, c"
    }
}

Donde c es el filtro de comentario. Luego, en un archivo preferences.json personalicé el output del comentario, de esta forma:

{
  "filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
}

Y luego estos dos archivos los puse en una carpeta, para llamarlos en las preferencias de Coda 2, en el menú Plug-ins>Emmet>Preferences. Si usan otro editor, lean la documentación de cada plugin.

Acá los dejo con estas dos personalizaciones en mi Github:

https://github.com/kyuumeitai/emmet-personalization

Prontamente, un post sobre yeoman.