TOP plugins o extensiones de VSCode

Cómo añadir plugins

Los plugins o extensiones se pueden instalar desde el Visual Studio Marketplace o desde la opción “Administrar extensiones” en VSCode.

Desde el marketplace, lo que tenemos que hacer es seleccionar la extensión que nos interesa y pulsar el botón de “Download”. Esto descargará el archivo en nuestro equipo. Después, nos dirigiremos a la pestaña de “Extensiones” en VSCode. Arriba a la derecha, justo encima del buscador, encontramos un icono con tres puntos. Haciendo click encima de él, nos ofrecerá un desplegable con varias opciones, entre las que se encuentra “Instalar desde VSIX…” . Nos permitirá ver los archivos de nuestro equipo y seleccionar el archivo que hemos descargado desde el marketplace.

Si preferimos instalar desde Visual Studio, tenemos que dirigirnos a la pestaña de “Extensiones”, y dentro, “Administrar extensiones”. Ahí, podemos echar un vistazo o buscar la que queramos. Una vez escogida la extensión, seleccionamos “Descargar” e instalamos.

Código

• Prettier: sirve para formatear el código, especialmente cuando hay más de una persona trabajando en el mismo proyecto. Esto provee al mismo de un estilo coherente.
• Bracket Pair Colorizer 2: hace que los corchetes, paréntesis y llaves de apertura y cerrado sean del mismo color, haciendo más fácil saber cuáles van juntos.
• Auto Rename Tag: renombra automáticamente las etiquetas que vas cambiando. Funciona con HTML, XML, PHP y JavaScript.
• Code Spell Checker: sirve para corregir todas las faltas de ortografía del código.
• Bookmarks: permite añadir pequeños marcadores al código, para hacer más sencilla la navegación.
• Auto Close Tag: añade a VSCode la función de soporte de etiqueta cerrada.
• Beautify: su función consiste en indentar código. Es apto para CSS, HTML, JavaSCript, SASS y JSON.
• Quokka: herramienta de depuración que va dándote feedback a tiempo real acerca del código en el que trabajas.
• Polacode: permite tomar pequeñas instantáneas o “polaroids” del código. Se selecciona la parte del código que se quiera y se crea de forma automática un archivo de código formateado.
• Better Comments: permite que resaltes tus comentarios y dividirlos en distintos tipos de notas.
• Markdownlint: permite formatear inconsistencias del lenguaje del markdown.
• MinifyAll: permite minificar código y optimizar el peso de los archivos. Normalmente su objetivo es mejorar la velocidad de carga.
• Change Case: herramienta de transformación de texto del código.

Diseño

• CSS Peek: hace que sea posible extender los archivos HTML para mostrar el código CSS/SCSS/LESS en el propio código fuente.
• Colorize: hace que se visualicen de forma instantánea los colores CSS en los archivos de estilo.
• Color Info: proporciona información acerca de los colores utilizados en un archivo CSS.
• SVG Viewer: agrega varias herramientas para trabajar con archivos SVG en VSCode.
• Live SASS Compiler: permite revisar los cambios en un output visual.
• HTML CSS Support: tipo de Intellisense centrado en HTML y CSS.
• Live HTML Previewer: hace que se puedan ver los cambios en los archivos HTML en VSCode.
• CanIUse: prueba la compatibilidad de un sitio con HTML5, CSS3, SVG, y la nueva API de New JS.

Programación

• JS Code Snippets: añade una selección de funciones extra a JS IntelliSense.
• Regex Previewer: hace que aparezca un documento al lado del que está utilizando la Regex para mostrarte qué coincide con ella.
• JSON to TS: automatiza el proceso de convertir un objeto JSON en una interfaz TS.
• Path Intellisense: sirve para encontrar la ruta de un determinado fichero.
• Faker: sirve para insertar datos de ejemplo de forma ágil.
• HTML Boilerplate: crea una plantilla automática de HTML en todos los nuevos documentos con esta extensión.
• ESLint: arregla problemas en el código JavaScript.

Accesos y versionado

• Remote -SSH: permite utilizar cualquier máquina remota con un servidor SSH como tu entorno de desarrollo en VSCode.
• GitLens: mejora las capacidades de Git en VSCode. Por ejemplo, permite ver quién, por qué, y cuántas líneas de código han cambiado a lo largo del tiempo.
• Git History: su función principal es proporcionar información visual del log de Git.
• Code Runner: permite ejecutar una determinada parte del proyecto sin ejecutarlo entero.
• Remote Development: hace que se pueda desarrollar de forma remota.

Sincronización

• Settings Sync: permite sincronizar prácticamente todo lo que haces en VSCode con GitHub, desde shortcuts hasta extensiones.
• Live Server: genera un servidor local con carga en tiempo real, para comprobar páginas estáticas y dinámicas.
• Open-In-Browser: interfaz integrada para abrir archivos directamente desde el navegador.
• Docker Explorer: hace que VSCode se conecte directamente con el Azure Container Registry.

Errores

• Turbo Console Log: automatiza el proceso de creación de un log de mensajes coherentes, haciendo que debuggear sea mucho más fácil.
• TODO Highlight: sirve para hacer que los TODO o listas de tareas (como arreglar un problema del código posteriormente) resalten en VSCode.
• Debugger for Chrome: permite debuggear el código de JavaScript en VSCode.
• Debugger for Firefox: misma herramienta que la anterior, pero con el protocolo de depuración de Firefox.

Productividad

• GraphQL: integra el ecosistema GraphQL con VSCode.
• Tabnine: se trata de una IA que te ayuda a escribir código más rápido.
• Code Time: permite registrar el tiempo que se pasa trabajando con código.
• Task Explorer: extiende la barra de tareas y/o el explorador, y al mismo tiempo permite ejecutar tareas.

Personalización

• Peacock: permite cambiar el color del entorno de VSCode.
• Material Icon Theme: permite tener una interfaz limpia y minimalista en VSCode.

Iconos

• Icon Fonts: ofrece diferentes snippets para una amplia variedad de fuentes de iconos, incluido Font Awesome.
• VSCode-icons: añade un poco de color e iconos a VSCode.

¿Y tú, nos recomiendas alguna?