Herramientas de IA para Programar

Usar Claude Code en VS Code: configuración, atajos y consejos (2026)

20 ago 202613 min de lectura

¿Quieres ejecutar Claude Code dentro de VS Code? Instala la extensión oficial de Anthropic desde el Marketplace (busca 'Claude Code', publisher Anthropic), inicia sesión con un plan Claude de pago y abre el panel desde el icono Spark ✱: tarda unos dos minutos. Necesitas una versión reciente de VS Code y un plan Pro, Max, Team o Enterprise (sin clave de API, sin nivel gratuito). Tres funciones que vale la pena usar de inmediato: diff review (aprobar cada cambio), plan mode y @-mention para traer archivos y la salida del terminal al contexto.

reverificado con la documentación oficial en code.claude.com/docs/en/vs-code (consultado el 10/08/2026).

Aclaración rápida: ¿qué significa 'claude code vs code'?

Si escribiste 'claude code vs code' esperando una comparación directa contra otra herramienta, llegaste a la página equivocada. Aquí 'vs code' = Visual Studio Code, así que la pregunta real es cómo usar Claude Code integrado dentro de VS Code, no un duelo. (¿De verdad buscas una comparación? Empieza por qué es Claude Code para asentar lo básico primero.)

Otra confusión habitual: este artículo trata de la extensión oficial 'Claude Code' (publisher anthropic.claude-code, icono Spark ✱, con diff/plan/checkpoint), no la antigua extensión de chat en la barra lateral 'Claude AI' que muchas guías te muestran. Son productos completamente distintos. La extensión oficial entiende todo tu workspace, edita varios archivos de una sola pasada y devuelve un diff para que lo revises; las extensiones de chat más antiguas son, en su mayoría, una cajita de preguntas y respuestas junto a tu código. Si una guía nunca menciona el icono Spark, el diff review ni el plan mode, casi con seguridad habla de otro producto.

Lo que necesitas primero (requisitos)

Antes de instalar, comprueba tres cosas para no perder el tiempo:

  • Una versión reciente de VS Code: la documentación oficial indica la versión >= 1.94.0. Compruébalo en Help -> About y actualiza antes si la tuya es demasiado antigua.
  • Un plan Claude de pago: Pro, Max, Team o Enterprise (o acceso a través del Claude Console). Este es un requisito obligatorio.
  • Sin clave de API, sin nivel gratuito. La extensión inicia sesión con tu cuenta de Claude en lugar de una clave pegada, como en algunas otras herramientas. Si aún no tienes un plan, no podrás usarla: esa es una diferencia real frente a algunas extensiones de IA de terceros que te dejan enchufar tu propia clave de API.

Voy a ser sincera sobre la limitación: como depende de un plan de pago, no es la opción para quien espera usarla gratis. Lo bueno es que nunca gestionas cuotas de API ni te llevas un susto con una factura de tokens: el uso se queda dentro de tu suscripción. Si dudas entre planes, elige según la frecuencia de uso: Pro sobra para probar o aprender, mientras que Max justifica su precio si pasas el día entero en la herramienta.

¿Aún no tienes claro qué es Claude Code ni hasta dónde llega? Lee la introducción a Claude Code y luego vuelve aquí para instalar la extensión.

Cómo instalar la extensión Claude Code para VS Code (paso a paso)

Todo el proceso tarda unos dos minutos. Cuatro pasos:

  1. Abre la pestaña de extensiones con Ctrl+Shift+X (Windows/Linux) o Cmd+Shift+X (macOS). Escribe 'Claude Code' en el buscador, elige la extensión del publisher Anthropic (no la confundas con las otras extensiones 'Claude AI') y haz clic en Install.
  2. Abre el panel de Claude Code haciendo clic en el icono Spark ✱. Aparece en la barra de herramientas del editor (arriba a la derecha con un archivo abierto), en la Activity Bar de la izquierda o en la barra de estado de abajo. Consejo: necesitas al menos un archivo abierto para que el icono se vea con claridad.
  3. Inicia sesión: haz clic en Sign in y VS Code abre el navegador para autenticarte con tu cuenta de Claude. Vuelve a VS Code y el panel queda listo.
  4. Envía un prompt de prueba: prueba algo sencillo como 'explica qué hace este archivo' para confirmar que todo funciona. Si Claude responde y reconoce el archivo que tienes abierto, la instalación está bien.

