Capítulo 05 — Integraciones con IDE: VS Code y JetBrains

Por: Artiko
claude-codeanthropicpartner-badgeidevscode-jetbrains

La extensión muestra. La terminal ejecuta.

Módulo 2 · Instalación y entornos · Lección 2 de 5

Los desarrolladores de VS Code tienen un panel nativo mediante la extensión. Los desarrolladores de JetBrains usan un plugin dedicado y ejecutan Claude Code desde la terminal integrada. Al terminar esta lección sabrás qué ruta recomendar a cada desarrollador y cuáles son las tres capacidades de IDE que conviene demostrar el Día 1.

El modelo: VS Code tiene una extensión nativa, JetBrains tiene un plugin dedicado, y ambos ofrecen la capacidad completa.

Esto define la conversación de configuración con el equipo de TI del cliente y la ruta de instalación que recorres con cada desarrollador.

Extensión de VS Code

La extensión de VS Code (anthropic.claude-code) es la ruta recomendada para los desarrolladores de VS Code. Instálala desde el Marketplace de VS Code (busca «Claude Code») o directamente mediante vscode:extension/anthropic.claude-code. La extensión incluye la CLI y añade un panel dedicado de Claude Code en el IDE.

Cursor

Para Cursor, usa la misma extensión. Está disponible en cursor:extension/anthropic.claude-code y ofrece una funcionalidad idéntica a la versión de VS Code.

JetBrains

Para JetBrains (IntelliJ, PyCharm y el resto de la familia), se requieren dos instalaciones independientes: primero instala la CLI de Claude Code con el instalador de la Lección 2.1 y después el plugin de Claude Code desde JetBrains Marketplace. El plugin habilita la integración con el IDE (visualización de diferencias, contexto de selección, referencias a archivos y diagnósticos); la CLI proporciona el motor de Claude Code. Deben estar instalados ambos para tener la experiencia completa.

Sesiones en ejecución

Ejecuta claude desde la terminal integrada para iniciar una sesión. En una cohorte mixta, esto implica dos rutas de configuración: los desarrolladores de VS Code y Cursor instalan la extensión de VS Code; los desarrolladores de JetBrains instalan la CLI y el plugin.

flowchart LR
  D["Desarrollador"] --> E{"Editor"}
  E -- "VS Code" --> X["Extensión anthropic.claude-code"]
  E -- "Cursor" --> X
  E -- "Otros forks (p. ej. Devin Desktop, Kiro)" --> X
  E -- "IntelliJ, PyCharm y otros IDE de JetBrains" --> J["CLI de Claude Code (instalador de la Lección 2.1)"]
  X --> T["Panel de Claude Code en el IDE"]
  J --> P["Plugin de Claude Code (JetBrains Marketplace)"]
  P --> R["Ejecutar claude en la terminal integrada"]

Dos puntos de entrada, el mismo motor. Asocia el punto de entrada al IDE de cada desarrollador.

Tres capacidades que cambian cómo los desarrolladores viven Claude Code en el IDE

Son los momentos que cambian la percepción de un desarrollador de «herramienta de CLI» a «integrada en mi flujo de trabajo». Demuéstralas las tres el Día 1.

  1. Visualización de diferencias (diff viewing). Los cambios de código aparecen en el visor de diferencias nativo del IDE, no como salida de terminal. Los desarrolladores ven exactamente qué cambió Claude Code, lado a lado, en la interfaz que ya usan para revisar código. Se configura mediante /config.

  2. Contexto de selección (selection context). La selección actual y la pestaña abierta se comparten automáticamente con Claude Code. Un desarrollador puede resaltar una función, escribir un prompt y Claude Code ya sabe de qué habla, sin necesidad de especificar el archivo ni pegar el código.

  3. Atajos de referencia a archivos (file reference shortcuts). El patrón @app.ts#5-10 trae archivos concretos y rangos de líneas directamente a la conversación. Inserta la referencia con Option+K (Mac) o Alt+K (Windows/Linux) en la extensión de VS Code, o con Cmd+Option+K (Mac) / Alt+Ctrl+K (Windows/Linux) en JetBrains. Es más rápido que copiar y pegar, y mantiene la referencia precisa en lugar de aproximada.

Entornos compatibles: VS Code, JetBrains y la cuestión de los forks

Los equipos de desarrollo de los clientes usan una mezcla de editores. Conoce la respuesta a la pregunta sobre forks antes de que la hagan.

VS Code y Cursor: instala la extensión

La extensión anthropic.claude-code es la ruta recomendada para VS Code. Instálala desde el Marketplace (Cmd/Ctrl+Shift+X, busca «Claude Code») o usa vscode:extension/anthropic.claude-code. Para Cursor, usa cursor:extension/anthropic.claude-code. Otros forks de VS Code (por ejemplo, Devin Desktop o Kiro) pueden instalar la extensión desde el registro Open VSX o desde la vista de Extensiones. La misma extensión funciona en todos los editores compatibles con VS Code.

IntelliJ, PyCharm y otros IDE de JetBrains: instala el plugin

