Emmet, el plugin que todos deberían tener
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:5Al 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!.