26/5/2019 10 plugins imprescindibles para Visual Studio Code. Programación en Castellano.

(/)

Conéctate (/login) o Regístrate (/registro)

Inicio (/) Artículos (/articulos) 10 plugins imprescindibles para Visual Studio Code (/articulo/10_plugins_imprescindibles_para_visual_studio_code_1848)

10 plugins imprescindibles para Visual Studio Code

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 (https://marketplace.visualstudio.com/items?
itemName=coderfee.open-html-in-browser)

https://programacion.net/articulo/10_plugins_imprescindibles_para_visual_studio_code_1848 1/5
26/5/2019 10 plugins imprescindibles para Visual Studio Code. Programación en Castellano.

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 (https://quokkajs.com/)
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 (https://marketplace.visualstudio.com/items?
itemName=deerawan.vscode-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 (https://marketplace.visualstudio.com/items?

itemName=pranaygp.vscode-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 (../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.

https://programacion.net/articulo/10_plugins_imprescindibles_para_visual_studio_code_1848 2/5
26/5/2019 10 plugins imprescindibles para Visual Studio Code. Programación en Castellano.

Prettier (https://marketplace.visualstudio.com/items?
itemName=esbenp.prettier-vscode)
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 (https://marketplace.visualstudio.com/items?

itemName=bierner.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 (https://marketplace.visualstudio.com/items?

itemName=cssho.vscode-svgviewer)
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 (https://marketplace.visualstudio.com/items?

itemName=idleberg.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 (https://marketplace.visualstudio.com/items?
itemName=HookyQR.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 (https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-

studio-code)

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO

COMPARTIR EN FACEBOOK

https://programacion.net/articulo/10_plugins_imprescindibles_para_visual_studio_code_1848 3/5
26/5/2019 10 plugins imprescindibles para Visual Studio Code. Programación en Castellano.

COMPARTIR EN TWITTER

COMPARTIR EN GOOGLE +

ARTÍCULO ANTERIOR SIGUIENTE ARTÍCULO

Enviar email mediante un servidor SMTP en WordPress Cómo conocer quién está online en PHP
(/articulo/enviar_email_mediante_un_servidor_smtp_en_wordpress_1847)
(/articulo/como_conocer_quien_esta_online_en_php_1849)

¡SÉ EL PRIMERO EN COMENTAR!

Conéctate (/login) o Regístrate (/registro) para dejar tu comentario.

Secciones
Artículos (/articulos)
Tutoriales y código fuente (/codigos)
Foros (/foros)
Eventos (/eventos)
Empleo (/empleo)
Lenguajes Destacados
PHP (/php)
Java (/java)
ASP (/asp)
Bases de datos (/bases-de-datos)
C (/c)
Información
Datos Legales (/datos_legales)
Política de privacidad (/politica_de_privacidad)
Publicidad (/publicidad)
Contacto
Contacte con nosotros (/contacto)
Publicidad (/publicidad)

(https://www.facebook.com/programacionencastellano) (https://twitter.com/noprog)

Diseño web y desarrollo web (https://colorvivo.com). Un proyecto de los hermanos Carrero (https://carrero.es).

Alojado en cloud privado Stackscale (https://www.stackscale.es/)

Más internet: Password (https://password.es) | Crear tu Favicon (https://getfavicon.com) | material para manualidades
(https://conideade.com)

Copyright © 1998-2019 Programación en Castellano. Todos los derechos reservados

https://programacion.net/articulo/10_plugins_imprescindibles_para_visual_studio_code_1848 4/5
26/5/2019 10 plugins imprescindibles para Visual Studio Code. Programación en Castellano.

https://programacion.net/articulo/10_plugins_imprescindibles_para_visual_studio_code_1848 5/5