Atajos Emmet para escribir mas rápido código HTML Y CSS.

Emmet:

Emmet es una de las funciones integradas o extensiones de nuestro famosísimo VS (Virtual Studio Code).

Las expansiones de las abreviaturas y fragmentos de Emmet están habilitadas de forma predeterminada en los archivos HTML, CSS, HAML, PUG, SLIM, JSX, XML, XSL, SASS, SCSS, LESS Y ESTYLUS, así como en cualquier idioma que herede de cualquiera de los anteriores, como MANILLARES y PHP.

Emmet nos facilita la escritura de código ya que nos brinda sugerencias mientras escribimos las abreviaturas y nos completa la etiqueta que en el momento estemos digitando por ejemplo, escribimos la letra b y nos trae las siguientes sugerencias:

Ahora si enterándonos de esto, !A LO QUE VINIMOS¡

Atajos HTML / CSS

HTML

Con Emmet puede crear rápidamente una plantilla HTML en un abrir y cerrar de ojos. En un archivo HTML, simplemente escriba ! y verá que Emmet ha aparecido como sugerencia. Ahora presiona Enter. Ahí lo tiene, una página web HTML básica en blanco lista para usar.

Clases

Si está familiarizado con CSS, Emmet usa la misma forma para referirse a las clases usando un .. Para definir una clase junto con la etiqueta, simplemente agréguela así:

div.wrapper —> <div class="wrapper"></div>
h1.header.center —> <h1 class="header center"></h1>

ID’s

Los Id funcionan de manera muy similar:

div#hero —> <div id="hero"></div>

Combinatoria

Puede combinar estos juntos:

div#hero.wrapper —> <div id="hero" class="wrapper"></div>

Atributos

También podemos especificar atributos para las etiquetas:

img[src="cat.jpg"][alt="foto de gato"] —> <img src="cat.jpg" alt="foto de gato" />

Contenido

Para incluir contenido dentro de la etiqueta, simplemente envolvemos el contenido entre llaves, { }.

p{Esto es un párrafo} —> <p>Esto es un párrafo</p>

Etiquetas hermanos e hijos

Cada vez se pone mejor. También podemos especificar etiquetas hermanos e hijos usando los caracteres + y >.

section+section —> <section></section><section></section>
ul>li —> <ul><li></li></ul>

Escalando

Tienes que intentar imaginar lo que estás construyendo en tu cabeza mientras escribes la taquigrafía de Emmet. En este ejemplo, "treparemos" por la estructura HTML usando ^.

div+div>p>span+em^bq

Resultado:

<div>

</div>

Aquí, queríamos que la etiqueta en blockquote estuviera al mismo nivel que el párrafo. Por eso, necesitábamos "trepar". De lo contrario, estaría dentro del párrafo.

Agrupar

Si su estructura es muy compleja, es posible que desee agrupar etiquetas en lugar de atravesar trepando.

En este ejemplo, crearemos un encabezado (header) y un pie de página (footer) sin escalar usando paréntesis ( ).

div>(header>ul>li>a)+footer>p

Resultado:

<div>

<ul>

</ul>

</header>

<p></p>

</footer>

</div>

Multiplicación y $

Podemos generar múltiples etiquetas multiplicando (*) y numerando elementos en secuencia usando un signo de dólar ($).

ul>li*5 —> <ul><li></li><li></li><li></li><li></li><li></li></ul>
ul>li{Ítem $}*3 —> <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

Incluso puede personalizar la secuencia de numeración rellenando con ceros, comenzando con un número específico e incluso en la dirección inversa.

Pad con ceros: u>li.item$$$*5

Resultado:

<ul>

</ul>

Comience con un número específico: ul>li.item$@3*5

Resultado:

<ul>

</ul>

Dirección inversa: ul>li.item$@-*5

Resultado:

<ul>

</ul>

Dirección inversa desde un número específico: ul>li.item$@-3*5

