Claude Code + VS Code: El Combo Perfecto

Aunque Claude Code es una herramienta de terminal, se integra perfectamente con Visual Studio Code. En esta guía te muestro cómo configurar el mejor flujo de trabajo.

Si quieres dominar Claude Code, no te pierdas el curso de Claude Code.

¿Por Qué Usar Ambos?

  • VS Code: Edición visual, extensiones, debugging
  • Claude Code: Generación de código con IA, contexto completo

Juntos: editas visualmente y generas código con IA sin salir del editor.

Configuración Básica

1. Instalar Claude Code

Si aún no lo tienes, sigue nuestra guía de Claude Code para principiantes.

npm install -g @anthropic-ai/claude-code

2. Configurar API Key

Añade a tu perfil de shell (~/.zshrc o ~/.bashrc):

export ANTHROPIC_API_KEY="tu-api-key"

3. Abrir Terminal en VS Code

Ctrl+` (backtick) abre la terminal integrada.

Ejecutar Claude Code

En la terminal de VS Code:

claude

Claude Code detectará automáticamente tu proyecto.

Configuración Avanzada

Task en VS Code

Crea un task para iniciar Claude Code rápidamente. Añade a .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude Code",
      "type": "shell",
      "command": "claude",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": []
    }
  ]
}

Ahora puedes iniciar con Ctrl+Shift+P > Run Task > Claude Code.

Atajo de Teclado

Añade a keybindings.json:

{
  "key": "ctrl+shift+c",
  "command": "workbench.action.tasks.runTask",
  "args": "Claude Code"
}

Flujo de Trabajo Recomendado

Split Terminal

  1. Abre VS Code en tu proyecto
  2. Abre terminal (Ctrl+`)
  3. Divide terminal (click en el icono de split)
  4. En un lado: comandos normales (npm, git)
  5. En el otro: Claude Code

Workflow

  1. Edita archivos en el editor de VS Code
  2. Pide cambios a Claude Code en la terminal
  3. Revisa los cambios con el diff de VS Code
  4. Commit desde la terminal o Source Control

Extensiones Útiles

GitLens

Ver historial de cambios que Claude hace.

Error Lens

Ver errores inline que Claude puede corregir.

Todo Highlight

Resaltar TODOs que puedes pedir a Claude que complete.

Configuración de Terminal

En VS Code settings (Ctrl+,):

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.scrollback": 10000,
  "terminal.integrated.copyOnSelection": true
}

Tips de Productividad

1. Referencia Archivos

En Claude Code, usa @ para referenciar archivos que tienes abiertos. Aprende más sobre esto en los comandos esenciales de Claude Code.

Revisa @src/components/Button.tsx y mejora la accesibilidad

2. Copia Rápida

Selecciona código en VS Code, copia, y pégalo en Claude Code para análisis.

3. Diff View

Después de que Claude modifique archivos, usa el Source Control de VS Code para revisar cambios.

Problemas Comunes

Claude Code no encuentra archivos

Asegúrate de estar en el directorio correcto. Usa pwd para verificar.

Terminal muy pequeña

Maximiza el panel de terminal o usa terminal externa.

API Key no funciona

Cierra VS Code y vuelve a abrir para que cargue las variables de entorno actualizadas. Si el error persiste, consulta nuestra guía de errores comunes en APIs de IA.

Alternativa: Cursor

Si prefieres una experiencia más integrada, considera Cursor, que es VS Code con IA nativa. Pero Claude Code te da más control y acceso directo a Claude.

Conclusión

VS Code + Claude Code es una combinación poderosa. Mantienes las ventajas del editor visual mientras aprovechas el poder de Claude para generar y modificar código.

Si quieres llevar tu productividad al siguiente nivel, también puedes explorar testing automatizado con Claude Code y desarrollo web con Claude Code. Todo esto y más en el curso de Claude Code.