Tutorial de uso de Claude Code para VS Code

Claude Code es una herramienta de programación agentiva lanzada por Anthropic, también conocida como uno de los agentes de programación más poderosos del mundo. La extensión de Claude Code para VS Code ofrece una interfaz gráfica nativa, soporta vistas de Diff en línea, menciones con @, revisiones planificadas y más, siendo la forma recomendada de usar Claude Code en VS Code. Este documento describe principalmente cómo configurar y usar la extensión de Claude Code en VS Code a través del servicio proxy de AceData Cloud.

Proceso de solicitud

Para usar Claude Code, primero puedes ir a la página del servicio Claude Messages y hacer clic en el botón “Acquire” para obtener las credenciales necesarias para la solicitud:

Si aún no has iniciado sesión o registrado, serás redirigido automáticamente a la página de inicio de sesión que te invita a registrarte e iniciar sesión. Después de registrarte e iniciar sesión, serás devuelto automáticamente a la página actual. En la primera solicitud, se te otorgará un crédito gratuito para que puedas experimentar el servicio de Claude Code sin costo.

Instalación del plugin

Requisitos del sistema

VS Code 1.98.0 o superior (también es compatible con Cursor)

Pasos de instalación

En el mercado de extensiones de VS Code / Cursor, presiona Cmd+Shift+X (Mac) o Ctrl+Shift+X (Windows/Linux) para abrir la vista de extensiones, busca Claude Code, encuentra el plugin publicado oficialmente por Anthropic y haz clic en “Install” para instalar: Plugin Claude Code en el Marketplace de VS Code

Plugin Claude Code en el Marketplace de VS Code

También puedes instalar directamente a través de los siguientes enlaces:

Después de la instalación, selecciona “Trust” en el mensaje emergente para completar la instalación.

Si la extensión no aparece después de la instalación, reinicia VS Code o ejecuta “Developer: Reload Window” en el panel de comandos.

Configuración de la API de AceData Cloud

La primera vez que abras el plugin, se te pedirá que inicies sesión en la cuenta oficial de Anthropic. Puedes omitir el inicio de sesión oficial y usar la API proxy de AceData Cloud, sin necesidad de suscripción oficial.

Paso uno: Configurar variables de entorno

Puedes elegir configurar las variables de entorno en cualquiera de las siguientes ubicaciones: Opción A: Configuración a nivel de usuario (aplicable a todos los proyectos) Edita ~/.claude/settings.json (crea el archivo si no existe) y agrega la configuración env, reemplazando {token} con el token API que obtuviste en la consola de AceData Cloud:

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}

Opción B: Configuración a nivel de proyecto (solo para el proyecto actual) Crea .claude/settings.json (configuración compartida) o .claude/settings.local.json (configuración personal, ignorada por git) en el directorio raíz del proyecto:

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}

Consejo: El token API se puede ver en la consola de AceData Cloud. El valor de ANTHROPIC_AUTH_TOKEN se enviará automáticamente al servidor con el prefijo Bearer. La configuración a nivel de proyecto tiene prioridad sobre la configuración a nivel de usuario. Se recomienda usar la configuración compartida en .claude/settings.json para proyectos en equipo, y almacenar información sensible personal en .claude/settings.local.json.

Paso dos: Deshabilitar el aviso de inicio de sesión (opcional)

Si no deseas ver el aviso de inicio de sesión cada vez que abras el plugin, puedes marcar Disable Login Prompt en la configuración de VS Code: Busca “Claude Code login” en la configuración, encuentra la opción Disable Login Prompt y márcala. Una vez completada la configuración, vuelve a abrir el panel del plugin Claude Code para comenzar a usarlo normalmente.

Abrir el panel de Claude Code

Después de instalar y configurar, hay varias formas de abrir Claude Code:

Método	Acción
Barra de herramientas del editor	Haz clic en el ícono ✦ Spark en la esquina superior derecha del editor (necesitas abrir un archivo)
Barra de estado	Haz clic en ”✱ Claude Code” a la derecha de la barra de estado inferior (no es necesario abrir un archivo)
Panel de comandos	`Cmd+Shift+P` / `Ctrl+Shift+P`, busca “Claude Code”
Atajo de teclado	`Cmd+Esc` (Mac) / `Ctrl+Esc` (Windows/Linux) para cambiar el foco

A diferencia de herramientas como Cursor / Copilot que utilizan una barra lateral, Claude Code utiliza por defecto una vista de área de edición como área de chat, lo que proporciona un área visible más grande y una presentación de contenido más rica. También puedes arrastrar el panel a la barra lateral u otra ubicación. Panel de Claude Code en VS Code

Uso básico

Interacción conversacional

En el panel de Claude Code, simplemente ingresa lenguaje natural para interactuar con Claude. Por ejemplo:

“Ayúdame a analizar la arquitectura general de este proyecto”
“Este código tiene un bug, ayúdame a arreglarlo”
“Refactoriza esta función para mejorar la legibilidad”
“Escribe pruebas unitarias para este módulo”

Claude Code entenderá automáticamente el contexto de tu código y realizará análisis y ediciones a través de archivos. Cuando Claude necesite modificar un archivo, mostrará una vista de comparación Diff, donde podrás elegir aceptar o rechazar los cambios. Diálogo y sugerencias de Claude Code en VS Code

Diálogo y sugerencias de Claude Code en VS Code

Referencias contextuales

Usar el símbolo @ en la conversación permite referenciar archivos o contextos específicos:

