¿Quieres descubrir las mejores extensiones para Visual Studio Code? Si te encuentras inmerso en el basto y profundo universo de la programación web es muy probable que cuentes con un editor favorito. Por eso, hoy te queremos recomendar una serie de extensiones, que si bien es cierto que algunas de ellas existen en otros editores, funcionan a las mil maravillas en Visual Studio Code de Microsoft. ¡Vamos allá!
Visual Studio Code se ha ganado a pulso una plaza en primera línea del software elegido por la mayoría de programadores web en la actualidad. Esto supone un hito, ya que parecía bastante complicado arrebatar el podio a editores como Sublime Text.
El editor de código gratuito de Microsoft cuenta con un rendimiento óptimo, es multiplataforma y posee una gran comunidad de desarrolladores que depuran sin parar cualquier error que podamos sufrir.
No obstante, pese a todos estos argumentos, el que quizá pueda ser su mayor atractivo es sin duda su enorme y variado marketplace. Una extensa galería de plugins y extensiones para optimizar y personalizar la experiencia con el editor. Y es que, aunque la propia Microsoft ha ido adoptando muchas de estas funcionalidades como propias, aún queda un amplio margen de mejora.
Índice de contenidos
Nuestra selección de las mejores extensiones para Visual Studio Code
En este artículo hemos seleccionado las extensiones que consideramos más útiles y funcionales para el día a día junto a Visual Studio Code. Por supuesto, al margen de opiniones y preferencias personales, existen alternativas a casi cada una de las extensiones aquí listadas.
En cualquier caso, te invitamos a probar cada una de ellas. Al fin y al cabo, son totalmente gratuitas y si no te convencen, bastará con un solo clic para desinstalarlas.
Open in browser
Aún hay quien echa de menos en Visual Studio Code la opción, que otros editores sí ofrecían de manera predeterminada, de abrir los archivos que nos encontremos editando en un navegador.
Gracias a esta extensión, Visual Studio Code se actualizará con una opción en forma de menú contextual en la que podremos definir el navegador con el que queremos que se abra nuestro archivo. Además, cuenta con un útil atajo de teclado.
CSS Peek
Similar a la famosa extensión Brackets, CSS Peek identifica las clases e IDs de nuestro código HTML y nos ofrece un menú contextual en el que podemos ver un extracto de los estilos CSS de dichas clases e IDs. Además, si lo deseamos, con tan solo un clic, localizará en nuestra hoja de estilos la clase o ID en cuestión para poder modificarlo de manera rápida y sencilla.
Prettier
Muy similar a la famosa extensión Beautify. Gracias a esta famosa extensión, podrás darle un formato unificado y ordenado a tu código. Ofrece indentación automática, espaciados y ordenación de comentarios de manera rápida y sencilla.
En definitiva, una útil herramienta que acabarás empleando de manera muy recurrente. Te aseguramos que su atajo de teclado quedará grabado a fuego en tu memoria.
Color info
A veces, las cosas más sencillas suponen los mayores cambios, y es el caso de esta sencilla extensión. «Color info» permite visualizar con tan solo un vistazo la información relativa a un color específico en CSS, así como sus equivalentes en sus distintos formatos (hexadecimal, rgb, cmyk, etc.). Además, la extensión muestra de manera más visual el acabado del color seleccionado.
SVG
El uso de imágenes en formato SVG ha ganado popularidad en los últimos años. La posibilidad de mostrar imágenes e iconos vectoriales, fácilmente adaptables y modificables, con el menor peso posible, es un argumento difícil de rebatir.
Esta extensión permite gestionar nuestros SVG desde el mismo Visual Studio Code: desde el «path» o trazo, hasta el color o la escala. Una vez la pruebes, no podrás vivir sin ella. Además, permite «minificar» nuestro SVG para que el código ocupe lo menos posible.
Vscode-icons
Cuando se trabaja con varios tipos de archivos es fácil equivocarse a la hora de abrir el que necesitamos en ese preciso instante, debido a sus iconos tan parecidos entre sí.
Gracias a esta sencilla extensión, cada formato adquiere un icono personalizado que nos ayudará a distinguir los archivos con los que deseemos trabajar. De esta manera, se agiliza la manera de trabajar en Visual Studio Code.
JS & CSS Minifier (Minify)
En la actualidad, la lucha por optimización de recursos y SEO, obliga a los desarrolladores a optimizar los tiempos de carga. Esto supone, en la mayoría de casos, la «minificación» del código para comprimirlo cuanto sea posible. No te preocupes, gracias a este útil plugin, podrás comprimir tu código con tan solo un clic.
Adquirir JS & CSS Minifier (Minify).
TODO Highlight
Como su propio nombre indica (del inglés «to do», o por hacer), esta extensión permite anotar tareas o secciones por completar en nuestro código.
Como si de un rotulador para subrayados se tratase, el plugin nos permite marcar en nuestro código a modo de anotaciones en colores de alto contraste las zonas a destacar.
Can I Use
Uno de los mayores quebraderos de cabeza a los que se enfrenta a diario cualquier programador es la compatibilidad con determinados navegadores. Esto se debe principalmente a que no todos cuentan con soporte para las mismas funcionalidades.
Para salir de duda, esta extensión nos permite consultar de manera rápida y sencilla la compatibilidad de nuestro código con diversas versiones de los navegadores más famosos.
PHP Intelephense
La alternativa al famoso PHP InteliSense, permite trabajar con PHP de manera mucho más fácil e intuitiva gracias a una serie de útiles atajos y ayudas, como búsquedas de símbolos y avisos informativos.
Conclusión
Como puedes comprobar, además de la amplia variedad de extensiones para Visual Studio Code existentes, tenemos a disposición alternativas similares a cada una de ellas. Además, como se ha podido comprobar en el paso, es cuestión de tiempo que la propia Microsoft acabe implementando las funcionalidades más útiles de estas extensiones de manera predeterminada en el mismo Visual Studio Code.
Esperamos que nuestro artículo haya resultado de tu interés. No dudes en dejarnos un comentario contándonos tus impresiones sobre alguna de las extensiones de Visual Studio Code que hemos listado. O si lo prefieres, puedes aportar un enlace a tu extensión favorita para que la descubramos.
Por último, queremos recordarte que si quieres aprender a desarrollar webs, siempre puedes contar con nuestros cursos y formaciones de diseño web.
¡Hasta el próximo artículo!