¿Cansado de escribir <div> sólo para verte obligado a desplazarte hacia atrás y escribir los elementos de clase? ¿Exhausto de anidar div dentro de div para hacer tu hermoso diseño de cuadrícula en lo que se suponía que iba a ser un flash, pero se convirtió en apoyarte en tu tecla de flecha izquierda hasta que tu mano se entumeció? Si has respondido que sí a alguna de estas preguntas, tienes que conocer a mi amigo Emmet. Emmet ayuda a los desarrolladores permitiéndoles escribir fragmentos de código dentro de VSCode, y tener un hermoso HTML saliendo por el otro extremo.
Tags Hermanos rápidos usando el signo +
Los viejos símbolos de adición (+) te darán elementos hermanos. Digamos que tienes un div con una imagen, un título h3, y un párrafo. Con el cursor en el cuerpo del div, simplemente escribe img+h3+p y emmet te dará el hermoso html :
img+h3+p
<div>
<img src="" alt="">
<h3></h3>
<p></p>
</div>Y tu cursor estará listo para insertar el src de tu imagen.
Elementos anidados con el signo >
¿Y si necesitas elementos anidados? Simplemente cambia el + por un >! body>main>div>h1 te dará:
>! body>main>div>h1
<body>
<main>
<div>
<h1></h1>
</div>
</main>
</body>
3. Múltiples elementos con el *
Hacer una tabla puede llevar mucho tiempo, a menos que utilices emmet en todo su potencial. Utilizando la misma técnica, los paréntesis te permitirán multiplicar el número de hijos anidados. div>(p*5) se convierte en:
div>(p*5)
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>2. Id’s a la velocidad de luz
Si quieres poner algunos divs con ids ya adjuntos, puedes usar la sintaxis estilo css. #article se convierte en <div id=«article»></div>. Pero puedes combinar otras técnicas con esto, por ejemplo div>#hello>p se convierte en:
<div>
<div id="hello">
<p></p>
</div>
</div>1. DIV pero con clase
Si prestaste atención durante el último consejo, probablemente ya entenderás cómo utilizar las clases. Basta con añadir un punto. .bold se convierte en un <div class="bold"></div>.
También puedes encadenarlos para añadir más (.bold.bigtitle.nav-bar-header) o combinar cualquier método anterior para ponerlos en marcha. Prueba con div>#art1.article>#art2.article>#art3.article y verás cómo se pueden combinar muchas cosas de las que acabamos de hablar.
