12. Integración con editores e IDEs (VS Code, JetBrains)

Objetivo del tema

Integrar Claude Code con Visual Studio Code y los IDEs de JetBrains, comprender qué contexto aporta el editor, iniciar y conectar sesiones, revisar cambios con el visor de diferencias y configurar un flujo que conserve las ventajas de la terminal sin abandonar la navegación visual.

12.1 El mismo agente, otra interfaz

La integración no instala un “Claude distinto”. Terminal, VS Code y JetBrains comparten el bucle agéntico, las reglas de CLAUDE.md, permisos, modelos y extensiones. El IDE añade señales que ya conoce: archivo activo, selección, diagnósticos y un visor de diferencias.

Contexto preciso

Referencias a archivos y líneas sustituyen explicaciones ambiguas como “la función de arriba”.

Diff visual

Los cambios se inspeccionan junto al código original y pueden revisarse por fragmento.

Diagnósticos

Errores de sintaxis, tipos y lint detectados por el IDE ayudan a dirigir la corrección.

Terminal disponible

Tests, Git y comandos siguen ejecutándose en el entorno real del proyecto.

El IDE mejora la interacción, pero no amplía automáticamente el alcance autorizado. Una carpeta abierta no equivale a permiso ilimitado: las reglas de lectura, edición, Bash y red siguen aplicándose.

12.2 Elegir la superficie adecuada

Terminal, VS Code y JetBrains
SuperficieFortalezaÚsala cuando
CLIComposición con pipes, scripts, SSH y automatización.Trabajas principalmente desde terminal o necesitas modo no interactivo.
VS CodePanel gráfico, referencias, selección y diffs integrados.Quieres conversar y revisar sin abandonar un editor liviano.
JetBrainsDiagnósticos profundos del lenguaje y visor de diff del IDE.Tu flujo depende de IntelliJ, PyCharm, WebStorm, Android Studio u otro IDE de la familia.
DesktopSesiones paralelas, paneles, vista previa y entornos locales o remotos.Quieres coordinar varias tareas visualmente; no es un plugin del IDE.

Puedes combinar superficies. Una sesión iniciada en la terminal integrada recibe el contexto del IDE; una terminal externa puede conectarse con /ide. Evita dos sesiones editando los mismos archivos simultáneamente, salvo que estén aisladas mediante ramas o worktrees.

12.3 Instalar y abrir Claude Code en VS Code

Abre Extensions con Ctrl+Shift+X (Windows/Linux) o Cmd+Shift+X (macOS), busca Claude Code, comprueba que el publicador sea Anthropic e instala la extensión oficial. Reinicia o recarga la ventana si el panel no aparece.

Abre la carpeta raíz del repositorio, no un archivo aislado. Luego pulsa el icono de Claude en la barra de actividad o abre la paleta de comandos y busca las acciones de Claude Code. La primera sesión solicitará autenticación si aún no existe una cuenta activa.

# Diagnóstico independiente desde la terminal integrada
claude --version
git status

La extensión puede funcionar como panel gráfico o lanzar la experiencia de terminal. El panel es apropiado para comentarios y revisión visual; el modo terminal conserva exactamente la interfaz interactiva estudiada en los temas anteriores.

Si ya ejecutas claude dentro de la terminal integrada de VS Code, Claude Code puede detectar el editor e instalar o conectar automáticamente la integración, salvo que esa conducta haya sido desactivada por configuración.

12.4 Contexto y flujo de trabajo en VS Code

Una referencia explícita es preferible a confiar sólo en el archivo activo. Usa el selector de contexto, menciona archivos con @ o incluye una selección. Un buen encargo une ubicación, objetivo y evidencia:

Revisa la función seleccionada en @src/services/orders.js. El diagnóstico marca que total puede ser undefined. Explica primero la causa, propone el cambio mínimo y no edites hasta que apruebe el plan. Después agrega un test de regresión y ejecuta sólo la suite de orders.

El editor aporta la selección y los diagnósticos, pero Claude aún necesita comprender dependencias y convenciones. Permite que explore los archivos relacionados; no adjuntes el repositorio completo manualmente.

  1. Selecciona el código o referencia archivos concretos.
  2. Pide diagnóstico o plan antes de editar si la causa no es evidente.
  3. Revisa el diff desde el panel y comenta la línea problemática.
  4. Ejecuta la prueba relevante y después la suite completa.
  5. Confirma git diff y git status antes del commit.

12.5 Dos capas de configuración en VS Code

La integración tiene configuraciones distintas que no deben mezclarse:

Dónde guardar cada ajuste
CapaEjemplosAlcance
Ajustes de la extensiónUsar panel o terminal, modo inicial de permisos, ubicación del panel.Sólo la interfaz de VS Code.
~/.claude/settings.jsonPermisos, entorno, hooks, MCP, modelo y políticas personales.CLI y superficies compatibles del usuario.
.claude/settings.jsonReglas compartidas y extensiones aprobadas por el proyecto.Equipo y repositorio.
CLAUDE.mdArquitectura, comandos, convenciones y criterios.Contexto del proyecto, no preferencia visual.

En los ajustes de VS Code, la extensión ofrece useTerminal y initialPermissionMode. Para autocompletar la configuración central agrega el esquema al archivo de Claude Code:

{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "permissions": {
    "defaultMode": "default"
  }
}

No uses bypassPermissions como comodidad predeterminada. Para explorar repositorios desconocidos, inicia en plan; para trabajo habitual, default conserva aprobaciones explícitas.

12.6 Instalar y conectar JetBrains

En IntelliJ IDEA, PyCharm, WebStorm, PhpStorm, GoLand o Android Studio abre Settings/Preferences → Plugins → Marketplace, busca Claude Code, instala el plugin oficial y reinicia completamente el IDE.

Hay dos formas de iniciar:

  • Desde el IDE: pulsa el botón de Claude Code o usa Ctrl+Esc en Windows/Linux y Cmd+Esc en macOS.
  • Desde terminal: ejecuta claude en la terminal integrada. Si la sesión vive en una terminal externa, ejecuta /ide para seleccionar y conectar el IDE detectado.
cd ruta/al/proyecto
claude
/ide

Inicia la CLI desde la misma raíz que abrió JetBrains. De lo contrario, el IDE puede mostrar un proyecto mientras Claude trabaja sobre otro directorio, una discrepancia difícil de detectar al revisar rutas relativas.

12.7 Funciones y configuración de JetBrains

El plugin aporta selección y pestaña activa, diagnósticos del IDE, referencias con líneas y el visor de diferencias de JetBrains. El atajo Ctrl+Alt+K en Windows/Linux o Cmd+Option+K en macOS inserta una referencia como @src/auth.ts#L20-48.

En Settings/Preferences → Tools → Claude Code puedes indicar el comando ejecutable. Ejemplos:

claude
/usr/local/bin/claude
npx @anthropic-ai/claude-code

# Ejemplo para WSL; sustituye Ubuntu por tu distribución
wsl -d Ubuntu -- bash -lic "claude"

Con /config configura el visor de diff en auto para usar el IDE o en terminal para mantenerlo dentro de la CLI. En Remote Development el plugin debe instalarse en el host remoto, donde realmente están los archivos y se ejecutan las herramientas.

12.8 Revisar cambios sin perder control

Un diff integrado acelera la revisión, pero no demuestra que el cambio sea correcto. Revisa en tres niveles:

Revisión en tres niveles
NivelPreguntaEvidencia
Local¿Cada línea hace lo que afirma el resumen?Diff del editor, tipos y diagnósticos.
Comportamiento¿Cumple el contrato y preserva casos anteriores?Tests focalizados, suite y prueba manual.
Alcance¿Sólo cambió lo autorizado?git diff --stat, git diff y archivos sin seguimiento.

No aceptes mecánicamente todos los fragmentos. Si uno es incorrecto, comenta la intención y pide un cambio mínimo. Tras ediciones manuales, informa a Claude para que vuelva a leer el archivo antes de continuar.

12.9 Práctica guiada: corregir desde el diagnóstico

