6 ventajas de usar Emmet en VS Code

Contenido del Bootcamp Dirigido por: | Última modificación: 2 de agosto de 2024 | Tiempo de Lectura: 2 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Las ventajas de usar Emmet son inmensas; entre muchas otras, agiliza tu proceso de escritura de código y destaca en el desarrollo web. ¿Te has fijado alguna vez en que al escribir código, especialmente HTML y CSS, a veces parece que estás haciendo un trabajo de copia y pega infinito?

Es más, puede que hayas pensado que debe haber una forma más rápida de hacerlo. La buena noticia es que sí la hay y se llama Emmet. Si eres un amante de Visual Studio, este artículo te interesa.

Ventajas de usar Emmet

Emmet es un plugin increíblemente útil que te permite escribir HTML y CSS de manera más eficiente. Pero ¿cómo?

ventajas de usar Emmet

Agiliza tu escritura de código

Una de las grandes ventajas de usar Emmet es que te permite escribir un mínimo de código y obtener un máximo de resultado. Significa que ya no tienes que teclear cada etiqueta individualmente, sino que Emmet lo hace por ti. Es algo así como tu asistente personal de desarrollo web.

nav>ul>li

Esto es Emmet. Escribe esa línea, presiona TAB y ya ienes un nav con una lista dentro.

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

Autocompletado

autocompletado de código

Al igual que sucede con la mayoría de editores de texto, Emmet te proporciona autocompletado. Pero no estamos hablando de un autocompletado cualquiera, sino de uno muy mejorado.

h1{Hola mundo}

Esto se convierte en:

<h1>Hola mundo</h1>

Relleno automático

¿Sabías que Emmet te permite generar texto lorem de manera automática? Solo tienes que escribir lorem, pulsar TAB y listo, un texto de prueba para que maquetes a gusto.

p>lorem

Así obtienes:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Soporte para CSS

Emmet también funciona para CSS. Imagina poder escribir tus selectores de CSS de una manera mucho más rápida. Emmet lo hace posible.

Multiplicación y agrupación

Quizás te estés preguntando qué sucede si necesitas múltiples elementos al mismo nivel. Pues Emmet también tiene la solución. Con el operador * puedes multiplicar elementos y con el operador () puedes agruparlos.

ul>li*5

Con eso, obtendrás cinco elementos li dentro de un ul.

Personalizable

Lo mejor de todo es que Emmet se puede personalizar según tus necesidades. En la documentación de Emmet, encontrarás toda la información.

Emmet es una herramienta imprescindible en tu kit de desarrollo web. ¿Y dónde puedes aprender más sobre Emmet y otras herramientas esenciales? Pues en el Desarrollo Web Full Stack Bootcamp de KeepCoding. Te enseñaremos las habilidades más demandadas del sector IT de la manera más eficiente posible. ¡Entra y descubre cómo especializarte en pocos meses!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado