Claude Code en VS Code: cómo configurar y usar (2026)
Ya usas Claude Code en la terminal y te gusta. Pero cambiar entre el editor y la terminal todo el tiempo interrumpe su flujo de trabajo. ¿Qué pasaría si Claude Code pudiera ejecutarse dentro de VS Code, junto con su código, con acceso directo a los archivos abiertos?
La extensión Claude Code para VS Code hace precisamente eso. Misma potencia que el terminal, integrado en el editor que ya utilizas. En este tutorial, aprenderá cómo instalar, configurar y usar Claude Code en VS Code para maximizar su productividad.
1. La extensión Claude Code para VS Code
Anthropic ha lanzado la extensión oficial Claude Code para VS Code, integrando el agente de IA directamente en el editor. La extensión no es un complemento de autocompletar: es el Claude Code completo, con todas sus capacidades, que se ejecuta dentro de VS Code.
Qué ofrece la extensión:
- Panel de chat lateral-- chatea con Claude Code sin salir del editor
- Acceso al espacio de trabajo-- Claude lee todos los archivos abiertos del proyecto
- Edición directa-- los cambios se aplican a los archivos con diferencias visuales (usted aprueba o rechaza)
- Terminal integrado-- ejecutar comandos en la terminal VS Code
- Contexto del editor-- puede hacer referencia a archivos activos, selección de texto, errores del editor
- Habilidades y comandos de barra-- todas las habilidades funcionan normalmente
Importante:la extensión utiliza el mismo backend que el terminal Claude Code. Se comparten su plan, créditos, configuraciones y habilidades. No es un producto independiente: es el mismo Claude Code con una interfaz diferente.
2. Instalación paso a paso
Requisitos previos
- VS Code versión 1.96 o superior
- Node.js 18+ instalado
- Claude Code CLI instalado (
npm install -g @anthropic-ai/claude-code) - Cuenta activa en Anthropic (plan Max o clave API)
Paso 1: instala la extensión
1. Abrir código VS
2. Ctrl+Shift+X (abrir Extensiones)
3. Busque "Código Claude"
4. Haga clic en "Instalar" en la extensión Anthropic.
# Opción 2: a través de la línea de comando
$ code --install-extension anthropic.claude-code
Paso 2: autenticar
Después de la instalación, VS Code muestra el ícono de Claude Code en la barra lateral. Al hacer clic, solicita autenticación:
- Plan Máximo:Abra el navegador para iniciar sesión con su cuenta Anthropic
- Clave API:ingresas la clave directamente en la configuración de la extensión
Si ya ha autenticado Claude Code en el terminal, la extensión puede reutilizar la autenticación existente automáticamente.
Paso 3: comprobar
Código Claude: Estás en el proyecto "my-app-react" con 147
archivos. Pila detectada: React 19, TypeScript, Vite, Vitest.
Si Claude respondió con información sobre su proyecto, todo está funcionando.
3. Configuración y autenticación
La extensión tiene configuraciones específicas accesibles enSettings > Extensions > Claude Code:
| Ajustes | que hace | Recomendación |
|---|---|---|
claude-code.model | Modelo a utilizar | Déjalo por defecto (usa el mejor disponible) |
claude-code.autoApprove | Aprobar acciones automáticamente | Comience con "apagado", enciéndalo después de acostumbrarse |
claude-code.terminalProfile | Qué terminal usar para los comandos | Utilice el sistema predeterminado |
claude-code.maxFileSize | Tamaño máximo de archivo para leer | 10 MB (predeterminado) |
Configuración de código VS.json
CLAUDE.md funciona igual
el archivoCLAUDE.mden la raíz del proyecto funciona de manera idéntica en la extensión. Se respetan las instrucciones, convenciones y restricciones que establezcas. Si ya tienes CLAUDE.md configurado para el terminal, no necesitas cambiar nada.
4. Conociendo la interfaz
La extensión agrega tres elementos a VS Code:
Panel lateral (Chat)
El panel principal donde hablas con Claude Code. Funciona como la terminal, pero con una interfaz visual. Usted escribe mensajes, Claude responde y las acciones (crear/editar archivos, ejecutar comandos) aparecen con botones de aprobar/rechazar.
barra de estado
En la barra inferior de VS Code, un indicador muestra el estado de Claude Code: conectado, procesando o en espera. Haga clic para ver detalles como los tokens consumidos en la sesión.
Acciones en línea
Cuando Claude sugiere modificaciones en un archivo, aparecen como diferencias en línea: verás exactamente qué cambiará antes de aceptar. Verde para adiciones, rojo para eliminaciones. Botones "Aceptar" y "Rechazar" para cada cambio.
5. Atajos de teclado esenciales
| Atajo | Acao |
|---|---|
Ctrl+Shift+P> "Claude" | Ver todos los comandos de Claude Code |
Ctrl+L | Abrir/enfocar el panel de chat |
Ctrl+I | Chat en línea (en el editor, sobre el código seleccionado) |
Ctrl+Shift+I | Enviar selección de texto a Claude |
Escape | Cancelar la operación actual |
Consejos de productividad: use Ctrl+Ifrecuentemente. Seleccione un fragmento de código, presioneCtrl+Iy pídale a Claude que explique, refactorice, agregue tipos o escriba pruebas. Es el flujo de trabajo más rápido para ediciones únicas.
Personalizar atajos
En VS Code, abraKeyboard Shortcuts(Ctrl+K Ctrl+S) y busque "claude" para ver y personalizar todos los accesos directos de la extensión.
6. Terminal integrado versus panel de extensión
Tienes dos formas de utilizar Claude Code en VS Code: a través del terminal integrado y a través del panel de extensión. Ambos funcionan, pero existen diferencias prácticas.
Terminal integrado VS Code
Abra la terminal VS Code (Ctrl+`) y escribaclaude. Es exactamente igual que usarlo en la terminal externa, pero dentro de VS Code. Útil si prefiere la interfaz CLI pura.
Código Claude v1.x | Modelo: claude-opus-4 | Contexto: 1 millón de tokens
> crie um componente Button com variantes primary e secondary
Panel de extensión
El panel lateral (Ctrl+L) ofrece una experiencia más visual:
- Diferencias visuales para cada edición de archivo.
- Botones de aprobación/rechazo para cada acción
- Desplazamiento del historial de conversaciones
- Referencia automática al archivo activo
- Comentarios de progreso visual
¿Quieres dominar esto más rápido?
Todo lo que estás aprendiendo aquí se vuelve 10 veces más poderoso con habilidades ya preparadas. En lugar de escribir comandos manualmente, las habilidades hacen el trabajo pesado por usted. Más de 748 habilidades profesionales, se instala en 2 minutos.
Quiero las Habilidades — R$ 197. Flujos de trabajo de productividad
Flujo de trabajo 1: editar código con contexto
- Abra el archivo que desea editar
- Seleccione el fragmento de código relevante
- prensa
Ctrl+I(chat en línea) - Describa el cambio: "agregar manejo de errores", "convertir a asíncrono/esperar", "agregar escritura TypeScript"
- Claude muestra la diferencia en línea: aceptar o rechazar
Este flujo de trabajo es más rápido que copiar código en el chat y pegarlo nuevamente. Claude ve exactamente qué sección seleccionó y aplica el cambio en el lugar correcto.
Flujo de trabajo 2: generar pruebas desde el editor
- Abra el componente/función que desea probar
- En el panel de chat (
Ctrl+L), escriba: "crear pruebas para el archivo activo" - Claude analiza el archivo abierto y genera pruebas.
- Las pruebas aparecen como un archivo nuevo: acepte para crear
- claude puede correr
npm testautomáticamente para comprobar
Flujo de trabajo 3: depurar con errores del editor
- VS Code muestra un error rojo en alguna línea (error de TypeScript, error de pelusa)
- Seleccione la fila con error
Ctrl+I: "arreglar este error"- Claude lee el error de diagnóstico de VS Code y aplica la solución
Flujo de trabajo 4: refactorización en múltiples archivos
Atualize todos os imports e referencias.
Claude encuentra todos los archivos que hacen referenciaUserData, muestra las diferencias de cada uno y lo apruebas por lotes. Refactorización global en segundos.
8. Consejos avanzados
Mencionar archivos en el chat
En el panel de chat, use@seguido del nombre del archivo para incluir su contenido como contexto:
e me diga o que mudou e se a v2 introduziu algum bug
Utilice errores del panel Problemas
VS Code tiene un panel "Problemas" (Ctrl+Shift+M) que enumera errores y advertencias. Puedes preguntarle a Claudio:
Problems. Faca as correcoes uma por uma e me mostre cada diff.
Espacios de trabajo de múltiples raíces
Si utiliza espacios de trabajo con varias carpetas en VS Code, Claude Code tiene acceso a todas ellas. Útil para monorepos o proyectos con frontend + backend separados.
Integrar con extensiones existentes
Claude Code funciona junto con sus otras extensiones. Respeta la configuración de ESLint, Prettier, TypeScript y otros. Si Prettier formatea al guardar, los archivos que crea Claude también se formatean automáticamente.
9. Terminal vs extensión: cuándo usar cada uno
| Guión | La mejor opción | Por qué |
|---|---|---|
| Edición rápida de código | Extensión | Ctrl+I en línea es más rápido |
| Tareas complejas de varios archivos | Terminal o extensión | Ambos funcionan por igual |
| Análisis de datos/CSV | Terminal | La salida amplia se ve mejor en el terminal |
| Depuración visual | Extensión | Las diferencias en línea son más claras |
| Automatización con /loop | Terminal | Loop funciona mejor en una terminal dedicada |
| Revisión de código | Extensión | Las diferencias visuales facilitan la revisión |
| Generar proyecto desde cero | Terminal | Más control sobre la creación de estructuras |
| Refactorización única | Extensión | Seleccione + Ctrl+I y el flujo de trabajo ideal |
La respuesta pragmática:usa ambos. La extensión para ediciones rápidas y contextuales dentro del editor. El terminal para tareas largas, automatización y análisis. Puede hacer que ambos se ejecuten simultáneamente sin conflictos.
Uso combinado en la práctica:utilice la extensión para el desarrollo diario (ediciones, pruebas, depuración). Utilice la terminal para tareas de infraestructura (implementación, migración, automatización con /loop). Las habilidades funcionan en ambos, por lo que no es necesario realizar una configuración doble.
Siguiente paso: instale skills y vea la diferencia
Ya sabes lo básico. Ahora imagina a Claude Code sabiendo cómo hacer todo esto por sí mismo: SEO, redacción, revisión de código, implementación, análisis de datos. Eso es lo que hacen las habilidades. Acceso de por vida, actualizaciones incluidas.
Ver el Mega Paquete – R$ 19Preguntas frecuentes
La funcionalidad principal es idéntica: el mismo Código Claude se ejecuta en ambos. La diferencia es la interfaz. En la terminal, tienes una experiencia puramente de línea de comandos. En la extensión VS Code, tiene integración visual: Claude aparece en un panel lateral, puede hacer referencia a archivos abiertos y las ediciones se aplican directamente a los archivos del editor con visual diff. El terminal es más rápido para quienes prefieren CLI; la extensión es más visual y está integrada en el flujo de trabajo del editor.
No. La extensión VS Code es gratuita. Utiliza el mismo plan que Claude Code (API de Max o Anthropic). Si ya tienes acceso a Claude Code en el terminal, puedes utilizar la extensión sin coste adicional. El consumo de tokens es el mismo, independientemente de si utilizas un terminal o una extensión.
Sí. Habilidades (archivos en.claude/commands/) funcionan tanto en el terminal como en la extensión VS Code. Configuras las habilidades una vez y están disponibles en ambos entornos. En la extensión, puedes invocar habilidades directamente desde el panel de chat usando/nome-da-skill. el paquete dedesarrollo de habilidades de minhakills.ioFunciona en ambos entornos sin ninguna configuración adicional.