MENÚ - JASoft: JM Alarcón

TRUCO: Rodear un fragmento de código con etiquetas HTML en Visual Studio Code

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:

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):

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.Aqua Terra 38mm Chronometer Reloj 150mMaster Femeninos EDWIH29Y

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:

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!

White 71 Adidas 00 Whiteoff Hypersleek Desde Whitecrystal Ftwr eI9WED2bHYJosé Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".

Publicaciones relacionadas

Cómo pasarse de iPhone a Windows Phone[[ ACTUALIZADO EL 23/8/2014 – Ediciones y añadidos marcados sobre el original ]] Puedes leerlo sin l...Windows Phone: ¿una alternativa real a iPhone y Android?NOTA: Este post es una actualización completa de otro que escribí hace un año y medio cuando me pasé...Migrando de iPad a un tablet con Windows 8 (Parte II)Ayer os contaba los principales motivos por los que había decidido jubilar mi iPad de primera genera...

Agregar comentario

Aqua Terra 38mm Chronometer Reloj 150mMaster Femeninos EDWIH29Y