Un hábito que conviene empezar ya: después de instalar, abre la carpeta real del proyecto (no un archivo suelto) para que Claude vea todo el contexto del workspace. En Windows, si trabajas con WSL, abre el proyecto en el modo WSL de VS Code como de costumbre y luego abre el panel: la extensión funciona sin problemas en ese entorno.

Esta extensión no se limita a VS Code puro: también se instala en Cursor, Kiro y builds basados en Open VSX, con los mismos pasos. Si además quieres el comando claude en tu terminal, consulta la guía completa de instalación de Claude Code CLI (la extensión y la CLI se complementan, más sobre esto abajo).

La interfaz y las funciones principales dentro de VS Code

Comparada con escribir comandos en el terminal, la extensión te da una interfaz mucho más visual. Estas son las funciones que vale la pena usar:

  • Diff review en paralelo: cada vez que Claude edita un archivo, el cambio aparece como un diff en paralelo, en verde y rojo bien claros. Lo revisas un cambio a la vez, aceptas o rechazas cada uno por separado e incluso puedes editar directamente en el diff antes de aceptar. Es un mundo de diferencia frente a pegar código de un chat y fusionarlo a mano: siempre ves exactamente qué está a punto de cambiar y puedes bloquearlo línea por línea. Esta es la razón más fuerte para trabajar en VS Code.
  • Plan mode: en el plan mode, Claude abre un plan en Markdown para que lo leas y comentes inline antes de que toque una sola línea de código. Encaja de maravilla en tareas grandes: revisas la dirección, ajustas un par de puntos del plan y solo entonces lo dejas correr, sin tener que ver a la IA lanzarse sobre una docena de archivos a la vez. Para profundizar en el flujo de planificación, mira los 10 primeros pasos para principiantes.
  • @-mention para añadir contexto a un prompt: @file#5-10 (solo las líneas 5-10), @folder/ (una carpeta entera), @terminal:name (trae la salida del terminal) y @browser (controla Chrome). En lugar de copiar y pegar, apuntas a Claude directo a lo que necesita ver. Al depurar, por ejemplo, @file#40-72 mantiene a Claude en la función averiada exacta, en vez de leer un archivo de mil líneas: más preciso y más barato en tokens.
  • Checkpoint / Rewind: revierte los cambios de archivo a un estado anterior si Claude toma el rumbo equivocado, una red de seguridad para que no dependas solo de git stash o del Ctrl+Z paso a paso.
  • Historial de sesiones + varias pestañas: ejecuta varias sesiones en paralelo y vuelve a conversaciones pasadas, cómodo cuando haces malabares con varios hilos: una pestaña a mitad de un refactor, otra para una pregunta rápida de API.
  • Permission mode: ahí mismo, en la caja del prompt, elige Manual (aprobar cada acción a mano), Plan (solo planificar) o editar automáticamente. Mantenlo cauteloso en un repositorio desconocido y aflójalo cuando le tengas confianza. Puedes fijar un valor por defecto de entrada con initialPermissionMode en la configuración.

Atajos de teclado de Claude Code en VS Code

Aquí tienes la tabla completa de atajos (de la documentación oficial) que la mayoría de las guías deja fuera:

AcciónmacOSWindows / Linux
Cambiar el foco entre el editor y Claude (Focus Input)Cmd+EscCtrl+Esc
Abrir Claude en una pestaña nuevaCmd+Shift+EscCtrl+Shift+Esc
Insertar una @-mention con las líneas seleccionadasOption+KAlt+K
Alternar la vista FocusCtrl+Option+FCtrl+Alt+F
Reabrir la última sesión cerradaCmd+Shift+TCtrl+Shift+T
Nueva línea en la caja del promptShift+EnterShift+Enter

