Emmet es una de mis funciones integradas favoritas de VS Code. También está disponible como una extensión en otros editores de código.

Piense en Emmet como taquigrafía. Con él, puede escribir fácilmente una gran cantidad de código rápidamente. Acelera drásticamente su flujo de trabajo HTML y CSS.

Entender cómo usar Emmet es literalmente una superpotencia. Algunos incluso lo han llamado un código de trucos de codificación. ?

Y es solo una de las muchas características integradas sorprendentes de VS Code.

Recientemente, lancé un curso completo y detallado llamado Become A VS Code SuperHero . Cubre todos los aspectos de VS Code en gran profundidad.

Este artículo se basa en una de las 11 secciones del curso: Escritura y formato de código .

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 golpea Enter. Ahí lo tienes, una página web HTML básica en blanco lista para funcionar.

Si nunca ha visto HTML antes y no tiene ni idea de qué es todo esto, no se preocupe. Solo estoy demostrando las capacidades de VS Code y Emmet. No tienes que saber qué significa todo esto en este momento.

Etiquetas básicas

Para crear etiquetas HTML básicas, simplemente escriba el nombre de la etiqueta y presione Enter. Observe cómo Emmet coloca su cursor dentro de la etiqueta. Ahora está configurado para continuar escribiendo dentro de la etiqueta.

• Intente escribir: divluego Enter, o h1 Enter, o p Enter.
• Estos también funcionan: bqpara a , hdrpara a , ftrpara a , btnpara a y sectpara una sección.

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 ->
• h1.header.center ->

ID's

El trabajo de Id es muy similar:

• div#hero ->

Combinatorio

Puede encadenar estos juntos:

• div#hero.wrapper ->

Atributos

También podemos especificar atributos para las etiquetas:

• img[src="cat.jpg"][alt="Cute cat pic"] ->

Contenido

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

• p{This is a paragraph} ->

  This is a paragraph

Hermanos e hijos

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

• section+section ->
• ul>li ->

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 el árbol usando ^.

div+div>p>span+em^bq

Resultado:

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

Agrupamiento

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

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

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

Resultado:

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{Item $}*3 ->
  • Item 1
  • Item 2
  • Item 3

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: ul>li.item$$$*5

Resultado:

Comience con un número específico: ul>[email protected]*5

Resultado:

Direccion contraria: ul>[email protected]*5

Resultado:

Dirección inversa de un número específico: ul>[email protected]*5

Resultado:

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 .

  .wrapper ->

• Una clase definida dentro de una etiqueta de énfasis estará implícita como .

  em>.emphasis ->

• Una clase definida dentro de una lista estará implícita como un elemento de lista.

  ul>.item ->
• Una clase definida dentro de una tabla estará implícita como a y dentro de una fila sería a .

  table>.row>.col ->

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: Wrap with Abbreviation. A continuación, se le presentará un cuadro de diálogo donde puede escribir el elemento.

test -> test

También puede utilizar la sintaxis estándar de Emmet en este cuadro de diálogo. Intente envolver 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 que utilizan los desarrolladores para representar datos en una página. Simplemente escriba loremy 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 le dará 10 palabras de texto aleatorio.

Poniendolo todo junto

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

ul.my-list>lorem10.item-$*5

Resultado:

    

     
Lorem ipsum dolor sit amet.
     
Numquam repudiandae fuga porro consequatur?
     
Culpa, est. Tenetur, deleniti nihil?
     
Numquam architecto corrupti quam repudiandae.
    

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.

Posición

• pos-> position:relative;(predeterminado en relativo)
• pos:s ->position:static;
• pos:a ->position:absolute;
• pos:r ->position:relative;
• pos:f ->position:fixed;

Monitor

• d-> display:block;(predeterminado para bloquear)
• 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: ;

Margen y relleno

• 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: ;

Tamaño de caja

• bxz ->box-sizing:border-box;

Anchura

• w ->width: ;
• h ->height: ;
• maw ->max-width: ;
• mah ->max-height: ;
• miw ->min-width: ;
• mih ->min-height: ;

Frontera

• bd ->border: ;
• bd+ ->border:1px solid #000;
• bd:n ->border:none;

¡Emmet es increíble!

Con Emmet, puede crear una estructura HTML realmente compleja con una línea. Es realmente asombroso. Y también funciona con CSS.

Puede ver cómo Emmet puede aumentar drásticamente su eficiencia y velocidad al escribir HTML y CSS.

Si desea aumentar aún más su eficiencia y velocidad mientras usa VS Code, consulte mi curso Conviértase en un Superhéroe de VS Code.

El curso profundiza mucho más en estos conceptos y te ayuda a convertirte en un desarrollador de superhéroes rápido y eficiente :)

Soy Jesse de Texas. Consulte mi otro contenido y déjeme saber cómo puedo ayudarlo en su camino para convertirse en desarrollador web.

• Suscribirse a mi YouTube
• ¡Di hola! Instagram | Gorjeo
• Inscríbete a mi boletín de noticias