Claude Code para VS Code

✓ Oficial

La extensión oficial de IDE de Anthropic: panel lateral con diffs en línea — Claude Code de forma visual directamente en VS Code en lugar de solo en la terminal.

Claude Code para VS Code es la extensión oficial de Anthropic que lleva la CLI de Claude Code como panel gráfico directamente al editor. Tras iniciar sesión (cuenta Pro, Max, Team o Enterprise, sin necesidad de clave de API), se ejecuta en segundo plano un servidor MCP local llamado «ide»: se vincula a 127.0.0.1 en un puerto aleatorio, protege cada conexión con un token de autenticación generado al momento y ofrece a la CLI dos herramientas — una lee los diagnósticos del panel Problems de VS Code, otra ejecuta código en un kernel de Jupyter activo (siempre con diálogo de confirmación). Además, Claude ve automáticamente tu selección de texto y la ruta del archivo abierto como contexto.

Cuando Claude propone un cambio, se abre una vista de diff en paralelo que puedes aceptar, rechazar o seguir editando directamente. Tres modos de permisos controlan cuánta libertad recibe Claude: Manual (pregunta antes de cada cambio), Plan (muestra primero el plan como documento markdown para comentarlo) y Edit automatically. El panel se puede arrastrar libremente a la barra lateral, a una pestaña del editor o a su propia ventana, son posibles varias conversaciones en paralelo, y con /mcp gestionas servidores MCP externos que hayas añadido previamente mediante la CLI con claude mcp add. Con la extensión Claude-in-Chrome instalada, el panel puede además controlar el navegador (@browser ...). Según el VS Code Marketplace, ya cuenta con más de 20 millones de instalaciones.

🔧 SETUP

Comprobar la versión de VS Code (se necesita al menos 1.98.0)
Instalar la extensión: Ctrl+Shift+X (Cmd+Shift+X en Mac) abre la vista de Extensiones, buscar "Claude Code" y hacer clic en Install — o ir directamente mediante el enlace vscode:extension/anthropic.claude-code
La primera vez que abras el panel, hacer clic en "Sign in" y completar la autorización en el navegador (basta con una cuenta Pro/Max/Team/Enterprise, sin necesidad de clave de API)
Abrir el panel mediante el icono Spark en la barra de herramientas del editor (aparece con un archivo abierto) y enviar un prompt
Opcional: añadir servidores MCP en la terminal integrada con `claude mcp add`, y gestionarlos después con `/mcp` en el panel

✅ ¿CUÁNDO USARLO?

Correcciones rápidas en tu editor habitual

Seleccionas una función con errores, pulsas Alt+K, describes el bug — Claude ve automáticamente tu selección y propone un cambio en diff en línea que puedes aceptar o rechazar directamente.

Construir el frontend y comprobarlo en el navegador

Con la extensión Claude-in-Chrome instalada, escribes en el panel `@browser go to localhost:3000 and check the console for errors` — Claude prueba su propio cambio en vivo al instante, sin que salgas del editor.

⛔ ¿CUÁNDO MEJOR NO?

Faltan funciones exclusivas de la CLI

Según la documentación, el atajo de bash `!`, el autocompletado con tabulador y no todos los comandos slash están disponibles solo en la CLI de terminal, no por completo en el panel de VS Code.

Mejor: Para el conjunto completo de funciones, instalar además la CLI de Claude Code por separado e iniciarla en la terminal integrada con `claude`.

Sin entrada automática en el PATH

La extensión incluye su propia copia empaquetada de la CLI para el panel, pero no añade `claude` al PATH de la terminal.

Mejor: Realizar la instalación independiente de la CLI por separado si se quiere poder invocar `claude` directamente en la terminal.