Cómo usar Claude Code en VS Code: guía de instalación completa

Utiliza Claude Code en la terminal y le encanta la productividad. Pero cada vez que tienes que cambiar entre el editor y la línea de comandos, pierdes preciosos segundos y pierdes el flujo. Ahora imagina Claude Code ejecutándose dentro de VS Code, junto con tu código, con acceso directo a los archivos abiertos, el panel de errores y el historial de git. Sin pestaña alternativa. Sin copiar y pegar.

La extensión oficial de Claude Code para Visual Studio Code hace precisamente eso. Y en esta completa guía lo aprenderás todo: desde la instalación hasta técnicas avanzadas que pocos desarrolladores conocen. Cubriremos cada detalle para que puedas salir de aquí usando Claude Code en VS Code como un profesional.

Si estas buscandocómo usar Claude Code en VS Codede la forma más eficiente posible, este es el tutorial definitivo. Empecemos.

1. ¿Qué es la extensión Claude Code para VS Code?

Anthropic ha lanzado la extensión oficial de Claude Code para VS Code, incorporando el agente de IA completo al editor. No estamos hablando de un autocompletado simple como Copilot: es el Claude Code completo, con todas sus capacidades de lectura, escritura, ejecución de comandos y razonamiento, integrado de forma nativa en Visual Studio Code.

Para comprender lo que ofrece la extensión, consulte la comparación con otras herramientas de IA en VS Code:

Característica	Código Claude VS Código	Copiloto de GitHub	Cursor
Autocompletar en línea	Sí (a través del chat en línea)	Sim	Sim
charla lateral	Sim	Sim	Sim
Ejecutar comandos en la terminal	Sí (autónomo)	Limitado	Sim
Edición independiente de varios archivos	Sim	Nao	Sim
Leyendo el proyecto completo	Sí (hasta 1 millón de tokens)	Limitado	Sim
Habilidades/comandos personalizados	Sí (.claude/commands/)	Nao	Normas
integración de git	Sí (comprometer, relaciones públicas, revisar)	Limitado	Sim
Aprobación de acciones con diff.	Sí (aceptar/rechazar)	Nao	Sim
Contexto de token de 1 millón	Sim	Nao	Nao

La extensión del Código Claude destaca especialmente en tres áreas:autonomía(realiza tareas complejas solo),contexto(lea el proyecto completo con tokens de ventana de 1 millón) ypersonalización(habilidades personalizadas para cualquier dominio).

Qué ofrece la extensión en la práctica

• Panel de chat lateral— chatea con Claude Code sin salir del editor
• Acceso al espacio de trabajo— Claude lee todos los archivos del proyecto abierto automáticamente
• Edición directa con diff.— los cambios se aplican a los archivos con diferencias visuales que usted aprueba o rechaza
• Terminal integrado— ejecuta comandos en la terminal VS Code (npm, git, pruebas)
• Contexto del editor— hace referencia al archivo activo, selección de texto, errores del panel Problemas
• Habilidades y comandos de barra— todas las habilidades en la carpeta .claude/commands/ funcionan normalmente
• sugerencias en línea— seleccione el código y solicite ediciones contextuales

2. Cómo instalar Claude Code en VS Code

Instalar Claude Code en VS Code es simple, pero hay algunos requisitos previos que debes cumplir primero. Repasemos el paso a paso completo.

Requisitos previos obligatorios

Requisito	Versión mínima	como comprobar
Código VS	1,96+	code --version
Nodo.js	18+	node --version
Código Claude CLI	Última versión	claude --version
Cuenta antrópica	Plan máximo o clave API	consola.anthropic.com

Paso 1: instale la CLI de Claude Code (si aún no la tiene)

Si aún no tienes Claude Code instalado globalmente, comienza aquí:

Paso 2: instale la extensión en VS Code

Hay tres formas de instalar la extensión. Elige el que prefieras:

Paso 3: autenticar

Después de la instalación, VS Code muestra el ícono de Claude Code en la barra lateral izquierda. Cuando se hace clic, la extensión solicita autenticación:

• Plan Máximo:haga clic en "Iniciar sesión con Anthropic": abre el navegador para iniciar sesión con su cuenta. Después de la autenticación, regresará automáticamente a VS Code.
• Clave API:haga clic en "Usar clave API": ingrese su clave directamente. Ideal para cualquiera que utilice la API de pago por uso.
• Autenticación existente:si ya ha autenticado Claude Code en la terminal (claude), la extensión puede reutilizar automáticamente la sesión.

Paso 4: comprueba si funciona

Si Claude respondió con información correcta sobre su proyecto, la instalación estará completa. Si hay errores, las causas más comunes son: Node.js desactualizado, CLI no instalado o clave API no válida.

