Icono del sitio ZimbronApps

Mejora tu productividad con Emmet

Gustavo Zimbrón

Emmet es una herramienta increíblemente útil para los desarrolladores web que buscan mejorar su flujo de trabajo. Con Emmet, puedes escribir código HTML y CSS de manera más rápida y eficiente, ahorrando tiempo valioso y mejorando tu productividad.

Emmet es un conjunto de abreviaturas que puedes utilizar para escribir código HTML y CSS de manera más rápida y sencilla. Con Emmet, puedes escribir menos código y conseguir más en menos tiempo. Aquí te dejamos algunos ejemplos de cómo puedes utilizar Emmet en tus proyectos:

Crear una estructura básica HTML

Puedes crear rápidamente una estructura básica de HTML utilizando Emmet. Simplemente escribe ! y presiona la tecla Tab ↹. Esto creará una estructura básica de HTML con los elementos básicos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Crear un enlace

Para crear un enlace, simplemente escribe a y presiona Tab ↹. Esto creará un elemento a con los atributos básicos:

<a href=""></a>

Crear una lista

Puedes crear rápidamente una lista utilizando Emmet. Simplemente escribe ul>li*5 y presiona Tab ↹. Esto creará una lista con cinco elementos li:

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

Crear una tabla

Puedes crear una tabla rápida con Emmet. Simplemente escribe table>tr>td*3 y presiona TAB. Esto creará una tabla con tres columnas:

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Añadir clases y atributos

Puedes añadir rápidamente clases y atributos utilizando Emmet. Simplemente escribe el nombre del elemento seguido de un punto y el nombre de la clase, o el nombre del elemento seguido de un corchete y el nombre del atributo. Por ejemplo, para añadir una clase a un elemento div, escribe div.mi-clase:

<div class="mi-clase"></div>

O para añadir un atributo data-id a un elemento p, escribe p[data-id="1"]:

<p data-id="1"></p>

Usando contenido dentro de una etiqueta

Puedes utilizar el contenido dentro de una etiqueta HTML utilizando la sintaxis {contenido}. Esto es útil si quieres generar contenido dinámico de manera rápida.

Por ejemplo, si quieres generar una lista de elementos con un texto predefinido dentro, puedes escribir:

ul>li*5{Elemento}

Esto creará una lista desordenada con 5 elementos li , los cuales tendrán dentro el texto «Elemento»:

  <ul>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento</li>
  </ul>

Usando la variable $ para mostrar el número de elemento

La variable $ es muy útil cuando necesitas generar un número correlativo dentro de una abreviatura. La variable $ muestra el número de elemento empezando por 1.

Por ejemplo, si quieres generar una lista de enlaces con un número correlativo, puedes escribir:

ul>li*5{Item $}

Esto genera una lista desordenada con 5 elementos li cuyo contenido será «Item X» donde X representa el número del elemento, empezando por 1.

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

Variables Personalizadas

Puedes agregar variables personalizadas a Emmet y utilizarlas con el formato: ${variable} , para ello debes ingresar a la configuración del visual studio code, y buscar «Emmet: Variables»

En el ejemplo de la imágen, agregamos la variable «pais» con el valor «México», para usarla escribimos:

ul>li*3{¡Viva ${pais}!}

Esto nos generará una lista de 3 elementos, que dicen «¡Viva México!«

  <ul>
    <li>¡Viva México!</li>
    <li>¡Viva México!</li>
    <li>¡Viva México!</li>
  </ul>

¡Espero que esta introducción a Emmet te haya sido útil y te haya inspirado a utilizar esta herramienta poderosa y eficiente en tus proyectos de desarrollo web! Recuerda que Emmet te permite escribir código HTML y CSS de manera más rápida y eficiente utilizando abreviaturas intuitivas y fáciles de recordar.

Si deseas conocer más acerca de Emmet y cómo puedes utilizarlo en tus proyectos, te recomiendo que consultes la documentación oficial de Emmet. Allí encontrarás información detallada acerca de todas las características y funcionalidades de esta herramienta, así como tutoriales y ejemplos para ayudarte a empezar.

¡Aquí te dejo los enlaces a la documentación oficial de Emmet para que puedas explorar más acerca de esta herramienta!

Salir de la versión móvil