Claude Code para VS Code: configurar la extensión y guía del panel
Instale la extensión oficial de Claude Code en Visual Studio Code, inicie sesión, elija modos de permiso, planifique y revise diffs en el panel, y maneje la misma CLI en la terminal integrada — cada paso verificado contra la documentación oficial.
TL;DR
- Instale «Claude Code» de Anthropic desde la vista de extensiones (Cmd+Shift+X) — el id de la extensión es anthropic.claude-code. Se requiere VS Code 1.94.0 o superior, y la extensión también está publicada en Cursor y Open VSX.
- El panel trae su propia copia de la CLI: no añade claude a su PATH. Para usar la CLI real en la terminal integrada de VS Code, haga también la instalación independiente — ambas comparten el historial de conversación.
- Los modos de permiso viven al pie de la caja de prompt: Plan para planificar en solo lectura, Manual para aprobar cada edición, Auto para autonomía revisada por un clasificador. Cíclelos con Shift+Tab.
- Las menciones @ traen archivos al contexto (Option+K inserta una referencia de rango de líneas), los diffs se muestran lado a lado con botones Accept/Reject por cambio, y /usage, /model, /mcp funcionan en el propio panel.
Claude Code Full Course — Autonomous Goals, MCP, and VS Code Setup
Canal: freeCodeCamp.org1:21:37
VS Code — official documentation
Fuente oficial: code.claude.com/docs
Claude Code for VS Code — marketplace listing
Fuente oficial: marketplace.visualstudio.com
Los pasos están verificados contra la documentación oficial de VS Code; el curso completo gratuito de freeCodeCamp de arriba es la fuente visual de las capturas.
Las capturas se atribuyen a sus creadores con enlaces profundos a los minutos exactos. No se usan fotogramas con caras.
Configurar Claude Code en VS Code, paso a paso
Parte 1 — Instalar y conectar
- 1
Instalar la extensión desde el marketplace
Abra la vista de extensiones (Cmd+Shift+X en Mac, Ctrl+Shift+X en Windows/Linux), busque «Claude Code» e instale la publicada por Anthropic (id: anthropic.claude-code). Necesita VS Code 1.94.0 o superior y un plan de pago de Claude o una cuenta de Console. Si no aparece, ejecute «Developer: Reload Window».
- 2
Encontrar el icono de la chispa
Tras instalar, un icono de chispa de Claude Code aparece en la barra de pestañas del editor (con un archivo abierto) y en la barra de actividad. Púlselo para abrir el panel — o abra la paleta de comandos (Cmd+Shift+P), escriba «Claude Code» y elija «Open in New Tab». La entrada «✻ Claude Code» de la barra de estado funciona incluso sin ningún archivo abierto.
El icono de chispa de Claude Code vive en la barra de pestañas del editor — un clic abre el panel junto a su archivo.Ver en 43:00 - 3
Iniciar sesión: plan, Console o clave de API
Ejecute /login en el panel y elija su vía: una suscripción de Claude (Pro, Max, Team, Enterprise), una cuenta de Console o una clave de API. El navegador se abre una vez para autorizar, y luego el panel le saluda con su modelo y su plan — sin cuenta separada para la extensión.
- 4
Conocer el panel
La sesión de Claude Code se dibuja dentro del propio VS Code — como panel, en la barra lateral o en la terminal integrada, usted elige (ajuste preferredLocation). El banner de bienvenida muestra el modelo activo, su plan y todo lo que pide atención, como servidores MCP a la espera de autenticación.
Primer contacto: el banner de bienvenida de Claude Code en el panel de terminal, con el modo plan ciclando en Shift+Tab y un recordatorio de autenticación de /mcp.Ver en 17:00
Parte 2 — Trabajar en el panel
- 5
Elegir su modo de permiso
El indicador de modo está al pie de la caja de prompt. Plan mantiene a Claude en solo lectura hasta que apruebe un plan; Manual pregunta antes de editar archivos y de la mayoría de comandos de shell; Auto deja que un clasificador de seguridad revise las acciones en segundo plano. Cíclelo con Shift+Tab y fije un valor por defecto con el ajuste initialPermissionMode.
- 6
Planificar primero, responder preguntas en línea
Para cambios grandes, empiece en modo Plan: Claude investiga y luego presenta un plan que puede comentar como un documento markdown. En esta grabación va más allá — hace una pregunta de opción múltiple sobre el stack técnico y previsualiza el árbol de archivos que pretende crear antes de escribir una línea.
El modo Plan en acción: una pregunta interactiva con opciones seleccionables y una vista previa de los archivos que Claude quiere crear.Ver en 19:00 - 7
Apuntar a Claude hacia los archivos correctos
Escriba @ para menciones difusas de archivos, o pulse Option+K (Alt+K) para insertar una referencia como @app.ts#5-10 a líneas concretas. Todo lo que seleccione en el editor es visible para Claude automáticamente, y attachOpenFile adjunta su archivo abierto a los prompts por defecto.
- 8
Revisar diffs, aceptar cambio a cambio
En modo Manual, cada edición abre un diff lado a lado con los botones «Accept this change» y «Reject this change» en cada bloque — puede conservar un hunk y rechazar al vecino. «Claude Code: Accept Change at Cursor» y su hermano Reject están en la paleta de comandos.
- 9
Observar el razonamiento
Active extended thinking desde el menú del comando / y el razonamiento de Claude aparece en bloques plegados sobre la respuesta. Pulse Ctrl+O para desplegarlos todos cuando quiera auditar cómo se tomó una decisión — útil en sesiones de revisión de código.
Parte 3 — Ajustarlo a su gusto
- 10
Cambiar de modelo a mitad de sesión
Pulse el nombre del modelo en el panel o ejecute /model para cambiar — Opus Plan para arquitectura, Sonnet para velocidad diaria, Haiku para ediciones rápidas. El nivel de Effort y el interruptor Ultracode están en el mismo selector, igual que en la terminal.
- 11
Guardar los ajustes de proyecto en .claude/settings.json
Todo lo de la guía de ajustes aplica aquí: el panel lee ~/.claude/settings.json más el .claude/settings.json del proyecto, donde viven las claves de equipo como enabledPlugins. Los extras específicos de VS Code (initialPermissionMode, preferredLocation, autosave) viajan en el mismo esquema.
Ajustes de proyecto en VS Code: .claude/settings.json con la clave enabledPlugins activando un plugin oficial para todo el equipo.Ver en 42:25
Panel de la extensión vs terminal integrado vs terminal externo
Claude Code le llega por tres superficies de VS Code. Comparten historial y sesión — pero no son la misma herramienta:
- 1El panel gráfico — diffs clicables, accept/reject por cambio, desplegables para modelo y modo. Lo mejor para revisar ediciones y no salir del flujo del ratón.
- 2La CLI en la terminal integrada — el repertorio completo: atajo ! de bash, autocompletado con Tab, cada comando slash y cada skill. Para quienes teclean más rápido de lo que clican.
- 3Una terminal externa más /ide — ejecute claude fuera de VS Code y se conecta solo al editor para diffs y diagnósticos; desde una terminal que no lo haga, escriba /ide dentro de Claude Code para engancharse.
- 4La extensión trae su propia CLI, así que instalarla NO pone claude en su PATH — haga la instalación independiente si quiere también la experiencia de terminal.
- 5El historial de conversación se comparte entre todos: claude --resume desde cualquier superficie continúa una conversación del panel, y /ide conecta el contexto de las sesiones.
Regla práctica: revise en el panel, conduzca desde la terminal. Al final casi todo el mundo usa ambos en la misma sesión — están diseñados para eso.
¿La extensión no funciona? Primeros auxilios
Cinco arreglos cubren la mayoría de problemas de la extensión de Claude Code en VS Code:
- 1La extensión no aparece en las búsquedas. Compruebe su versión de VS Code (1.94.0+) y ejecute «Developer: Reload Window». La extensión está también en Open VSX y en el registro de Cursor por si su build no accede al marketplace de Microsoft.
- 2claude no se encuentra en la terminal integrada. La extensión trae su propia CLI sin tocar el PATH — ejecute el script de instalación independiente o siga usando el panel.
- 3Banner «2 MCP servers need authentication». Ejecute /mcp en el panel y apruebe cada servidor pendiente — los servidores de .mcp.json del proyecto exigen OAuth explícito por cuenta.
- 4No se muestran diffs. Depende del modo: el modo Plan no produce ediciones que mostrar en un diff, y los modos tipo bypass pueden saltarse el prompt. Pase a Manual (Shift+Tab) para revisar cambio a cambio.
- 5La extensión se reinstala tras desinstalarla. La CLI instala la extensión de IDE automáticamente al arrancar — desactive «Auto-install IDE extension» en /config o fije la variable de entorno CLAUDE_CODE_IDE_SKIP_AUTO_INSTALL.
¿Sigue atascado? Ejecute claude doctor en una terminal y /status en el panel — entre los dos nombran la pieza rota en una sola pantalla.