Solución de problemas comunes de instalación

Problema	Causa	Solución
"Código Claude no encontrado"	CLI no instalado	npm install -g @anthropic-ai/claude-code
"Error de autenticación"	Token caducado	Rode claudeen el terminal para volver a autenticarse
La extensión no aparece	Código VS obsoleto	Actualización a v1.96+
"Node.js no encontrado"	El nodo no está en la RUTA	Reinstale Node.js o agréguelo a PATH
El panel se bloquea al abrir	Conflicto con otra extensión	Deshabilite las extensiones de IA de la competencia y reinicie

3. Configuración inicial: clave API, modelo y permisos

Con la extensión instalada y autenticada, es hora de configurarla para su flujo de trabajo. La extensión tiene configuraciones accesibles enSettings > Extensions > Claude Codeo directamente ensettings.json.

Configuraciones principales

Ajustes	que hace	Valor predeterminado	Recomendación
claude-code.model	Modelo a utilizar	Automático (el mejor disponible)	Déjalo por defecto
claude-code.autoApprove	Aprobar acciones automáticamente	off	Comience, enciéndalo después de acostumbrarse.
claude-code.showDiffBeforeApply	Mostrar diferencia antes de aplicar	true	Mantenlo encendido
claude-code.terminalProfile	Que terminal usar	Por defecto	Utilice el sistema predeterminado
claude-code.maxFileSize	Tamaño máximo de archivo	10MB	Aumente a 20 MB si trabaja con archivos CSV
claude-code.contextWindow	ventana contextual	Máximo disponible	Déjalo como máximo

Configuración recomendada en settings.json

Niveles de permiso

Claude Code en VS Code opera con tres niveles de permisos, al igual que en la terminal:

• Lectura:leer archivos, analizar código, buscar en el proyecto. Siempre permitido.
• Escribiendo:crea y edita archivos. Mostrar diferencias para aprobación (a menos que la aprobación automática esté activada).
• Ejecución:ejecuta comandos en la terminal (npm, git, scripts). Solicita aprobación por defecto.

Puedes controlar estos permisos enCLAUDE.mdconfiguración del proyecto y la extensión. La recomendación para los principiantes es mantener todo con aprobación manual hasta que se sienta cómodo con el comportamiento de Claude.

CLAUDE.md funciona de manera idéntica

el archivoCLAUDE.mden la raíz del proyecto funciona de la misma manera en la extensión. Se respetan las instrucciones, convenciones, restricciones y comandos personalizados. Si ya tienes CLAUDE.md configurado para el terminal, no necesitas cambiar nada en absoluto.

4. Interfaz: panel lateral, terminal integrado y sugerencias en línea

La extensión agrega varios elementos a VS Code. Te detallamos cada uno para que puedas sacarle el máximo provecho.

Panel lateral (panel de chat)

El panel principal donde hablas con Claude Code. Accede conCtrl+L (ou Cmd+Len Mac). Funciona como la terminal, pero con una interfaz visual completa:

• Campo de texto para escribir mensajes.
• Respuestas formateadas con resaltado de sintaxis
• Las acciones (crear/editar archivos, ejecutar comandos) aparecen con los botones "Aceptar"/"Rechazar"
• Desplazamiento del historial de conversaciones
• Referencia automática al archivo que está abierto en el editor.
• Indicador de tokens consumidos en la sesión.

Terminal integrado

