Si programas a diario, sabrás que tener el editor bien afinado marca la diferencia entre un dÃa productivo y un festival de frustraciones. Visual Studio Code se ha convertido en el editor de referencia gracias a su rendimiento, su sistema de extensiones y a una comunidad enorme que no para de crear nuevas herramientas.
La magia real de VS Code no está solo en el editor base, sino en su ecosistema. Cientos de extensiones añaden autocompletado avanzado, linters, temas, servidores locales, depuración, iconos, integración con Git, IA y mucho más. En esta guÃa vas a encontrar una recopilación muy completa de extensiones recomendadas: desde las imprescindibles para cualquier lenguaje, hasta las especÃficas para JavaScript, Python, PHP, HTML/CSS, TypeScript y el trabajo diario con Git, Docker o Markdown.
Qué es VS Code y por qué sus extensiones son tan importantes
Visual Studio Code es un editor de código gratuito y multiplataforma creado por Microsoft, disponible para Windows, macOS y Linux, y figura entre los mejores entornos de desarrollo.
De fábrica ya incluye caracterÃsticas muy potentes: resaltado de sintaxis, IntelliSense, depuración integrada, terminal, integración con Git y soporte básico para muchos lenguajes. Pero donde realmente despega es cuando empiezas a instalar extensiones para adaptar el entorno a tu forma de trabajar.
La arquitectura de VS Code está pensada para ser muy extensible: prácticamente cualquier aspecto del editor se puede mejorar o reemplazar, desde el sistema de depuración hasta los temas, iconos o el autocompletado para un lenguaje concreto.
Además, no hay un único VS Code: puedes usar la versión oficial o alternativas open source como VSCodium, que eliminan la telemetrÃa y ciertas partes propietarias, pero mantienen la compatibilidad con la mayorÃa de extensiones.
Cómo instalar y gestionar extensiones en VS Code
Instalar extensiones en VS Code es muy sencillo. Todo se hace desde la propia interfaz del editor, sin necesidad de bajar archivos a mano.
Para añadir nuevas funcionalidades, abre el editor y ve al panel de extensiones (icono de cuadradito en la barra lateral o atajo Ctrl+Shift+X / Cmd+Shift+X en macOS). Desde ahà busca por nombre o por palabra clave la extensión que te interese.
Cuando encuentres una extensión interesante, revisa su ficha: número de descargas, reseñas, compatibilidad y capturas de pantalla. Eso te dará una buena pista de si merece la pena instalarla o no.
Para completar el proceso, solo tienes que hacer clic en el botón de instalar. La mayorÃa de extensiones se activan al momento; algunas requieren recargar la ventana del editor, y unas pocas necesitan configuración extra (por ejemplo, las que dependen de herramientas externas como ESLint, PHP Debug con Xdebug, etc.).
Extensiones generales imprescindibles para cualquier proyecto
Hay un conjunto de extensiones que prácticamente todo el mundo deberÃa tener instaladas, sin importar el lenguaje o el stack que use. Están centradas en productividad, formato, colaboración, control de versiones y experiencia de uso.
Prettier
Prettier es el formateador de código estándar de facto en el mundo JavaScript y en muchos otros lenguajes. Se encarga de reescribir tu código siguiendo unas reglas de estilo bien definidas, de forma automática.
Es capaz de formatear JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular y bastantes más. La idea es que las discusiones sobre si poner comillas simples o dobles, punto y coma o no, dónde van las llaves, etc., desaparezcan porque todo el proyecto sigue la misma convención.
Puedes usar la configuración por defecto o crear tus reglas mediante archivos tipo .prettierrc. Lo habitual es activar el formateo al guardar, de manera que cada vez que pulses Ctrl+S el código quede limpio y coherente.
ESLint
Mientras Prettier se centra en el aspecto del código, ESLint se enfoca en la calidad y en las buenas prácticas. Es el linter más utilizado en proyectos JavaScript y TypeScript modernos.
La extensión de ESLint para VS Code hace que el análisis se ejecute en segundo plano mientras escribes. Muestra errores y advertencias directamente sobre el código, subrayando lÃneas problemáticas y ofreciendo sugerencias rápidas para corregirlas.
Puedes usar configuraciones muy extendidas como Airbnb, Standard o las recomendaciones oficiales de ESLint, o definir tus propias reglas para adaptarlas al proyecto. También es compatible con plugins para frameworks como React, Vue o Node.
Better Comments
En proyectos grandes los comentarios acaban siendo un batiburrillo difÃcil de seguir. Better Comments permite categorizar visualmente los comentarios mediante colores según el prefijo que uses.
Por ejemplo, puedes tener comentarios de tipo TODO, WARNING, IMPORTANT, QUESTION, etc., cada uno con su estilo. Esto hace que sea mucho más fácil localizar tareas pendientes, notas crÃticas o explicaciones clave al revisar el código.
Code Spell Checker
Aunque parezca un detalle menor, los errores ortográficos en nombres de variables, comentarios o textos de la interfaz quedan bastante feos. Code Spell Checker actúa como un corrector ortográfico para el código.
Analiza identificadores, strings y comentarios y marca las palabras sospechosas, ofreciendo sugerencias para corregirlas. Se puede usar con varios idiomas y es muy útil si escribes documentación o textos visibles para usuarios dentro del código.
Error Lens
VS Code ya muestra errores y warnings, pero a veces pasan desapercibidos. Error Lens los hace imposibles de ignorar mostrando la información de diagnóstico directamente al lado de la lÃnea afectada y en el margen del editor.
De un vistazo verás dónde se concentran los errores en un archivo, sin tener que abrir el panel de problemas. En proyectos grandes con muchos linters y herramientas de análisis es una ayuda brutal para no dejar nada sin revisar.
Code Runner
Si te gusta probar pequeños fragmentos de código sin montar todo un proyecto, Code Runner es muy práctico. Permite ejecutar código de múltiples lenguajes (JavaScript, Python, C, C++, Java, PHP y más) directamente desde el editor.
Puedes lanzar el archivo actual o solo el bloque seleccionado, ver la salida en un panel integrado o en el propio terminal de VS Code, y personalizar los comandos que se usan para cada lenguaje.
Path Intellisense
Cuando trabajas con muchos assets, imports y rutas relativas, escribirlas a mano es un error asegurado. Path Intellisense autocompleta rutas de archivos y carpetas mientras escribes strings con paths.
Funciona en imports de JavaScript/TypeScript, referencias CSS, rutas de imágenes en HTML y en general en cualquier contexto donde VS Code detecte que estás escribiendo una ruta. Ahorra tiempo y evita typos molestos.
vscode-icons, Material Icon Theme y otros packs de iconos
Los iconos no solo son cuestión de estética. Un buen tema de iconos permite identificar al instante el tipo de archivo con solo mirar el explorador.
vscode-icons, Material Icon Theme, VSCode Great Icons o temas especÃficos como VSCode simpler Icons with Angular aportan iconos personalizados para lenguajes, frameworks y archivos de configuración (Angular, Docker, env, etc.).
Elegir uno u otro es cuestión de gustos, pero cualquiera de ellos mejora bastante la legibilidad del árbol de archivos, sobre todo en monorepos o proyectos grandes.
GitLens
GitLens es probablemente la extensión más potente para trabajar con Git desde VS Code. Lleva el control de versiones a otro nivel integrando a fondo el histórico dentro del editor.
Permite ver quién cambió cada lÃnea y cuándo (blame), el histórico de un archivo, comparar revisiones, explorar ramas y etiquetas, y mucho más. Además, muestra anotaciones contextuales sobre el código con información del último commit.
Si trabajas en equipo, es una maravilla para entender el porqué de ciertos cambios, revisar regresiones y hacer code review sin salir del editor.
Live Share
Para pair programming o mentorÃa a distancia, Live Share es de lo mejor que existe. Permite compartir tu sesión de VS Code con otra persona en tiempo real.
Ambos podéis editar el mismo archivo, depurar juntos, compartir terminales y servidores locales e incluso abrir un chat integrado. Es perfecto para resolver bugs complicados o para enseñar a alguien cómo trabajar sobre un proyecto concreto.
Extensiones especÃficas para JavaScript y TypeScript
El ecosistema de JavaScript y TypeScript es uno de los más mimados por VS Code. Si te dedicas a frontend, backend con Node o full stack, estas extensiones te van a ahorrar muchas horas.
JavaScript (ES6) code snippets
Escribir siempre las mismas estructuras una y otra vez es un tostón. JavaScript (ES6) code snippets añade montones de snippets para sintaxis moderna de JS y TS.
Con abreviaturas cortas puedes generar funciones flecha, clases, imports, console.log, estructuras de bucle y un largo etcétera. Es ideal para memorizar menos y escribir más rápido.
npm Intellisense y extensión npm
Cuando trabajas con muchos paquetes, recordar nombres exactos no es lo más divertido. npm Intellisense autocompleta los nombres de los módulos instalados en tus imports y requires.
Por su parte, la extensión oficial de npm para VS Code se integra con tu package.json para listar y ejecutar scripts con un clic, ver dependencias, y gestionar tareas habituales sin abrir la terminal.
Import Cost
El peso del bundle en frontend importa, y mucho. Import Cost calcula el tamaño aproximado de cada import y lo muestra junto a la lÃnea correspondiente.
Asà sabes al momento si estás trayendo todo un monstruo de librerÃa para algo trivial, y puedes valorar cambios como usar imports parciales, lazy loading o alternativas más ligeras.
Quokka.js
Quokka.js funciona como un bloc de notas interactivo para JavaScript y TypeScript dentro de VS Code. Ejecuta el código a medida que lo escribes y muestra resultados y valores de variables en anotaciones inline.
Es perfecto para probar ideas rápidas, entender APIs nuevas o depurar pequeñas funciones sin tener que levantar todo un proyecto. Tiene versión gratuita con funcionalidades muy útiles y edición de pago con extras.
ES7 React/Redux/GraphQL/React-Native snippets y Simple React Snippets
Si trabajas con el ecosistema React, estas dos extensiones son oro puro. ES7 React/Redux/GraphQL/React-Native snippets ofrece fragmentos para componentes, hooks, Redux, GraphQL y React Native, cubriendo casi todos los patrones habituales.
Simple React Snippets, en cambio, se centra en un conjunto más reducido de snippets para React moderno (componentes funcionales, imports básicos, etc.), ideal si quieres algo menos abrumador pero igualmente productivo.
JavaScript and TypeScript Nightly
Si te gusta estar a la última con el lenguaje, JavaScript and TypeScript Nightly te da acceso a la versión nightly del servidor de lenguaje de TypeScript que usa VS Code.
Eso significa nuevas features, mejoras de rendimiento y correcciones antes de que lleguen a la versión estable, ideal para probar las novedades del lenguaje y detectar cambios futuros que puedan afectar a tu código.
Extensiones para Python
VS Code, con las extensiones adecuadas, se convierte en un IDE Python de primera. Si haces backend, ciencia de datos o automatización con este lenguaje, estas son casi obligatorias.
Python (extensión oficial)
La extensión oficial de Python de Microsoft es la piedra angular para trabajar con este lenguaje en VS Code. Sin ella, el soporte es muy limitado.
Aporta IntelliSense, depuración, testeo, integración con entornos virtuales, formateo de código (Black, autopep8), linting con Pylint o Flake8 y muchas otras funciones imprescindibles.
Pylance
Pylance es el servidor de lenguaje avanzado para Python que potencia aún más la extensión oficial. Aporta análisis estático rápido, mejor autocompletado y comprobación de tipos muy detallada.
Si usas anotaciones de tipo o quieres detectar errores antes de ejecutar el código, Pylance mejora muchÃsimo la experiencia de desarrollo en proyectos medianos y grandes.
Jupyter
La extensión de Jupyter integra notebooks .ipynb directamente en VS Code. Puedes crear, abrir y ejecutar celdas como en el Jupyter clásico, pero desde el editor.
Es especialmente útil para análisis de datos, machine learning, visualización y prototipado rápido, combinando lo mejor de los notebooks con las ventajas de un editor completo.
Python Docstring Generator
La documentación interna en Python suele estar en docstrings. Python Docstring Generator crea automáticamente el esqueleto de la cadena de documentación para funciones, clases y métodos.
Al escribir las comillas de apertura, la extensión genera campos para la descripción, parámetros y valor de retorno basándose en la firma de la función, lo que anima a tener código bien documentado sin que dé tanta pereza.
Extensiones para PHP y backend
PHP sigue siendo un pilar en el backend web, y VS Code tiene un ecosistema de extensiones muy maduro para este lenguaje.
PHP IntelliSense e Intelephense
PHP IntelliSense fue de las primeras extensiones serias para autocompletado en PHP. Ofrece sugerencias para funciones, clases, métodos, namespaces y variables, además de navegación básica a definiciones.
PHP Intelephense va un paso más allá: análisis muy rápido y profundo, refactorización, búsqueda de referencias, soporte actualizado para PHP 7 y 8 y más. Incluso en su versión gratuita ya supera a la mayorÃa de alternativas.
PHP DocBlocker
Para mantener una documentación decente en proyectos grandes, PHP DocBlocker genera comentarios DocBlock completos para funciones, métodos, clases y propiedades.
Al escribir /** sobre una función, rellena automáticamente los parámetros y el tipo de retorno, lo que incentiva documentar bien APIs internas y públicas.
Composer
Composer es el estándar de gestión de dependencias en PHP. La extensión correspondiente se integra con VS Code para ejecutar comandos habituales (install, update, require) desde la paleta, además de ofrecer autocompletado y resaltado en composer.json.
Esto hace mucho más cómodo gestionar librerÃas, frameworks y scripts sin ir saltando continuamente entre editor y terminal.
PHP Debug
Depurar PHP con var_dump tiene su gracia hasta cierto punto. PHP Debug añade un depurador completo basado en Xdebug dentro de VS Code.
Con él puedes poner breakpoints, inspeccionar variables, recorrer el código paso a paso y analizar la pila de llamadas. La configuración inicial requiere algo de mimo, pero una vez montado, es una herramienta esencial.
Extensiones para HTML, CSS y desarrollo frontend
Si te mueves en el lado visual de la web, hay varias extensiones que transforman VS Code en un entorno súper cómodo para maquetar y estilizar.
Live Server
Live Server monta un servidor de desarrollo local con recarga automática. Al pulsar en «Go Live» abre tu sitio en el navegador y refresca la página cada vez que guardas un archivo.
Es ideal para HTML puro, prototipos rápidos, maquetación estática y proyectos front sencillos, donde ver los cambios al instante marca la diferencia.
HTML CSS Support
Esta extensión mejora la integración entre HTML y CSS. Ofrece autocompletado inteligente de clases e IDs definidos en tus hojas de estilo cuando escribes HTML, y viceversa.
También sugiere propiedades CSS (incluyendo prefijos de proveedor) y funciona de maravilla combinado con Emmet, lo que acelera mucho el flujo de trabajo de maquetación.
IntelliSense for CSS class names y Tailwind CSS IntelliSense
IntelliSense for CSS class names analiza tus archivos CSS, SCSS o Less para ofrecer autocompletado de nombres de clase en HTML. Es especialmente útil cuando hay utilidades o clases con nombres largos.
Si usas Tailwind, Tailwind CSS IntelliSense va un paso más allá, proporcionando autocompletado especÃfico de utilidades Tailwind, linting y documentación inline, algo casi obligatorio para trabajar cómodo con este framework.
CSS Peek y CSS Lint
CSS Peek te permite ver y saltar rápidamente a la definición CSS de una clase o ID desde el HTML, ya sea en una ventana emergente o abriendo el archivo correspondiente.
CSS Lint actúa como linter para hojas de estilo, marcando errores o patrones problemáticos (propiedades duplicadas, reglas ineficientes, etc.), ayudando a mantener un CSS más limpio y mantenible.
Auto Rename Tag y Highlight Matching Tag
Auto Rename Tag se encarga de algo tan simple como útil: cuando cambias la etiqueta de apertura de un elemento HTML o XML, actualiza la etiqueta de cierre automáticamente para que no se desincronicen.
Highlight Matching Tag resalta la pareja de apertura/cierre de la etiqueta donde se encuentra el cursor, algo muy práctico en documentos grandes o con estructuras muy anidadas.
Image Preview, Image Optimizer y Color Highlight
Image Preview muestra una miniatura de la imagen referenciada en una ruta al pasar el cursor o en el margen, lo que ayuda a comprobar que los paths son correctos sin abrir el archivo aparte.
Image Optimizer permite comprimir imágenes (con o sin pérdida) desde el propio editor, dejando tus assets listos para producción sin pasar por herramientas externas.
Color Highlight resalta los códigos de color (hex, RGB, HSL, etc.) con su color real como fondo o subrayado, facilitando enormemente trabajar con paletas complejas.
Extensiones de productividad extra, diseño y personalización
Además de las herramientas de desarrollo puras, hay un buen montón de extensiones pensadas para hacer tu dÃa a dÃa más cómodo y tu editor más agradable a la vista.
Temas para VS Code
Los temas afectan directamente a tu comodidad visual. Algunos de los más populares y recomendados son Shades of Purple, Material Theme, Night Owl, Horizon, Noctis o Flatland Monokai.
Cada uno tiene su propia personalidad: esquemas oscuros brillantes, paletas pensadas para reducir fatiga visual, variaciones claras y oscuras, o incluso temas totalmente monocromos para quienes quieren cero distracciones.
Peacock
Cuando abres varios proyectos a la vez, es fácil liarse. Peacock te deja cambiar el color de acento de la ventana de VS Code por proyecto, de forma que con un vistazo sepas si estás editando el backend, el frontend o un microservicio concreto.
Es una extensión sencilla pero tremendamente útil si sueles tener varios workspaces abiertos en paralelo.
Indent-rainbow y Rainbow Brackets
indent-rainbow colorea las columnas de indentación con diferentes tonos, ayudando a ver la estructura del código sin esfuerzo.
Rainbow Brackets hace algo similar con paréntesis, corchetes y llaves, asignando un color distinto a cada nivel de anidación. Entre ambos, localizar un paréntesis que falta o un bloque mal indentado se vuelve muchÃsimo más sencillo.
Todo Tree
Si usas comentarios tipo TODO, FIXME o BUG, Todo Tree escanea tu workspace y crea un panel con todas estas anotaciones organizadas en forma de árbol.
Desde ahà puedes navegar directamente a cada punto del código donde hay tareas pendientes o problemas marcados, convirtiendo los TODOs en una especie de mini gestor de tareas ligado al repositorio.
GitHub Copilot, Tabnine y ChatGPT/IA
Las herramientas de autocompletado basadas en IA han irrumpido con fuerza. GitHub Copilot y Tabnine sugieren lÃneas o bloques de código completos a partir del contexto, pruebas anteriores o comentarios.
Extensiones que integran ChatGPT o modelos similares en VS Code permiten pedir explicaciones de código, refactorizar funciones o generar tests sin salir del editor. Requieren claves de API, pero como copiloto de desarrollo son muy potentes si se usan con criterio.
Markdown All in One y Markdown Preview mejorado
Si documentas proyectos o escribes posts técnicos, Markdown All in One añade atajos, vista previa mejorada, generación de Ãndice y otras comodidades para trabajar con Markdown.
Combinado con extensiones de previsualización con estilo GitHub, consigues una experiencia de escritura muy cercana a cómo se verán luego tus README o artÃculos en la web.
Docker, Remote SSH y Remote WSL
En entornos profesionales es muy habitual trabajar con contenedores o máquinas remotas. La extensión oficial de Docker permite gestionar imágenes, contenedores, redes y volúmenes desde la barra lateral, además de facilitar la depuración dentro de contenedores.
Remote SSH y Remote WSL te dejan abrir carpetas remotas o entornos Linux (WSL) como si fueran proyectos locales, ejecutando comandos y depurando allà mismo, pero con la comodidad de la interfaz de VS Code.
Con todas estas extensiones bien escogidas y configuradas, Visual Studio Code pasa de ser un simple editor ligero a un entorno de desarrollo a medida, adaptado a tu stack, a tu forma de trabajar y a tus proyectos; encontrar el equilibrio entre no sobrecargarlo y tener justo las herramientas que necesitas es la clave para ganar velocidad, comodidad y calidad en tu dÃa a dÃa programando.