Se requieren la CLI y el plugin. Instala primero la CLI de Claude Code (con el instalador de la Lección 2.1) y después el plugin de Claude Code desde JetBrains Marketplace. Ejecuta claude desde la terminal integrada. El plugin habilita la visualización de diferencias, el contexto de selección y los atajos de referencia a archivos; no incluye el motor de Claude Code.

Indica al equipo de TI del cliente que la terminal integrada debe estar habilitada (en algunas configuraciones empresariales puede estar restringida por defecto) y que el plugin requiere reiniciar el IDE por completo tras la instalación.

Configuración: los ajustes relevantes para el IDE viven en /config

La visualización de diferencias está en auto por defecto, pero los desarrolladores pueden ajustar el comportamiento del IDE sin salir de la terminal.

Ejecutar /config dentro de una sesión de Claude Code abre el menú de configuración. Desde ahí, los desarrolladores pueden activar o desactivar que los cambios de código se abran en el visor de diferencias del IDE, ajustar la verbosidad y configurar otras preferencias a nivel de sesión. Conviene demostrarlo pronto: da a los desarrolladores del cliente sensación de control sobre la herramienta, y saca a la luz la preferencia que más preguntas genera («¿por qué muestra las diferencias en una pestaña aparte?»).

/config abre una interfaz con pestañas (no un conjunto de flags de CLI, sino un menú interactivo dentro de la sesión). Los ajustes pueden existir en varios niveles: ajustes gestionados empresariales (si los despliega la organización), flags de línea de comandos, .claude/settings.json del proyecto local y ~/.claude/settings.json a nivel de usuario. En despliegues empresariales, confirma qué nivel es el propietario del ajuste y si los usuarios pueden sobrescribirlo. Los ajustes más relevantes para la integración con el IDE suelen estar a nivel de usuario:

  • Conexión automática al IDE (auto-connect to IDE): se conecta automáticamente a un IDE cuando Claude Code se inicia desde una terminal externa. Clave: autoConnectIde
  • Instalación automática de la extensión del IDE (auto-install IDE extension): instala la extensión del IDE automáticamente en la primera conexión. Clave: autoInstallIdeExtension
  • Mostrar la última respuesta en el editor externo: muestra la última respuesta de Claude en un panel de editor de solo lectura. Clave: externalEditorContext
  • Modo de editor (editor mode): modo de atajos de teclado para el prompt de entrada: normal o vim. Clave: editorMode

Para la lista completa de ajustes disponibles y sus valores por defecto actuales, indica a los desarrolladores la documentación de Claude Code. El menú /config es interactivo y se actualiza con cada versión de Claude Code, así que la documentación refleja las opciones más actuales.

Comprueba tu comprensión

Escenario: un desarrollador pregunta por su editor.

Estás dirigiendo la sesión de kickoff de Claude Code. Uno de los desarrolladores del cliente levanta la mano.

Un desarrollador dice: «Uso Cursor, no VS Code. La mayoría del equipo está en VS Code, pero yo cambié el año pasado. ¿Claude Code funcionará para mí o tengo que volver a VS Code?» ¿Qué le respondes?

  • A. Cursor no está soportado; necesitará VS Code. Redirígelo a instalar VS Code para tener una experiencia de equipo consistente.
  • B. Cursor está soportado, con la misma configuración que VS Code. Los forks de VS Code, incluido Cursor, están soportados. Instala la extensión en cursor:extension/anthropic.claude-code, igual que en la ruta de VS Code.
  • C. Cursor podría funcionar, pero consulta antes con TI. Márcalo como no soportado hasta que se confirme, para evitar inconsistencias en la configuración del equipo.
Ver respuesta

B es correcta. Cursor está soportado, con la extensión de Claude Code disponible en cursor:extension/anthropic.claude-code. El desarrollador no necesita cambiar de editor ni conformarse con una configuración de segunda categoría. La respuesta correcta también importa para la dinámica del equipo: encaminar a un desarrollador hacia una configuración distinta crea fricción y transmite incertidumbre. Cuando la respuesta es «sí, funciona», dilo directamente. Puedes añadir que tendrá la misma experiencia de panel que los desarrolladores de VS Code.

Ideas clave

Al terminar esta lección conoces las dos rutas de integración (la extensión de VS Code y el plugin de JetBrains) y qué clientes caen en cada una. Tienes las tres capacidades que conviene demostrar el Día 1: visualización de diferencias, contexto de selección y atajos de referencia a archivos.

  • VS Code, Cursor y otros forks compatibles usan la extensión anthropic.claude-code; en JetBrains se requieren la CLI y el plugin, ambos.
  • En JetBrains, la CLI proporciona el motor de Claude Code y el plugin aporta la integración con el IDE; se ejecuta claude desde la terminal integrada.
  • Las tres capacidades del Día 1 son la visualización de diferencias, el contexto de selección y los atajos de referencia a archivos.
  • /config permite a los desarrolladores ajustar el comportamiento del IDE; en despliegues empresariales, confirma en qué nivel vive cada ajuste.
  • Cursor se trata con la misma extensión que VS Code; no es un caso especial que requiera otra configuración.

Siguiente: Patrones de terminal y configuración de shell