Emmet¶

Resumen¶

Emmet es la evolución de Zen coding ( programación de plantillas HTML como un maestro Zen, o al menos, esa era la idea)

Instalación¶

- Ctrl+Shift+P
- Ingresar install
- Escribir emmet
- Instalar

Uso¶

En esencia, emmet se basa en la interpretación de tags previamente definidos de manera tal que al interpretarse se genera código inmediatamente despues de tabular sobre la declaración.

Ejemplos prácticos¶

Añadiendo atributos class e id a un div¶

La clase se representa con un "." (sin comillas) y luego el nombre de la clase, de la misma manera con la id sólo que el indicador de id es "#" ( sin comillas )

div.clase#id

lo que se transformaría en

<div class="clase" id="id"></div>

Para que la misma clase tenga mas de una clase ( recordar que las id deben ser únicas ) se declara con "." aparte, como por ejemplo.

div.clase1.clase2

lo que se transformaría en

<div class="clase1 clase2"></div>

Generar una tabla, con sus respectivos headers que incluya un link, un input text y un boton, de estos se deben generar 3 elementos de lista en la tabla.¶

Suena complicado ¿no?, pero se verá que con un poco de cautela nos podemos ahorrar bastante tiempo de codeo.

table>(thead>(th>(td{link}+td{input}+td{boton})))+(tbody>(tr>(td>a.link{esto es un link}+td>input:t[value="input de texto"]+td>input:b[value="boton"]))*3)

Se ve bastante mal, ¿cierto?. Lo bueno es que traduciéndolo podrás ver cuanto te facilita la vida este tipo de códigos ( a veces es bueno para crear Snippets ). Traducido esto quedaría mas o menos así.

<table>
    <thead>
        <th>
            <td>link</td>
            <td>input</td>
            <td>boton</td>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="" class="link">esto es un link</a>
                <td>
                    <input type="text" name="" id="" value="input de texto">
                    <td><input type="button" value="boton"></td>
                </td>
            </td>
        </tr>
        <tr>
            <td>
                <a href="" class="link">esto es un link</a>
                <td>
                    <input type="text" name="" id="" value="input de texto">
                    <td><input type="button" value="boton"></td>
                </td>
            </td>
        </tr>
        <tr>
            <td>
                <a href="" class="link">esto es un link</a>
                <td>
                    <input type="text" name="" id="" value="input de texto">
                    <td><input type="button" value="boton"></td>
                </td>
            </td>
        </tr>
    </tbody>
</table>

Traduzcamos un poco.

Comenzamos con una definicion de tabla table, luego agrupamos los contenidos por nivel. Dentro de una tabla existe un theader y un tbody cuyo contenido podemos agrupar.

table>((thead)+(tbody))

el simbolo ">" indica que el contenido que vaya despues estará inserto dentro de los tags de tabla, el simbolo "+" indica que el elemento esta al mismo nivel y los paréntesis indican que podemos agrupar codigo por bloques sin perdernos.

Analizando thead

thead>(th>(td{link}+td{input}+td{boton}))

A su vez, el thead cuenta con un elemento th y 3 elementos td para generar la columna head.

El simbolo "{}" indica que todo lo contenido en el sera tratado como texto plano.

Analizando tbody

tbody>(tr>(td>a.link{esto es un link}+td>input:t[value="input de texto"]+td>input:b[value="boton"]))*3

En el tbody, cuenta con una estructura similar que el anterior, solo que existen ciertas abreviaciones extra que emmet permite realizar, a considerar.

- a.link{esto es un link} -> generara un link de clase "link" y contenido de link "esto es un link" 
- input:t[value="input de texto"] -> generará un input de tipo text y value "input de texto", el simbolo "[]" generará atributos custom en el elemento a generar
- input:b[value="boton"] -> generará un input de tipo botón y value "boton" 
- *3 -> este elemento en especial repite el elemento multiplicado la cantidad de veces que definamos, en este caso 3.

Para probar toda la potencialidad de este plugin dirigirse a [[http://docs.emmet.io/cheat-sheet/]].