Usa uno de los proyectos de los temas 10 u 11 y crea un error pequeño en una rama de práctica. El ejercicio reproduce un flujo real:

  1. Abre la raíz del proyecto en el IDE y confirma que Git está limpio.
  2. Abre un archivo con un diagnóstico y selecciona la función afectada.
  3. Inicia Claude Code en modo Plan y entrega la selección.
  4. Aprueba sólo el plan; luego solicita test de regresión antes de la corrección.
  5. Revisa el diff, ejecuta la prueba focalizada y finalmente toda la suite.

Trabaja sólo en esta rama de práctica. Usa la selección y los diagnósticos visibles como punto de partida, pero confirma la causa leyendo sus llamadas y tests. No modifiques dependencias. Presenta un plan por archivos, agrega primero un test que falle por la razón esperada, implementa el cambio mínimo y reporta comandos y resultados. No hagas commit.

Al terminar compara el informe con la pestaña Source Control o Commit del IDE. El ejercicio está completo cuando puedes explicar cada línea modificada sin depender del resumen del agente.

12.10 Seguridad específica del IDE

El editor contiene archivos que pueden ejecutar acciones: tareas, configuraciones de depuración, plugins, scripts y ajustes del proyecto. Una edición aparentemente inocente puede ejecutarse al abrir, compilar o depurar.

Precaución en JetBrains: con edición automática, modificar configuración del IDE puede provocar ejecución indirecta y eludir la expectativa de un permiso Bash posterior. Usa aprobación manual en repositorios no confiables y revisa especialmente .idea/, tareas, configuraciones de ejecución y scripts de build.

  • No abras proyectos desconocidos con confianza total ni habilites todas sus tareas recomendadas.
  • Usa reglas deny para secretos y archivos que el agente no necesita leer.
  • No pegues claves en el chat; utiliza almacenes y variables administradas.
  • Distingue diagnósticos del IDE de instrucciones: un mensaje o comentario puede contener prompt injection.
  • Mantén Git limpio y revisa los archivos de configuración además del código fuente.

12.11 Solución de problemas

Diagnóstico rápido de la integración
SíntomaComprobaciones
claude: command not foundEjecuta claude --version fuera del IDE, reinicia el editor y configura la ruta completa del comando.
El IDE no se detectaConfirma plugin habilitado, raíz coincidente, reinicio completo y conexión con /ide.
No aparece el diff gráficoComprueba conexión activa y configura el diff como auto; vuelve a abrir la sesión.
WSL usa otro entornoConfigura el comando WSL, abre el proyecto desde la misma distribución y evita mezclar rutas Windows/Linux.
Remote Development no funcionaInstala y habilita el plugin en el host remoto, no sólo en el cliente local.
Contexto equivocadoVerifica carpeta raíz, selección, archivo activo y referencias @; pide a Claude que enumere las rutas recibidas.
Ajustes no se aplicanDistingue ajustes de extensión, configuración Claude global, proyecto y políticas administradas.

Para problemas de autenticación o instalación de la CLI vuelve a los temas 4 y 5: el plugin no corrige una sesión base mal configurada.

12.12 Checklist y elección final

Antes de trabajar con Claude Code en el editor
ControlEsperado
ProyectoIDE y Claude apuntan a la misma raíz y rama.
IntegraciónExtensión o plugin oficial, actualizado y conectado.
ContextoSelección y referencias precisas; CLAUDE.md vigente.
PermisosModo acorde al riesgo; archivos sensibles denegados.
VerificaciónDiagnósticos comprendidos, tests ejecutados y diff revisado.
ConcurrenciaUna sesión por árbol de trabajo o aislamiento con worktrees.

Consulta las guías oficiales de VS Code y JetBrains para cambios de atajos, opciones y compatibilidad.

Conclusión: integrar Claude Code con un IDE no reemplaza la terminal: combina contexto visual, diagnósticos y revisión de diffs con el mismo agente capaz de explorar y ejecutar herramientas. La mejor superficie es la que vuelve más fácil describir el objetivo y revisar la evidencia. En el próximo tema conectaremos este flujo con Git, GitHub y el trabajo en equipo.