También puede utilizar Claude Code a través de la CLI dentro del terminal VS Code integrado. Abra la terminal (Ctrl+`) y escribaclaude. Es exactamente igual que ejecutarlo en la terminal externa, pero sin salir del editor.

La diferencia entre usar el terminal integrado y el panel lateral: en el terminal tienes la experiencia CLI pura. En el panel lateral tienes diferencias visuales, botones de aprobación y referencia automática al archivo activo. Utilice lo que funcione mejor para cada tarea.

Sugerencias en línea (Chat en línea)

La característica más poderosa para ediciones rápidas. Seleccione un fragmento de código en el editor, presioneCtrl+Iy aparece un campo de chat directamente en el editor, al lado del código seleccionado.

Ejemplos de uso del chat en línea:

• "Agregar manejo de errores a esta función"
• "Convertir a asíncrono/esperar"
• "Agregar escritura TypeScript"
• "Refactorizar usando el patrón Estrategia"
• "Explica qué hace este código"
• "Escribe una prueba unitaria para esta función"

Claude aplica los cambios como diferencias en línea: verde para adiciones, rojo para eliminaciones. Acepta o rechaza cada cambio individualmente.

barra de estado

En la barra inferior de VS Code, un indicador muestra el estado de Claude Code en tiempo real: conectado (verde), procesando (amarillo/animación) o desconectado (rojo). Haga clic para ver detalles como tokens consumidos, modelo activo y tiempo de sesión.

Panel de problemas + Código Claude

Una de las integraciones más útiles: Claude Code puede acceder al panelProblemsdesde Código VS (Ctrl+Shift+M). Esto significa que los errores de TypeScript, ESLint y otras extensiones están disponibles como contexto. Puedes ordenar:

5. Atajos de teclado esenciales

Dominar los atajos es lo que separa a quienes usan Claude Code en VS Code de manera eficiente de quienes pierden el tiempo navegando por los menús. Aquí están todos los atajos que necesitas memorizar:

Principales atajos

Acceso directo (Windows/Linux)	Acceso directo (Mac)	Acao
Ctrl+L	Cmd+L	Abrir/enfocar el panel de chat lateral
Ctrl+I	Cmd+I	Chat en línea (sobre el código seleccionado)
Ctrl+Shift+I	Cmd+Shift+I	Enviar selección de texto para chatear
Ctrl+Shift+P> "Claude"	Cmd+Shift+P> "Claude"	Ver todos los comandos de extensión
Escape	Escape	Cancelar la operación actual de Claude
Ctrl+Enter	Cmd+Enter	Enviar mensaje en el chat (cuando es multilínea)
Ctrl+Shift+M	Cmd+Shift+M	Abrir panel de Problemas (usar con Claude)

Atajos de navegación útiles con Claude Code

Atajo	Acao	¿Por qué es útil con Claude?
Ctrl+`	Terminal integrado abierto	Utilice la CLI de Claude Code dentro de VS Code
Ctrl+Shift+X	Abrir panel de extensiones	Verifique la versión de la extensión Claude Code
Ctrl+K Ctrl+S	Abrir atajos de teclado	Personalizar los atajos de Claude Code
Ctrl+,	Abrir configuración	Ajustar la configuración de la extensión
Ctrl+Shift+G	Control de código abierto	Ver los cambios de git después de la edición de Claude

Personalizar atajos

Si los atajos predeterminados entran en conflicto con sus extensiones, personalícelosKeyboard Shortcuts(Ctrl+K Ctrl+S). Busque "claude" para ver y editar todos los accesos directos de la extensión. puedes intercambiarCtrl+Len cualquier combinación que prefieras.

6. Cómo utilizar habilidades dentro de VS Code

Las habilidades son la característica más poderosa de Claude Code y funcionan de manera idéntica en VS Code. Un archivo de habilidades y de instrucciones en.claude/commands/lo que convierte a Claude en un experto en cualquier ámbito: SEO, redacción, revisión de código, implementación, análisis de datos y mucho más.

Cómo funcionan las habilidades en VS Code

En la extensión VS Code, puedes invocar habilidades desde el panel de chat usando/nome-da-skill. La habilidad lleva las instrucciones y Claude comienza a seguir ese comportamiento especializado.

Estructura de una habilidad

donde están las habilidades

Ubicación	Alcance	Camino
Proyecto	Sólo para este repositorio	.claude/commands/
Usuario	Todos los proyectos	~/.claude/commands/

Más de 748 habilidades listas para instalar

Crear habilidades desde cero funciona, pero lleva tiempo. El paquete de Minhaskills.io de más de 748 habilidades profesionales ofrece habilidades listas para usar para 7 categorías: marketing digital, SEO y GEO, redacción publicitaria, desarrollo, redes sociales, monetización y flujos de trabajo y automatización. Puedes instalarlo en 2 minutos copiando las carpetas a.claude/commands/y todos están disponibles tanto en la terminal como en VS Code.

Comprobando las habilidades disponibles

En el panel de chat de VS Code, escriba/y la extensión muestra la lista de todas las habilidades disponibles con autocompletar. Puede explorar la lista y seleccionar la habilidad que necesita.

7. Consejos avanzados: múltiples archivos, git y depuración

Una vez dominados los conceptos básicos, pasemos a las técnicas avanzadas que lo transformarán de un usuario ocasional a un usuario avanzado de Claude Code en VS Code.

Consejo 1: menciona archivos con @

En el panel de chat, use@seguido del nombre del archivo para incluir como contexto explícito:

Consejo 2: refactorización de varios archivos

Claude Code en VS Code realiza refactorizaciones globales que "Buscar y reemplazar" no puede, porque comprende la semántica, no solo el texto:

Claude encuentra todos los archivos afectados, muestra diferencias para cada uno y usted los aprueba por lotes. Refactorización global segura en segundos.

Consejo 3: integración completa de git

Claude Code en VS Code tiene acceso completo a git. Úselo para automatizar tareas de control de versiones:

• Compromiso inteligente:"analizar los cambios y crear un commit con un mensaje descriptivo"
• Revisión de código:"revisar la diferencia entre la rama principal y esta"
• Resolución de conflictos:"resolver conflictos de fusión manteniendo la lógica de rama actual"
• Crear relaciones públicas:"crear una solicitud de extracción con un título y una descripción basada en las confirmaciones"
• Selección selectiva:"Aplicar sólo los cambios de la confirmación X que afecten al módulo de autenticación"

Después de que Claude realiza cambios a través de git, el panel de control de código fuente de VS Code (Ctrl+Shift+G) se actualiza automáticamente y muestra todos los archivos modificados.

Consejo 4: depuración asistida

Combine el depurador de VS Code con Claude Code para obtener una poderosa experiencia de depuración:

1. Poner un punto de interrupción en el código sospechoso
2. Ejecute el depurador (F5)
3. Cuando se detenga en el punto de interrupción, abra el panel de Claude (Ctrl+L)
4. Pregunte: "Estoy atascado en este punto de interrupción, las variables son [copiar del panel Variables]. ¿Qué está causando el error?"
5. Claude analiza el contexto y sugiere la corrección.

Consejo 5: espacios de trabajo con múltiples raíces

Si utiliza espacios de trabajo con varias carpetas (monorepos, frontend + backend), Claude Code tiene acceso a todas las carpetas del espacio de trabajo. Puedes solicitar tareas que traspasen fronteras:

• "Actualice la interfaz en el backend y el componente correspondiente en el frontend"
• "El punto final /api/users devuelve UserResponse. Asegúrese de que el tipo en la interfaz (paquetes/web) refleje la misma estructura"

Consejo 6: úselo con extensiones existentes

El Código Claude respeta sus extensiones. Los archivos creados o editados por Claude se formatean automáticamente si tiene Prettier o ESLint configurado para formatear al guardar. Los errores de TypeScript aparecen en el panel Problemas después de las ediciones. Todo integrado.

Consejo 7: historia y continuidad

El panel de chat mantiene el historial de conversaciones. Si cierra VS Code y vuelve a abrir, puede continuar donde lo dejó usando/resumeen el chat. Claude recupera el contexto de la sesión anterior.

8. Claude Code VS Code vs terminal: cuándo usar cada uno

Con dos formas de utilizar Claude Code, la pregunta es: ¿cuándo utilizar cada una? Aquí tienes una guía práctica basada en escenarios reales.

Guión	La mejor opción	Por qué
Edición rápida de código	Código VS (Ctrl+I)	El chat en línea es el flujo de trabajo más rápido para ediciones únicas
Refactorización de múltiples archivos	Ambos	VS Code muestra diferencias visuales, el terminal muestra el resultado completo
Análisis de datos/CSV	Terminal	La salida amplia se ve mejor en el terminal sin límites visuales
Depuración visual	Código VS	Diferencias en línea + panel de problemas + depurador integrado
Automatización con /loop	Terminal	El bucle duradero funciona mejor en un terminal dedicado
Revisión de código	Código VS	Las diferencias visuales en paralelo facilitan la revisión
Generar proyecto desde cero	Terminal	Más control sobre la creación de estructura de directorios
Escribir pruebas	Código VS	Archivo activo como contexto + sugerencias en línea
Implementación y CI/CD	Terminal	Comandos largos y registros extensos
Documentación	Código VS	Edite README/docs uno al lado del otro con el código
operaciones de git	Ambos	Código VS para visual, terminal para operaciones por lotes
Habilidades especializadas	Ambos	Las habilidades funcionan de manera idéntica en ambos

La respuesta pragmática

Utilice ambos.La extensión para el desarrollo diario: ediciones, pruebas, depuración y revisión de código. El terminal para tareas largas: automatización, implementación, análisis de datos, /loop. Puede hacer que ambos se ejecuten simultáneamente sin conflictos. Se comparten habilidades, configuraciones y autenticación.

Rendimiento: extensión vs terminal

Métrico	Extensión de código VS	Terminal CLI
Velocidad de respuesta	Idéntico	Idéntico
Consumo de tokens	Idéntico	Idéntico
Uso de RAM	~100-200 MB más (sobrecarga de código VS)	Encendedor
ventana contextual	Hasta 1 millón de tokens	Hasta 1 millón de tokens
Editar latencia	La diferencia visual añade ~1s	Aplicación directa

No existe ninguna diferencia funcional entre usar Claude Code en VS Code o en la terminal. El procesamiento se realiza en los mismos servidores de Anthropic. La única diferencia es la capa de presentación: diferencias visuales, botones de aprobación e integración con el editor.