Visual Studio Code es un editor de texto gratuito y multiplataforma desarrollado por Microsoft. Se está convirtiendo en el favorito de mucha gente debido a su excelente rendimiento y a la gran cantidad de características que ofrece.
Al igual que la mayoría de IDEs, VSCode cuenta con un extenso marketplace que contiene miles de plugins de distinta calidad. Para ayudarte a elegir los que merece la pena descargar, hemos hecho esta colección de los plugins que hemos encontrado más útiles y divertidos.
Open-In-Browser
VSCode no cuenta con ninguna interfaz integrada para abrir archivos directamente desde el navegador. Esta extensión agrega una opción llamada Abrir con el navegador por defecto al menú contextual, así como atajos de teclado para abrir en el navegador que prefieras (Firefox, Chrome, Edge).
Quokka
Quokka es una herramienta de depuración que te da feedback en vivo sobre el código que estás escribiendo. Muestra previews de los resultados de las funciones y los valores calculados de las variables. La extensión es fácil de configurar y funciona out of the box con proyectos JSX y TypeScript.
Faker
Inserta rápidamente datos de ejemplo utilizando la popular librería Faker de Javascript. Puedes generar nombres aleatorios, direcciones, imágenes, números de teléfono y solo párrafos del clásico Lorem Ipsum. Cada categoría cuenta con varias subcategorías para hacer que los datos se adapten a tus necesidades.
CSS Peek
Esta extensión puede rastrear las definiciones de clases e ids CSS en tus hojas de estilo. Al hacer clic con el botón derecho en uno de los selectores que integren tus archivos HTML, y después seleccionado Go to Definition y Definition Peek, enviarás al código CSS en el que los hayas diseñado.
HTML Boilerplate
La extensión HTML Boilerplate te ahorrará el tener que escribir las etiquetas de head y body en cada nuevo documento HTML. Simplemente escribe html en un fichero vacío, pulsa la tecla Tabulador y generarás una estructura HTML totalmente limpia en dicho documento.
Prettier
Prettier es el formateador de código más popular dentro del desarrollo web en estos momentos. Permite que el código de tu equipo luzca igual, independientemente de quién lo haya escrito. Esta extensión hace posible aplicar automáticamente Prettier y formatear rápidamente documentos JS y CSS completos.
Color Info
Pequeño plugin que te proporciona información variada sobre los colores que has usado en tu CSS. Al posarte sobre un color puedes ver, a través de una preview más grande, cómo se ve, así como información acerca de su traducción a todos los formatos (hex, rgb, hsl y cmyk).
SVG Viewer
Esta extensión agrega una serie de utilidades para trabajar con SVGs en Visual Studio Code. Hace posible renderizar archivos SVG y ver cómo se ven sin tener que salir del editor. También hay opciones para convertir a PNG y generar esquemas URI de datos.
Icon Fonts
Pequeños snippets para incluir fuentes de iconos en tu proyecto (desde un CDN). La extensión admite más de 20 sets de iconos muy populares, incluyendo Font Awesome, Ionicons, Glyphicons y Material Design Icons.
Minify
Extensión para minimizar tu código. Ofrece un montón de opciones de personalización, incluyendo la opción de minimizar automáticamente al guardar y exportarlo a un archivo .min. Minify funciona con JavaScript, CSS y HTML a través de uglify-js, clean-css y html-minifier, respectivamente.
Fuente: tutorialzine.com