Multiplica tu velocidad en Visual Studio Code utilizando Emmet

#herramientas #emmet #productividad #visualstudiocode

¿Qué es Emmet?

Emmet es un pequeño pero potente lenguaje de autocompletado de código que está disponible en prácticamente todos los editores que existen. ¡Incluso hay un plugin para usarlo en WordPress!

En Visual Studio Code, Emmet viene instalado por defecto, así que para usarlo sólo tenemos que aprender su sencilla sintáxis.

Para mi uno de los usos más interesantes que tiene es el de autocompletado de HTML y puede usarse para autocompletar etiquetas a medida que las vamos escribiendo o para formatear texto ya existente. También vale para CSS .

Imagina que un cliente te pasa todo el texto para colocar en su web en un fichero de Word, algo bastante típico ¿no?. Tienes dos opciones:

Intentar copiar el texto con el formato enriquecido que trae Word
Copiar el texto y pegarlo en un editor de texto plano

En la primera opción puede que consigas traerte los títulos, las negritas y quizás alguna lista. Pero puede que los títulos no vengan con las etiquetas que tu necesitas y que el resto venga todo infectado con etiquetas inútiles tipo span, div, etc.

La segunda opción parece que supone más trabajo: poner todas las etiquetas a mano, e irlas cerrando y abriendo correctamente es una lata. Pero vas a controlar mejor tu trabajo y además puedes acelerarlo de una manera brutal utilizando Emmet.

Emmet para generar nuevo contenido

En muchas ocasiones tendrás que escribir código HTML a pelo, partiendo desde cero, es una lata tener que abrir etiquetas, escribir texto, cerrarlas, etc. Con Emmet escribir HTML se convierte en un placer.

Creo que es más fácil aprender Emmet empezando con un documento en blanco, así que vamos a empezar por ahí.

Aunque puedes consultar toda la documentación sobre Emmet en su propia página web, te cuento aquí lo más básico y algunos trucos interesantes para que te entre el gusanillo de probarlo.

Emmet utiliza abreviaturas para ir generando elementos, en este tutorial veremos sólo HTML, aunque también se lleva muy bien con CSS. Las abreviaturas son muy sencillas, si escribes p y pulsas tabulador te va a crear las etiquetas de apertura y cierre de párrafo. Esto por si sólo no tiene demasiada gracia, pero si escribes ul>li*5 y das a tabulador te genera una lista no numerada con cinco elementos.

Prueba lo que te digo antes de seguir y ahora vemos cosas más interesantes.

Ahora vas a montar un menú de navegación en un periquete sin tener que preocuparte de abrir y cerrar etiquetas, copiar y pegar líneas, etc. Prueba con esto: ul.navbar>(li.nav>a.menuitem)*5 y pulsas tabulador, verás que te genera un código en el que sólo tienes que ir escribiendo el texto que te falta e ir usando el tabulador para terminar de rellenar toda la información.

El punto se utiliza para indicar una clase para la etiqueta que la precede, de la misma manera puedes usar la almohadilla # para crear un id. Cómo ves la sintáxis viene heredada de CSS así que te saldrá de manera muy natural.

Por cierto cuando Visual Studio Code detecta que estás usando Emmet te sale un pequeño círculo con una i para que puedas ver como va a quedar tu código, es muy útil hasta que domines el lenguaje para no tener que estar borrando todo el tiempo código fallido.

Teclea html:5 y dale al tabulador.
Introduce form>(label>input:text)*4 y tendrás un formulario con 4 campos con etiquetas, clases, etc.
Teclea p*5>lorem y tendrás cinco párrafos de texto para rellenar tus diseños de prueba.

Los ejemplos serían infinitos, te invito a probar por ti mismo e ir consultando la documentación de Emmet cuando tengas alguna duda. Te animo a intentar escribir una tabla de 10 filas por 5 columnas, o a escribir 3 parráfos cada uno con su correspondiente cabecera h2

Emmet para contenido existente

Tal como te comenté al principio de este artículo, cuando mas brilla Emmet es a la hora de formatear en HTML texto plano al que tienes que dar formato: encabezados, párrafos, listas, enlaces, negritas, etc.

Lo primero que te recomiendo es activar dos atajos de teclado para poder llamar a Emmet desde Visual Studio Code sin tener que tirar de ratón. Para ello ve al menú Preferencias y luego Métodos abreviados de teclado , ahora teclea “Encapsular” en el buscador de comandos y te aparecen dos entradas:

Encapsular con abreviatura
Encapsular las líneas individuales con abreviatura

Asigna una combinación de teclas abreviadas a cada una de ellas (yo he usado Comando+M y ALt+Comando+M en el Mac porque las combinaciones con “E” ya están cogidas para las búsquedas Ahora abre un texto plano que tengas que formatear, o mejor, para seguir bien el ejemplo, teclea primero:

lorem6+lorem2+lorem5*5

y luego pulsas el tabulador.

Y ahora vamos a aplicarle formato utilizando Emmet:

Selecciona la primera línea, usa tu atajo para “Encapsular con abreviatura” y escribe h2 y pulsas Intro.
Selecciona los dos párrafos siguientes, usa el atajo de nuevo y escribe p* (más Intro, claro). Esto asigna un párrafo por cada salto de línea que encuentra (si no pones el asterisco te lo coloca todo en un sólo párrafo).
Ahora selecciona una pálabra cualquiera del texto, haciendo doble clic sobre ella y utiliza el otro atajo para poner una negrita (usando b o strong )
Elige y selecciona dos o tres palabras seguidas y con el mismo atajo teclea a para crear un enlace.
Ahora ve a por las 5 líneas más cortas, selecciona con el primer atajo y escribe ul>li*

Puede que te resulte un poquillo engorroso al principio, pero recuerda que puedes usar todas las etiquetas de HTML, definir clases o identificadores para las etiquetas que lo necesiten e incluso puedes definir tus propios snippets personalizados para estructuras que uses con frecuencia, al estilo de html:5

Si tienes alguna duda o descubres alguna combinación chula de Emmet me encantaría que dejaras un comentario más abajo.

Referencias

Si quieres seguir aprendiendo sobre el tema te dejo algunas de las referencias en que me he basado para escribir este artículo o que me han parecido interesantes. La primera es la propia documentación oficial de Emmet.