Sácale todo el provecho a Emmet

Seguramente ya conoces Emmet, esa potente herramienta que encuentras de manera integrada en tu editor de texto, pero ¿le estás sacando todo el provecho que podrías? Con Emmet puedes agilizar tu proceso de desarrollo al escribir código HTML y CSS, más rápido y ahorrándote errores tipográficos.

Así que si ya tienes bastante confianza en tus habilidades con HTML y has estado pensando en cómo acelerar tu flujo de trabajo diario, este artículo es para ti, a continuación te mostraré algunos atajos que elevarán tu productividad.

Comencemos con lo básico

Si usas Visual Studio Code no necesitarás hacer ninguna instalación, puesto que Emmet ya viene incorporado por defecto. Para editores como Atom o Sublime Text, podrás hacer la descarga desde su sitio web.

¿Cómo funciona?

Con Emmet podrás escribir código abreviado que se expandirá en una pieza de código completa, por ejemplo, podrás crear elementos anidados, elementos con selectores de clase, de ID, incluso, podrás crear snippets -fragmentos de código- personalizados.

¡Veamos!

1. Estructura Básica HTML:

Si tienes dificultades para recordar la estructura básica de HTML, Emmet te la recordará rápidamente. En un documento con extensión “.html” escribe el carácter de admiración, presiona la tecla Tab o Enter y ¡ya está!

2. Elementos con atributos de clase y ID:

Escribe los elementos que necesites añadiendo sus atributos de clase, por ejemplo: crearé un elemento nav con un atributo de clase con el valor menu, no olvides anteponer el punto al nombre de la clase, si lo que quieres es añadir un atributo ID, en lugar del punto, antepones un hash (#)

nav.menu

nav#menu

Resultado:

<nav class="menu"></nav> 
<nav  id="menu"></nav>

3. Crea elementos anidados:

Con el signo mayor que (>) podrás anidar elementos dentro de otros. Fíjate en este ejemplo, crearemos un elemento nav que contendrá un elemento para crear una lista desordenada ul.

nav>ul

Resultado:

<nav>
   <ul></ul>
</nav>

4. Multiplicación:

Sumado a lo anterior, con el signo de multiplicación añadiremos tres elementos de lista a la lista desordenada, aquí puedes sustituir por el número de elementos que necesites crear y presionas TAB o enter:

nav>ul>li*3

Resultado:

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>  
    </ul>
</nav>

5. ¿Qué tal una combinación de lo anterior?

En este ejemplo, crearemos un menú de navegación que contendrá una lista desordenada, con tres elementos dentro. Añadiré un atributo ID con valor menú, al elemento nav; un atributo de clase con valor nav-menu al elemento de lista desordenada -ul- y; por último, los elementos de la lista tendrán la clase nav-menu-items.

nav#menu>ul.nav-menu>li*3.nav-menu-items

Resultado:

<nav  id="menu">
    <ul  class="nav-menu">
        <li  class="nav-menu-items"></li>
        <li  class="nav-menu-items"></li>
        <li  class="nav-menu-items"></li>
    </ul>
</nav>

Otra estructura muy común cuando creamos menús de navegación, es añadir un enlace dentro de los elementos de lista, ¡probemos!:

nav#menu>ul.nav-menu>(li.nav-menu-items>a)*3

Resultado:

<nav  id="menu">
    <ul  class="nav-menu">
        <li  class="nav-menu-items"><a  href=""></a></li>
        <li  class="nav-menu-items"><a  href=""></a></li>
        <li  class="nav-menu-items"><a  href=""></a></li>
    </ul>
</nav>

6. Elementos hermanos:

Con el signo de suma (+) puedes crear varios elementos hermanos. Crearé un elemento section y le añadiré un atributo de clase a cada uno con los valores: projects, skills y contact, respectivamente. Recuerda que usando el punto puedes añadir el atributo de clase y con el signo de suma podrás crear los elementos hermanos, es decir, elementos que estarán en el mismo nivel, así:

section.projects+section.skills+section.contact

Resultado:

<section  class="projects"></section>
<section  class="skills"></section>
<section  class="contact"></section>

7. Definir algunos elementos con su contenido:

Usando los corchetes puedes poner dentro el contenido, anteponiendo el elemento, de esta manera:

h1{Hello World}

Resultado:

<h1>Hello World</h1>

Snippets personalizados:

Un snippet es un fragmento de código reutilizable que te ayuda a evitar la escritura de código repetitivo, ahorrándote tiempo. Los snippets son una característica de la mayoría de los editores de texto y a continuación te enseñaré a crear un snippet de HTML desde Visual Studio Code.

1. Abre VSC y ve hacia el ícono de configuraciones ubicado en la parte inferior derecha de la ventana y selecciona la opción “User snippets” o dirígete al menú presionando las teclas cmd + p o ctrl + p y escribe el signo mayor que: (>) seguido por la palabra snippets, elige la opción Preferences: Configure User snippets.

2. Verás una lista y allí podrás seleccionar el lenguaje en el que estará escrito tu snippet, en este caso será HTML.

3. Se te abrirá un archivo con la extensión ".json" y este contendrá una estructura de un snippet con una explicación que te servirá como ejemplo para crear el tuyo.

1. Como ejemplo, creé un snippet que contiene la estructura de una sección con un elemento article anidado, cada uno con un elemento de encabezado y de párrafo, que se ve de esta manera:

Lo he llamado pre-section y he puesto "sec+art" que será la forma en la que invocaré el snippet cuando lo vaya a usar en mi código.

Dentro de body, añadí una tabulación (\t) para los elementos h2, p y article, que serán hijos directos del elemento section y tabulé dos veces (\t\t) para anidar dentro del elemento article, los elementos h3 y p.

Para finalizar, añadí la etiqueta de cierre del elemento section que contendrá los elementos anidados y una descripción del snippet, el resultado es este:

<section>
    <h2></h2>
    <p></p>
    <article>
        <h3><h3>
        <p></p>
    </article>
</section>

Como ves, las posibilidades son muchas, por esto, te invito a probarlo. Si tienes dudas, recuerda revisar la documentación de Emmet y si ya has creado tus propios snippets, ¡compártelos en los comentarios!