Resultado:

<ul>

</ul>

Nombres de etiqueta implícitos

Hay ciertas etiquetas que no es necesario escribir y pueden estar implícitas.
Una clase definida inicialmente sin etiqueta estará implícita como <div>.
.wrapper —> <div class="wrapper"></div>
Una clase definida dentro de una etiqueta de énfasis estará implícita como <span>.
em>.enfasis —> <em><span class="enfasis"></span></em>
Una clase definida dentro de una lista estará implícita como un elemento de lista.
ul>.item —> <ul><li class="item"></li></ul>
Una clase definida dentro de una tabla estará implícita como <tr> y dentro de una fila será un <td>.
table>.fila>.col —> <table><tr class="fila"><td class="col"></td></tr></table>

Envolver con etiquetas

Habrá ocasiones en las que tenga un código existente que desee envolver con una etiqueta. Podemos hacerlo fácilmente con Emmet.

Simplemente resalte el código que desea envolver y abra la paleta de comandos (F1). Luego busque Emmet: Ajustar con abreviatura Emmet: Wrap with Abbreviation. A continuación, se le presentará un cuadro de diálogo donde puede escribir el elemento.

test —> <div>test</div>

También puede utilizar la sintaxis estándar de Emmet en este cuadro de diálogo. Intente ajustar un poco de texto con span.wrapper.

De forma predeterminada, esta funcionalidad no está asignada a un método abreviado de teclado. Por lo tanto, si lo usa con frecuencia, es posible que desee agregar un acceso directo personalizado para él.

Lorem Ipsum

"Lorem Ipsum" es un texto ficticio utilizado por los desarrolladores para representar datos en una página. Simplemente escriba lorem y presione Enter. Emmet generará 30 palabras de texto falso que puede usar como relleno en su proyecto.

También se puede definir la cantidad de palabras generadas.

lorem10 te dará 10 palabras de texto aleatorio.

Poniéndolo todo junto

Usemos varias cosas que hemos aprendido hasta ahora. Prueba esto:

ul.mi-lista>lorem10.item-$*5

Resultado:

<li class="item-1">Lorem ipsum dolor sit amet.</li>

<li class="item-2">Numquam repudiandae fuga porro consequatur?</li>

<li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>

<li class="item-4">Numquam architecto corrupti quam repudiandae.</li>

</ul>

CSS

En CSS, Emmet tiene una abreviatura para cada propiedad. No voy a enumerarlos todos, pero señalaré los más utilizados. Para ver la lista completa, consulte la hoja de referencia de Emmet.

Position

pos —> position:relative; (Por defecto es relative)
pos:s —> position:static;
pos:a —> position:absolute;
pos:r —> position:relative;
pos:f —> position:fixed;
Display
d —> display:block; (Lo predetermina a block)
d:n —> display:none;
d:b —> display:block;
d:f —> display:flex;
d:if —> display:inline-flex;
d:i —> display:inline;
d:ib —> display:inline-block;
Cursor
cur —> cursor:pointer;
Color
c —> color:#000;
c:r —> color:rgb(0, 0, 0);
c:ra —> color:rgba(0, 0, 0, .5);
op —> opacity: ;
Margin & Padding
m —> margin: ;
m:a —> margin:auto;
mt —> margin-top: ;
mr —> margin-right: ;
mb —> margin-bottom: ;
ml —> margin-left: ;
p —> padding: ;
pt —> padding-top: ;
pr —> padding-right: ;
pb —> padding-bottom: ;
pl —> padding-left: ;
Box Sizing
bxz —> box-sizing:border-box;
Width
w —> width: ;
h —> height: ;
maw —> max-width: ;
mah —> max-height: ;
miw —> min-width: ;
mih —> min-height: ;
Border
bd —> border: ;
bd+ —> border:1px solid #000;
bd:n —> border:none;

Buscar este blog

Trucos para el desarrollo Web