Ya he dicho en repetidas ocasiones que, aunque cuando lo lanzaron yo era un escéptico, desde hace ya mucho tiempo Visual Studio Code se ha convertido en mi editor de código favorito. Lo uso a todas horas y no solo para escribir código, sino también para documentación con Markdown, como cliente de Git, etc... Quitando aplicaciones web, es quizá la aplicación que más utilizo en mis equipos.

 A la hora de escribir código, ofrece multitud de ayudas. Pero una cosa de la que carece aparentemente y se echa de menos es la posibilidad de rodear una selección con etiquetas en HTML.

Por ejemplo, si tienes uno o varios elementos de lista <li> y necesitas rodearlos del preceptivo <ul> o <ol> ¿cómo lo puedes hacer?

Pues, aparentemente lo único que puedes hacer es escribir la etiqueta delante, y luego arrastrar la de cierre hacia atrás con el cursor:

Rodeando a mano un fragmento

Un trabajo tedioso y poco productivo. Y además si tenemos que incluir varias etiquetas con atributos, perjudica más que ayuda el hecho de que cierre las etiquetas automáticamente :-S

La verdad es que se echa de menos la facilidad que tiene para eso Visual Studio y que comenté hace poco en la serie que estuve haciendo de trucos para este IDE en campusMVP.

¡Tiene que haber una forma mejor de lograrlo!

Lo cierto es que la hay...

Rodeando contenido a partir de Emmet

Hace ya tiempo os contaba en el blog de campusMVP de qué manera se podía escribir código HTML a toda velocidad, ahorrando muchísimo tiempo gracias a la utilización de una técnica llamada ZenCoding o, más recientemente, Emmet.

Si el editor que usemos lo soporta, con Emmet podemos escribir algo como esto:

#pie>ul>li{Texto $}*3

y obtener automáticamente un div con el identificador "pie" y una lista no ordenada con tres elementos con textos diferentes numerados. Podemos verlo en acción en Visual Studio Code, con vista previa del código resultante incluida antes de crearlo pulsando "Enter" (Return):

Rodeando a mano un fragmento

De esta manera podemos construir cualquier código HTML de manera muy rápida.

Bien, ¿Y qué tiene esto que ver con lo de rodear contenido con HTML en Visual Studio Code?

Bueno, VSCode tiene una funcionalidad integrada que se denomina "Emmet: wrap individual lines with Abbreviation" que sirve para envolver una selección que le pasemos con las etiquetas resultantes de la abreviatura Emmet que le indiquemos.

Esta funcionalidad tan útil no tiene tecla rápida por lo que hay que pulsar F1 (o CTRL+SHIFT+P en Windows/Linux o COMMAND+SHIFT+P en Mac) y escribir "Emmet" para que nos la sugiera. Yo, como la uso mucho, le tengo definida una tecla rápida (ALT+W) que me permite hacerlo a toda velocidad.

Bien, pues con esta funcionalidad, si seleccionamos un fragmento de código HTML cualquiera (unas palabras, una línea o varias), podemos escribir Emmet para los elementos con los que queramos rodearlo y funcionará perfectamente:

Rodeando a mano un fragmento

Es súper-útil. Al menos yo lo uso constantemente 😊

Una última nota: aunque existen varios plugins de VSCode que dicen hacer lo mismo, lo cierto es que funcionan todos bastante mal o de manera muy limitada, por lo que esta que os acabo de contar me parece la mejor solución.

¡Espero que te parezca útil!

Escrito por un humano, no por una IA