@filename.py — Referencia a un archivo específico (soporta coincidencias difusas)
@src/components/ — Referencia a un directorio completo (necesita barra diagonal al final)
@terminal:name — Referencia a la salida del terminal

Selecciona el código en el editor y presiona Option+K (Mac) / Alt+K (Windows/Linux) para insertar rápidamente una referencia @ (como @app.ts#5-10).

Comandos de barra

Haz clic en el ícono / en el cuadro de diálogo, o simplemente ingresa /, para usar una variedad de funciones integradas: Los comandos más comunes incluyen:

Comando	Función
`/new`	Iniciar un nuevo diálogo
`/model`	Cambiar modelo
`/compact`	Comprimir contexto
`/mcp`	Configurar servicio MCP
`/config`	Abrir configuración
`/usage`	Ver uso
`/memory`	Gestionar memoria de Claude
`/help`	Mostrar información de ayuda

Ver historial de diálogos

Haz clic en el menú desplegable en la parte superior del panel para ver el historial de diálogos, que permite buscar por palabras clave y navegar por períodos de tiempo (Hoy, Ayer, Últimos 7 días, etc.), facilitando la recuperación de interacciones anteriores. Haz clic en cualquier diálogo para restaurar el historial completo de mensajes.

Revisar cambios de código

Cuando Claude necesite modificar un archivo, mostrará una vista de comparación Diff, mostrando la comparación entre el código original y el modificado. Podrás elegir aceptar o rechazar cada modificación, o indicarle a Claude qué enfoque diferente deseas: Vista de comparación Diff en VS Code

Modo de permisos

Puedes cambiar entre diferentes modos de permisos a través del indicador de modo en la parte inferior del panel:

Modo	Descripción
Default (Preguntar)	Preguntar confirmación antes de cada operación (por defecto)
Plan	Claude primero elabora un plan y espera aprobación, solo se ejecuta tras confirmación
acceptEdits	Acepta automáticamente las ediciones de archivos, pero los comandos de terminal aún requieren confirmación
bypassPermissions	Omite todos los avisos de permisos, completamente automatizado (usar con precaución)

Múltiples sesiones en paralelo

Usando Abrir en nueva pestaña o Abrir en nueva ventana en el panel de comandos, puedes iniciar múltiples diálogos independientes, cada uno manteniendo su propio historial y contexto, permitiendo manejar diferentes tareas en paralelo.

Otras configuraciones

Cambiar modelo

Claude Code admite cambiar entre diferentes modelos, como Claude Sonnet, Claude Opus, etc. Puedes configurarlo a través del comando /model o en la configuración del complemento en Modelo seleccionado.

Modo automático

En la configuración del complemento, puedes establecer el Modo de permiso inicial como bypassPermissions, al activarlo, Claude Code ejecutará ediciones de archivos, comandos de terminal, etc., sin mostrar confirmaciones una por una, logrando un flujo de trabajo completamente automatizado. También puedes establecerlo como acceptEdits para lograr un modo semi-automático que acepta ediciones automáticamente, pero los comandos de terminal aún requieren confirmación.

Nota: Antes de activar el modo automático, asegúrate de entender sus riesgos, se recomienda usarlo en entornos de proyectos confiables.

Usar CLI en la terminal

Si prefieres un estilo de línea de comandos, puedes marcar Usar terminal en la configuración de VS Code, Claude Code se ejecutará en modo CLI en la terminal integrada. También puedes abrir directamente la terminal integrada de VS Code y ejecutar el comando claude.

Preguntas frecuentes

¿Qué hacer si la conexión falla?

Asegúrate de que la configuración de variables de entorno en ~/.claude/settings.json o .claude/settings.json sea correcta, especialmente ANTHROPIC_AUTH_TOKEN y ANTHROPIC_BASE_URL
Verifica que el token de API sea válido (puedes verlo en la consola)
Comprueba si la conexión a internet es normal, asegurándote de poder acceder a https://api.acedata.cloud
Reinicia VS Code y vuelve a intentarlo

¿Por qué no aparece el ícono de Spark?

Asegúrate de haber abierto un archivo (solo abrir una carpeta no es suficiente)
Verifica que la versión de VS Code sea 1.98.0 o superior
Ejecuta “Developer: Recargar ventana” en el panel de comandos
O simplemente haz clic en ”✱ Claude Code” en la barra de estado inferior

¿Cómo ver el saldo restante?

Inicia sesión en la consola de AceData Cloud para ver el saldo restante y el uso actual de tu cuenta.

Aprende más

📖 Documentación oficial de Claude Code para VS Code
⌨️ Referencia de comandos y atajos de VS Code
🔧 Servicio Claude Code de AceData Cloud
💬 Si tienes alguna pregunta, no dudes en contactarnos a través del servicio al cliente de la plataforma.

​Proceso de solicitud

​Instalación del plugin

​Requisitos del sistema

​Pasos de instalación

​Configuración de la API de AceData Cloud

​Paso uno: Configurar variables de entorno

​Paso dos: Deshabilitar el aviso de inicio de sesión (opcional)

​Abrir el panel de Claude Code

​Uso básico

​Interacción conversacional

​Referencias contextuales

​Comandos de barra

​Ver historial de diálogos

​Revisar cambios de código

​Modo de permisos

​Múltiples sesiones en paralelo

​Otras configuraciones

​Cambiar modelo

​Modo automático

​Usar CLI en la terminal

​Preguntas frecuentes

​¿Qué hacer si la conexión falla?

​¿Por qué no aparece el ícono de Spark?

​¿Cómo ver el saldo restante?

​Aprende más