¿Olvidaste alguno? Abre la Command Palette (Ctrl/Cmd+Shift+P) y escribe 'Claude Code' para ver todos los comandos. Para un resumen imprimible de todo, mira la cheat sheet de Claude Code.

Consejos para sacarle el máximo partido a Claude Code en VS Code

Instalarlo lo puede hacer cualquiera, pero moverlo con soltura pide unos cuantos trucos. Estos son los que uso a diario:

  • Mueve el panel a la barra lateral secundaria: así Claude se sienta junto a tu código en lugar de tapar el editor. Solo arrastra el icono Spark hasta el borde derecho: ver el diff y el código a la vez es mucho más cómodo.
  • Escribe un CLAUDE.md como tu 'memoria del proyecto': este es el mayor salto de calidad de todos. Pon convenciones, stack y comandos de prueba en este archivo para que Claude no tenga que adivinar. Mira cómo escribir un CLAUDE.md sólido.
  • Usa @terminal en lugar de copiar y pegar errores: ejecuta el comando que falla en el terminal integrado y @terminal vuelca toda la salida en tu prompt: más rápido y con más contexto que pegar a mano.
  • Alterna useTerminal: si prefieres un aire de CLI, actívalo en la configuración; si quieres una GUI pura, desactívalo.
  • Considera autosave y respectGitIgnore: para mantener los diffs limpios y evitar que Claude lea basura o archivos sensibles por accidente.
  • Controla tu coste: escribe /usage para ver el consumo y /compact para comprimir el contexto cuando un chat se llena: mantiene a Claude enfocado y ahorra tokens.
  • Mantén una statusline ordenada: personalízala para ver de un vistazo tu modelo actual y el coste; mira la guía de personalización de la statusline.

Un hábito que vale la pena construir: antes de delegar una tarea grande, dedica 30 segundos a dejar claros el objetivo y las restricciones en el prompt (o guárdalos en CLAUDE.md) y luego activa el plan mode para revisar la dirección antes de dejar que edite. Cuesta un instante más, pero recorta mucho la frecuencia con la que Claude se desvía del objetivo y te ahorra rewinds. En un repositorio grande, combínalo con @folder/ para el módulo en el que estás trabajando, en vez de soltarle el proyecto entero: Claude mantiene el foco, la salida sale más limpia y cuesta menos tokens.

Extensión vs CLI: ¿cuál deberías usar?

Una pregunta habitual: una vez que tienes la extensión, ¿sigues necesitando la CLI? Comparación rápida:

CriterioExtensión (en VS Code)CLI (claude en el terminal)
InterfazGUI visual: diff, plan, checkpointLínea de comandos pura
Conjunto de comandosSuficiente para el panelEl más completo: ! para ejecutar bash, autocompletado con tab, todos los comandos
Pone claude en tu PATHNo (la extensión incluye su propia CLI para el panel)Necesita una instalación aparte

Nota importante: la extensión no añade el comando claude a tu PATH, así que, para escribir claude en el terminal integrado, tienes que instalar la CLI standalone por separado. Consejo práctico: usa ambas - la GUI para revisar diffs y planes, la CLI para acciones rápidas - y comparten el mismo historial, así que puedes hacer claude --resume para retomar una sesión. Todos los detalles de instalación de la CLI están en la guía completa de instalación de Claude Code.

Problemas comunes y cómo solucionarlos

