Claude Code en VS Code: instalación, configuración y cómo usarlo
Aprende a utilizar Claude Code en Visual Studio Code mediante la extensión oficial de Anthropic. Puedes trabajar con un panel gráfico, referenciar archivos y líneas, revisar diffs, aprobar planes, recuperar cambios mediante checkpoints y combinar la extensión con la CLI sin abandonar tu editor.
¿Cómo usar Claude Code en VS Code?
Instala la extensión oficial
Claude Code
desde Extensions en Visual Studio Code,
abre el panel de Claude,
inicia sesión con tu cuenta de Anthropic
y abre el proyecto con el que quieres trabajar.
Desde el panel puedes conversar con Claude,
mencionar archivos con @,
compartir selecciones de código,
revisar cambios mediante diffs
y aprobar planes antes de editar.
La extensión también incluye la CLI,
que puedes ejecutar desde
la terminal integrada con claude.
Qué puedes hacer con Claude Code dentro de VS Code
La extensión convierte Claude Code en una experiencia integrada directamente con el editor.
Revisar cambios
Ver modificaciones directamente mediante diffs integrados en el editor.
Mencionar archivos
Añadir archivos, carpetas y rangos concretos de código al contexto.
Revisar planes
Analizar y editar el plan de Claude antes de aceptar una implementación.
Checkpoints
Retroceder cambios de código realizados durante una conversación.
Terminal integrada
Ejecutar la CLI de Claude Code desde el terminal de VS Code.
Varias sesiones
Mantener conversaciones diferentes en pestañas o ventanas independientes.
Claude Code dentro de tu flujo de desarrollo
Puedes pasar de investigar a modificar y revisar código sin cambiar constantemente entre aplicaciones.
Selecciona el código
Abre archivos, selecciona líneas o menciona directamente lo que Claude debe analizar.
Trabaja con Claude
Pide investigar, planificar, corregir o implementar una funcionalidad.
Revisa el diff
Comprueba visualmente qué archivos y líneas fueron modificados.
Qué necesitas para usar Claude Code en VS Code
La extensión oficial requiere una versión relativamente reciente del editor.
| Requisito | Necesario |
|---|---|
| Visual Studio Code | 1.98.0 o superior |
| Cuenta Anthropic | Sí |
| Proyecto de código | Recomendado |
| Claude Code CLI separada | No obligatoria |
| Internet | Sí |
No necesitas realizar una instalación independiente de Claude Code únicamente para comenzar a utilizar la extensión. Puedes acceder a la CLI desde la terminal integrada cuando necesites funciones avanzadas.
Cómo instalar Claude Code en Visual Studio Code
La forma más sencilla es utilizar el marketplace integrado en VS Code.
Abre VS Code
Inicia Visual Studio Code normalmente.
Abre Extensions
Pulsa
Ctrl + Shift + X
en Windows/Linux
o
Cmd + Shift + X
en macOS.
Busca Claude Code
Localiza la extensión oficial publicada por Anthropic.
Pulsa Install
VS Code descargará e instalará la extensión.
Reinicia VS Code
o abre la Command Palette
y ejecuta:
Developer: Reload Window.
Cómo abrir Claude Code dentro de VS Code
Existen varias formas de abrir la interfaz.
Pulsa el icono Spark que aparece en la barra del editor.
Utiliza el icono Spark de la Activity Bar lateral.
Abre
Ctrl + Shift + P,
escribe
Claude Code
y selecciona
una acción.
Pulsa Claude Code desde la barra de estado inferior.
El Spark de la barra del editor aparece cuando existe un archivo abierto. El icono de Activity Bar permanece disponible.
Iniciar sesión en Claude Code desde VS Code
La primera vez que abras el panel aparecerá el proceso de autenticación.
Autoriza desde el navegador
Pulsa Sign in y completa la autenticación con tu cuenta de Claude.
Ejecuta
Developer: Reload Window
desde la Command Palette
y vuelve a abrir
Claude Code.
Abre primero la carpeta del proyecto
Claude obtiene mucho más contexto cuando VS Code tiene abierto el workspace correcto.
File → Open Folder
Abre la raíz de tu proyecto.
Abre Claude Code
Inicia una nueva conversación.
Pide un análisis
Permite que Claude explore la estructura antes de modificar.
Primer mensaje recomendado en VS Code
Analiza este proyecto antes de modificarlo.
Identifica:
- stack tecnológico
- estructura principal
- punto de entrada
- arquitectura
- comandos de desarrollo
- tests disponibles
- archivos de configuración importantes
No realices cambios todavía.Usar código seleccionado como contexto
Una de las ventajas del IDE es poder señalar exactamente qué parte del código quieres discutir.
Selecciona líneas antes de preguntar
Cuando seleccionas código en el editor, puedes añadir ese rango concreto al contexto de Claude.
Explícame esta función.
Busca especialmente:
- posibles errores
- problemas de seguridad
- casos límite
- código duplicado
No la modifiques todavía.Mencionar archivos con @
Puedes añadir directamente archivos específicos a una conversación.
Referencia directa
Analiza @src/auth/login.php
y compáralo con @src/auth/register.php.
¿Siguen el mismo patrón de validación?La extensión puede utilizar rangos específicos asociados a una selección dentro del editor.
Revisar cambios con inline diffs
Cuando Claude modifica un archivo, VS Code puede mostrar visualmente las diferencias.
Código eliminado
Puedes identificar qué líneas serán sustituidas o eliminadas.
Código añadido
La nueva implementación aparece directamente junto al contexto original.
La integración visual hace mucho más fácil detectar modificaciones accidentales antes de llevarlas a Git.
Revisar y editar planes desde VS Code
La interfaz gráfica permite revisar el plan que Claude propone antes de la implementación.
No aceptes un plan automáticamente
Comprueba qué archivos piensa modificar, qué arquitectura propone y cómo verificará el resultado.
Antes de implementar:
1. investiga el sistema actual
2. identifica todos los archivos afectados
3. crea un plan
4. explica posibles riesgos
5. indica cómo verificarás el cambio
No modifiques código todavía.Retroceder cambios realizados por Claude
La extensión registra checkpoints durante las modificaciones realizadas por Claude.
Bifurcar conversación
Crea una nueva rama de conversación desde un mensaje anterior sin revertir código.
Retroceder código
Revierte los cambios de archivos hasta el punto seleccionado.
Conversación y código
Crea otra rama y revierte también el estado del código.
Los checkpoints son útiles durante una conversación, pero no sustituyen una estrategia adecuada de control de versiones.
Abrir varias conversaciones en VS Code
Cada conversación mantiene su propio historial y contexto.
Una tarea por conversación
Puedes mantener una sesión investigando un bug y otra trabajando sobre una funcionalidad diferente.
Separar conversaciones mantiene el contexto más limpio y facilita encontrar sesiones anteriores.
Atajos útiles de Claude Code en VS Code
| Acción | Windows / Linux | macOS |
|---|---|---|
| Cambiar foco editor / Claude | Ctrl + Esc |
Cmd + Esc |
| Nueva conversación en pestaña | Ctrl + Shift + Esc |
Cmd + Shift + Esc |
| Command Palette | Ctrl + Shift + P |
Cmd + Shift + P |
| Extensions | Ctrl + Shift + X |
Cmd + Shift + X |
| Terminal integrada | Ctrl + ` |
Cmd + ` |
Usar la interfaz de terminal dentro de VS Code
No estás obligado a utilizar siempre el panel gráfico.
Cambiar al modo terminal
Abre Settings, entra en Extensions → Claude Code y activa Use Terminal.
Anthropic recomienda actualmente la extensión gráfica como la experiencia principal dentro de VS Code, pero mantiene disponible el flujo basado en terminal.
Ejecutar Claude Code CLI desde VS Code
Algunas funciones siguen estando disponibles únicamente o de forma más completa mediante la CLI.
Iniciar Claude CLI
claudeCuando la ejecutas desde la terminal integrada, puede integrarse automáticamente con el IDE para mostrar diffs y compartir diagnósticos.
Conectar una sesión CLI externa con VS Code
Si Claude Code se está ejecutando fuera de la terminal integrada, puedes conectarlo manualmente con el IDE.
Conectar con VS Code
/ideExtensión de VS Code vs Claude Code CLI
| Función | Extensión | CLI |
|---|---|---|
| Interfaz gráfica | Sí | No |
| Inline diffs | Sí | Integración IDE |
| @ menciones | Sí | Sí |
| Checkpoints | Sí | Sí |
| Comandos y Skills | Subconjunto | Todos |
| Configurar nuevos MCP | Parcial | Sí |
| Atajo Bash ! | No | Sí |
| Autocompletado Tab | No | Sí |
El flujo más potente suele combinar el panel gráfico para edición y revisión visual con la CLI para funciones avanzadas.
Continuar una conversación de VS Code desde la CLI
La extensión y la CLI comparten el historial de conversaciones.
Elegir una conversación anterior
claude --resumeClaude mostrará un selector interactivo para recuperar una conversación anterior.
Enviar la salida de una terminal a Claude
También puedes utilizar la salida de terminales existentes como contexto.
Referenciar terminal
Analiza el error de @terminal:serverPuedes compartir directamente logs, errores de build o salidas del servidor.
Dos niveles de configuración en VS Code
Claude Code diferencia la configuración visual de la extensión de las reglas compartidas con la CLI.
Extension Settings
Controlan cómo funciona el panel dentro de Visual Studio Code, incluido Terminal Mode y permisos iniciales.
~/.claude/settings.json
Contiene configuraciones compartidas entre VS Code y la CLI: permisos, variables, Hooks y MCP.
Autocompletado para la configuración de Claude Code
Puedes añadir un JSON Schema para obtener validación y autocompletado dentro de VS Code.
{
"$schema": "https://json.schemastore.org/claude-code-settings.json"
}Elegir el modo inicial de permisos
La extensión dispone
de un ajuste
initialPermissionMode
para nuevas conversaciones.
| Modo | Uso general |
|---|---|
default |
Flujo normal de aprobaciones |
plan |
Planificar antes de editar |
acceptEdits |
Aceptar ediciones con menos interrupciones |
bypassPermissions |
Evitar solicitudes de permiso donde esté permitido |
Evita aumentar la autonomía hasta conocer bien el proyecto y las acciones que Claude puede ejecutar.
Administrar plugins desde VS Code
La extensión incluye una interfaz gráfica para administrar plugins instalados.
Abrir el gestor
/pluginsUsar servidores MCP desde VS Code
La extensión puede utilizar servidores MCP configurados para Claude Code.
Administrar servidores existentes
/mcpPara añadir determinados servidores MCP sigue siendo necesario utilizar la CLI o los archivos de configuración.
Claude Code también funciona en forks de VS Code
La integración no está limitada exclusivamente al editor oficial de Microsoft.
Compatible
Anthropic ofrece instalación de Claude Code para Cursor.
Compatible
Puede instalarse desde el sistema de extensiones compatible.
Compatible
La documentación también contempla otros forks del ecosistema VS Code.
Claude Code no funciona en VS Code
No aparece la extensión: ejecuta Developer: Reload Window o reinicia VS Code.
No aparece el icono superior: abre primero un archivo en el editor.
No inicia sesión: recarga la ventana y vuelve a abrir Claude Code.
ANTHROPIC_API_KEY no aparece:
abre VS Code
desde la terminal
utilizando
code ..
Necesitas una función CLI:
abre la terminal integrada
y ejecuta
claude.
Quieres conectar terminal externa:
ejecuta
/ide.
VS Code no detecta ANTHROPIC_API_KEY
A veces VS Code se inicia sin heredar las variables configuradas en tu shell.
Abre VS Code desde la shell
cd mi-proyecto
code .Si utilizas una suscripción Claude, normalmente resulta más sencillo autenticarte mediante tu cuenta.
Cómo trabajar con Claude Code y VS Code de forma segura
Abre el proyecto
Carga la raíz correcta en VS Code.
Da contexto preciso
Usa archivos, selecciones y menciones @.
Planifica
Para cambios importantes, revisa primero el plan.
Implementa
Permite que Claude realice los cambios necesarios.
Revisa el diff
Comprueba línea por línea qué cambió.
Ejecuta pruebas
Usa terminal o CLI para verificar el resultado.
Claude Code + VS Code para desarrollar WordPress
La integración resulta especialmente cómoda para trabajar sobre plugins y themes personalizados.
Abre únicamente tu proyecto
Si estás desarrollando un plugin propio, abre esa carpeta como workspace para mantener el contexto enfocado.
Analiza este plugin de WordPress.
Revisa:
- hooks y filtros
- llamadas AJAX
- consultas SQL
- nonces
- sanitización
- escaping
- permisos
- estructura de archivos
Primero crea un informe.
No modifiques nada todavía.No aceptes todos los cambios automáticamente
Una integración más cómoda no elimina la necesidad de revisar el código.
Revisa diffs antes de aceptar cambios importantes.
No habilites permisos amplios sin necesitarlos.
Utiliza Git antes de refactors importantes.
Pide ejecutar tests después de modificar lógica sensible.
Usa Plan Mode cuando todavía no conoces el impacto completo del cambio.
Documentación de Claude Code para VS Code
Anthropic actualiza con frecuencia la integración, por lo que conviene revisar la documentación para nuevas funciones y atajos.
VS Code Integration
Instalación, configuración, atajos, diffs, checkpoints y CLI.
Ver documentación oficial →Claude Code for VS Code
Extensión oficial publicada por Anthropic.
Ver extensión oficial →Platforms
Comparación entre VS Code, CLI, Desktop, web y otros entornos.
Ver plataformas →Guías relacionadas
Continúa con CLAUDE.md, Plan Mode, Skills, MCP y otras funciones.
FAQ sobre Claude Code en VS Code
Respuestas sobre instalación, extensión, terminal, diffs, contexto, checkpoints y configuración.
Sí. Anthropic mantiene una extensión oficial de Claude Code para Visual Studio Code con interfaz gráfica, inline diffs, contexto de archivos y otras funciones.
La extensión oficial requiere actualmente Visual Studio Code 1.98.0 o superior.
No es necesario realizar una instalación separada solo para comenzar. La extensión incluye acceso a la CLI desde la terminal integrada.
Sí. La integración conoce el contexto del editor y permite añadir archivos o selecciones concretas a la conversación.
Sí. Puedes mencionar archivos y utilizar selecciones con rangos concretos para proporcionar contexto preciso a Claude.
La extensión ofrece diffs integrados que facilitan revisar las modificaciones realizadas por Claude dentro del editor.
Los checkpoints registran cambios realizados por Claude y permiten retroceder el código a estados anteriores dentro de una conversación.
Sí.
Abre la terminal integrada
y ejecuta
claude.
La CLI puede integrarse
automáticamente
con el editor.
Sí.
La extensión y la CLI
comparten historial.
Puedes ejecutar
claude --resume
para localizar
y retomar
una conversación anterior.
Sí. La documentación actual contempla Cursor y otros editores basados en el ecosistema de VS Code, incluidos algunos compatibles con Open VSX.
Configura CLAUDE.md para tu proyecto
Ya puedes trabajar con Claude Code directamente desde VS Code. El siguiente paso es definir instrucciones permanentes para que Claude conozca el stack, arquitectura, comandos, convenciones y reglas importantes de cada proyecto.
Qué es CLAUDE.md →