VS Code es el editor de código más usado del mundo por una razón: su ecosistema de extensiones lo convierte en una herramienta increíblemente potente. En este artículo te presento las 10 mejores extensiones de VS Code que uso cada día como desarrollador web y que marcan una diferencia real en la productividad.

1. Prettier — Formateador de código automático

Prettier es probablemente la extensión más importante de esta lista. Formatea tu código automáticamente cada vez que guardas el archivo, siguiendo unas reglas consistentes de estilo. Se acabaron las discusiones sobre si usar comillas simples o dobles, o cuántos espacios de indentación.

Funciona con JavaScript, TypeScript, HTML, CSS, JSON y muchos otros lenguajes. Una vez que lo usas, no puedes vivir sin él.

Cómo instalarlo: busca «Prettier – Code formatter» en el panel de extensiones de VS Code.

2. ESLint — Detecta errores en tu JavaScript

ESLint analiza tu código JavaScript y TypeScript en tiempo real, marcando errores y malas prácticas antes de que ejecutes el código. Es como tener un revisor de código permanente que te avisa cuando estás a punto de cometer un error.

Se integra perfectamente con Prettier para que el formateo y el análisis de calidad trabajen juntos.

Cómo instalarlo: busca «ESLint» en extensiones. Es la extensión oficial de Microsoft.

3. GitLens — Superpoderes para Git

GitLens añade información de Git directamente en el editor. Puedes ver quién modificó cada línea de código, cuándo y en qué commit, sin salir de VS Code. También muestra el historial completo de un archivo y permite comparar versiones.

Si trabajas en equipo o en proyectos con historial largo, GitLens es imprescindible.

Cómo instalarlo: busca «GitLens — Git supercharged».

4. Auto Rename Tag — Renombra etiquetas HTML automáticamente

Si cambias el nombre de una etiqueta HTML de apertura, Auto Rename Tag cambia automáticamente la etiqueta de cierre correspondiente. Algo tan simple que ahorra cientos de errores al día cuando trabajas con HTML o con componentes de Angular y React.

Cómo instalarlo: busca «Auto Rename Tag».

5. Path Intellisense — Autocompletado de rutas de archivo

Cuando escribes una ruta de archivo en tu código (imports, src de imágenes, etc.), Path Intellisense te muestra sugerencias de autocompletado con los archivos y carpetas disponibles. Evita errores de ruta y acelera mucho la escritura de imports.

Cómo instalarlo: busca «Path Intellisense».

6. Thunder Client — Prueba APIs directamente en VS Code

Thunder Client es una alternativa ligera a Postman que funciona directamente dentro de VS Code. Puedes hacer peticiones HTTP a tus APIs, ver las respuestas en JSON, gestionar colecciones de peticiones y guardar variables de entorno, todo sin salir del editor.

Si desarrollas backends o consumes APIs, esta extensión te ahorrará cambiar constantemente de ventana.

Cómo instalarlo: busca «Thunder Client».

7. Live Server — Recarga automática del navegador

Live Server lanza un servidor local y recarga el navegador automáticamente cada vez que guardas un archivo. Imprescindible cuando trabajas con HTML, CSS y JavaScript puro sin un framework que ya incluya esta funcionalidad.

Con un solo clic tienes tu página abierta en el navegador y cada cambio que haces se refleja al instante.

Cómo instalarlo: busca «Live Server» de Ritwick Dey.

8. Angular Language Service — Soporte completo para Angular

Si trabajas con Angular, esta extensión es obligatoria. Añade autocompletado inteligente en las plantillas HTML de Angular, detección de errores en tiempo real, navegación a definiciones y mucho más. Hace que trabajar con Angular en VS Code sea una experiencia mucho más fluida.

Cómo instalarlo: busca «Angular Language Service». Es la extensión oficial del equipo de Angular.

9. Error Lens — Errores visibles en la línea de código

Error Lens muestra los errores y advertencias directamente en la línea de código donde ocurren, en lugar de solo subrayarlos. Ves el mensaje de error sin tener que pasar el ratón por encima, lo que hace la depuración mucho más rápida.

Cómo instalarlo: busca «Error Lens».

10. Material Icon Theme — Iconos para tus archivos y carpetas

No mejora directamente tu código, pero sí tu experiencia visual. Material Icon Theme añade iconos coloridos y descriptivos a cada tipo de archivo y carpeta en el explorador de VS Code. De un vistazo puedes distinguir archivos TypeScript, componentes Angular, archivos de configuración, etc.

Cómo instalarlo: busca «Material Icon Theme».

Bonus: cómo instalar extensiones en VS Code

Si eres nuevo en VS Code, instalar extensiones es muy sencillo:

  1. Abre VS Code
  2. Pulsa Ctrl + Shift + X (o Cmd + Shift + X en Mac) para abrir el panel de extensiones
  3. Busca el nombre de la extensión
  4. Haz clic en Instalar

Algunas extensiones requieren configuración adicional. Prettier y ESLint, por ejemplo, necesitan un archivo de configuración en tu proyecto para funcionar correctamente. En futuros artículos veremos cómo configurarlos desde cero.

¿Cuáles instalar primero?

Si acabas de instalar VS Code y no sabes por dónde empezar, estas son las tres que deberías instalar antes que nada:

El resto las irás añadiendo según las vayas necesitando. No sobrecargues VS Code con extensiones que no usas — cada extensión consume memoria y puede ralentizar el editor.