Algunos problemas frecuentes y soluciones rápidas:

  • Cmd+Esc no funciona en macOS Tahoe: ese atajo suele quedárselo el Game Overlay. Ve a System Settings -> Keyboard -> Keyboard Shortcuts -> Game Controllers y desmarca el elemento que lo reclama, o reasigna Claude Code: Focus input a otra combinación en los atajos de teclado de VS Code.
  • Sin icono Spark ✱: comprueba por orden: ¿tienes al menos un archivo abierto? ¿VS Code está >= 1.94.0? Prueba Reload Window (Command Palette), desactiva temporalmente otras extensiones de IA en conflicto y habilita el workspace trust para la carpeta del proyecto.
  • 'Please run /login': prueba Reload Window, o cierra VS Code y vuelve a abrir el proyecto con code . desde el terminal para que tome la sesión iniciada correcta.
  • Claude no responde: revisa tu red, abre una sesión nueva o prueba la CLI para acotar si el problema es de la extensión o de tu cuenta. Si el chat se ha vuelto muy largo, escribe /compact para comprimir el contexto e inténtalo de nuevo.
  • Los diffs no aparecen o se aplican en el lugar equivocado: asegúrate de que el archivo esté guardado y de que no lo esté sobrescribiendo otra extensión (un formateador que corre al guardar). Usa un autosave controlado y desactiva temporalmente el format-on-save mientras revisas un diff grande.

¿Te topaste con algo que no está en esta lista? Consulta el resumen de errores comunes de Claude Code y cómo solucionarlos.

Sube de nivel con skills y subagents prediseñados

La extensión se vuelve mucho más potente cuando tu Claude Code ya tiene un conjunto de skills, subagents y workflows, en lugar de armarlos tú desde cero. Si quieres ir rápido, una opción es el kit AgentKit para Claude Code: un conjunto empaquetado de skills y agents para trabajo de desarrollo y marketing; puedes probar AgentKit (20% de descuento por el enlace) para ver si encaja en tu flujo de trabajo. No es obligatorio: la extensión de serie basta por sí sola, y un kit es solo una forma opcional de ir más rápido.

Preguntas frecuentes (FAQ)

¿Claude Code en VS Code es gratis?

No. La extensión se instala gratis, pero para usarla necesitas un plan Claude de pago (Pro, Max, Team o Enterprise) o acceso a través del Claude Console. No hay nivel gratuito y no puedes usarla con una clave de API.

¿Necesito un plan Pro?

Necesitas al menos un plan de pago; Pro es el nivel más bajo que sirve para una persona. Max encaja con un uso intenso, mientras que Team y Enterprise son para grupos.

¿En qué se diferencia de la extensión 'Claude AI', Cline o Continue?

La extensión 'Claude Code' es el build oficial de Anthropic (publisher anthropic.claude-code), con diff review, plan mode, checkpoints y @-mention ligados a tu cuenta de Claude. Extensiones como el antiguo chat 'Claude AI', Cline y Continue son productos distintos que funcionan y se sienten de otra manera.

¿Puedo usarlo en Cursor?

Sí. La extensión Claude Code se instala en Cursor, Kiro y editores basados en Open VSX, con los mismos pasos que en VS Code.

¿Necesito instalar la CLI por separado?

No necesariamente. La extensión ya incluye una CLI para el panel. Solo necesitas la CLI standalone si quieres escribir el comando claude en el terminal integrado, ya que la extensión no añade claude a tu PATH.

¿Funciona en Windows/WSL?

Sí. La extensión corre en Windows, macOS y Linux; para WSL, abre el proyecto en el modo WSL de VS Code como de costumbre y luego usa el panel de Claude Code.

Conclusión y próximos pasos

Eso es Claude Code funcionando dentro de VS Code: instala la extensión oficial, inicia sesión con un plan de pago y apóyate en diff/plan/checkpoint, en @-mention y en los atajos para programar más rápido. Siguiente paso: si estás empezando, lee los 10 primeros pasos para principiantes; si además quieres la línea de comandos, mira la guía completa de instalación de Claude Code CLI. ¡Feliz programación!

J

Jasmine

Autora · Jasmine Daily

La autora detrás de Jasmine Daily, anotando pensamientos, experiencias y momentos cotidianos. Honesta, sin prisa, imperfecta.

Jasmine Daily

Hay más esperando a ser leído.

Si este texto te llegó, explora algunas páginas más del diario.

Leer a continuación

Entradas relacionadas