Emmet, el plugin que todos deberían tener

Author
By Darío Rivera
Posted on 2020-10-21 in HTML

El emmet fue para mí el primer plugin que instalé en un editor de texto para mejorar la productividad cuando desarrollaba en HTML y CSS. Recuerdo que en aquellos tiempos utilizaba SublimeText 2 y estaba aprendiendo también PHP. También recuerdo que ver las capacidades de este plugin me deslumbró totalmente.

El emmet es un plugin para mejorar tu workflow cuando trabajas con HTML y CSS. Es un plugin de snippets que te ayudará a crear rápidamente elementos anidados sin tener que colocar cada etiqueta de apertura, cierre y cada atributo de manera manual. Ya verás a lo que me refiero.

La mejor forma de aprender a utilizar el Emmet es viendo de lo que es capaz. Así que manos a la obra!.

Dado que el emmet es un plugin de snippets nos permitirá escribir solo unas pocas palabras para crear algo maravilloso. Veamos cómo podemos crear un scaffolding de HTML5 para nuestra front page.

html:5

Al digitar la tecla que dispará el emmet (trigger key) obtendrás lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Nada mal cierto ?. Veamos ahora una lista de combinaciones que podemos utilizar en emmet. Como te dije, es la forma más didáctica que puedo encontrar para enseñarte a usar emmet. Verás que la mayoría de elementos de la sintaxis hacen referencia a CSS.

Elementos hijos

Caracter: >
Objetivo: Anidar elementos
Ejemplo:

div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>


Elementos hermanos

Caracter: +
Objetivo: Posicionar elementos hermanos
Ejemplo:

fieldset>legend+input
<fieldset>
    <legend></legend>
    <input type="text">
</fieldset>


Escalar el contexto

Caracter: ^
Objetivo: Posicionar un elemento como hermano subiendo un nivel en el contexto
Ejemplo:

div>ul>li>a^li
<div>
    <ul>
        <li><a href=""></a></li>
        <li></li>
    </ul>
</div>


Multiplicador

Caracter: *
Objetivo: Genera un elemento la cantidad de veces indicada
Ejemplo:

ul>li*3
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>


Agrupamiento

Caracter: ( )
Objetivo: Agrupa sentencias de emmet
Ejemplo:

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>


Atributo id

Caracter: #
Objetivo: Indicar el atributo id de un elemento
Ejemplo:

div#app>label+input#search
<div id="app">
    <label for=""></label>
    <input type="text" id="search">
</div>


Atributo class

Caracter: .
Objetivo: Indicar el atributo class de un elemento
Ejemplo:

div.app>label+input.form-control.input-sm
<div class="app">
    <label for=""></label>
    <input type="text" class="form-control input-sm">
</div>


Atributos personalizados

Caracter: [ ]
Objetivo: Indica los atributos personalizados a agregar a un elemento
Ejemplo:

td[title="Hello world!" colspan=3]
<td title="Hello world!" colspan="3"></td>


Espero que esta lista pueda darte las bases que necesitas para empezar a usar emmet. Puedes encontrar más información sobre la sintaxis aquí. Hasta pronto!.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.