Configurar Claude Code en el IDE

En el capítulo anterior conociste al júnior brillante: ese modelo que predice tokens a velocidad de vértigo, pero que sin contexto de tu proyecto trabaja en el vacío.

Ahora lo sientas a tu lado, dentro de tu editor. Eso es lo que hace Claude Code: pone ese modelo dentro de tu flujo de trabajo real, con acceso a tus ficheros y a tu terminal.

Qué es Claude Code (y qué no es)#

Claude Code es el asistente de programación con IA de Anthropic. A diferencia de una ventana de chat, trabaja sobre tu código real:

• Lee tus ficheros y entiende la estructura de tu proyecto.
• Propone cambios concretos (diffs) que puedes aceptar o rechazar.
• Ejecuta comandos en tu terminal, siempre pidiendo permiso antes.

La diferencia con el chatbot es esa: no te da texto que copiar. Te da acciones sobre tu repositorio, bajo tu supervisión.

Funciona en dos sitios:

• Terminal: el comando claude abre una sesión interactiva donde describes lo que quieres hacer.
• IDE (VS Code y JetBrains): una extensión integra el asistente en el editor. Puedes invocarla sin salir de donde ya trabajas.

El alumno de este curso trabaja en un IDE tipo VS Code, así que ese es el camino que abordaremos. Pero los conceptos son los mismos en ambos entornos.

Cómo instalarlo#

Los pasos exactos cambian con cada versión, así que lo correcto es seguir la documentación oficial en el momento en que lo instales. El flujo general es:

1. Instalar la extensión de Claude Code desde la tienda de extensiones de tu IDE (busca “Claude Code”), o la CLI si prefieres la terminal.
2. Autenticarte con tu cuenta de Anthropic (necesitas una suscripción o acceso por API).
3. Abrirlo en tu proyecto: con la carpeta de tu proyecto abierta en el IDE, activa la extensión. Desde ese momento el asistente ve tu código.

Para los comandos exactos de instalación, sigue la documentación oficial enlazada en la pestaña Fuentes.

Los comandos slash#

Dentro del asistente, escribir / seguido de un nombre lanza una acción predefinida. Son los comandos slash.

Algunos ejemplos básicos:

/help       — muestra los comandos disponibles
/clear      — limpia el historial de la conversacion actual
/exit       — cierra la sesion del asistente

Cada instalación puede tener más comandos según lo que hayas configurado. El / es la señal de que no estás describiendo una tarea en prosa, sino invocando una acción específica.

Las dos capas de configuración#

Aquí está la parte que más marca la diferencia entre usar el asistente de forma genérica y tenerlo afinado para tu proyecto.

Claude Code tiene dos capas de configuración que se combinan:

Configuración global (~/.claude/)#

Vive en tu directorio personal, fuera de cualquier proyecto. Se aplica en todos los proyectos que abras.

~/.claude/
  CLAUDE.md          # instrucciones globales: quien eres, como trabajas
  settings.json      # ajustes de comportamiento (permisos, hooks...)
  agents/            # agentes personalizados
  skills/            # skills (flujos reutilizables)
  memory/            # memorias persistentes entre sesiones

En CLAUDE.md (el global) describes cosas que aplican siempre: tu stack preferido, tus convenciones de código, cómo quieres que se comporte en general.

Configuración del proyecto (CLAUDE.md en la raíz del repo)#

Cada proyecto puede tener su propio CLAUDE.md en la raíz. Cuando el asistente arranca en esa carpeta, lo lee y lo combina con el global.

# CLAUDE.md del proyecto

# Stack del proyecto
Astro 6 + React 19 + TypeScript.
No uses Tailwind: los estilos van en Styled Components.

# Convenciones importantes
Componentes bajo 200 lineas. Logica en hooks y helpers.
Carpeta src/components/ para componentes, src/hooks/ para hooks.

La combinación es aditiva: la config global da el comportamiento base, la del proyecto añade el contexto específico. Un CLAUDE.md de proyecto bien escrito convierte al asistente en alguien que ya conoce tu repositorio antes de que le hagas la primera pregunta.

Permisos: el asistente no actúa solo#

Un detalle que conviene tener claro desde el principio: Claude Code no ejecuta nada sin pedirte permiso.

Cuando propone modificar un fichero, te muestra el diff y espera tu aprobación. Cuando quiere ejecutar un comando en la terminal, te lo notifica antes. Puedes configurar qué tipos de operaciones requieren confirmación explícita y cuáles puedes pre-aprobar para agilizar el flujo — eso lo veremos en el capítulo 7. Por ahora, lo importante es saber que el control lo tienes tú: el asistente propone, tú decides.

Eso es parte de lo que significa ser el senior que revisa y firma el código.

Comprueba lo que sabes#

Tu turno#

Este ejercicio se hace en local, sobre tu copia del proyecto Team Builder que llevas construyendo desde el Nivel 1.

Objetivo: tener Claude Code funcionando dentro de tu editor con un CLAUDE.md básico que describa el proyecto.

Pasos:

1. Sigue la guía oficial de instalación (enlazada en la pestaña Fuentes) para instalar Claude Code en tu IDE o en la terminal.

2. Abre la carpeta de tu proyecto Team Builder en el IDE.

3. Activa Claude Code en ese proyecto y comprueba que puede leer tus ficheros (pídele que te describa qué hace el fichero index.html o el principal de tu proyecto).

4. Crea un fichero CLAUDE.md en la raíz del proyecto con al menos esta información:

# CLAUDE.md

# Proyecto
Team Builder de Overwatch. Pagina HTML/CSS/JS que muestra heroes con su rol,
partidas jugadas y victorias.

# Stack
HTML semantico, CSS sin frameworks, JavaScript vanilla (sin bundler de momento).

# Convenciones
Nombres de variables en castellano cuando describen dominio del proyecto.
Sin librerias externas por ahora.

5. Cierra y vuelve a abrir el asistente en el proyecto. Pregúntale algo sobre el stack o la estructura. Observa si sus respuestas ya reflejan lo que pusiste en el CLAUDE.md.

No hay solución correcta única. El objetivo es que el asistente arranque en tu proyecto y que veas la diferencia entre una conversación con y sin el CLAUDE.md.