VSCode + Claude Code 2026: Configúralo en 5 Minutos y Programa 2x Más Rápido

# VSCode + Claude Code 2026: Configúralo en 5 Minutos y Programa 2x Más Rápido

## El cambio que nadie te cuenta

En 2026, programar sin AI assistant es como navegar con los ojos vendados. Tarde o temprano alguien te pregunta: “¿Por qué no usas IA?” y no sabés qué responder.

La diferencia ya no es si usás IA o no. La pregunta es: **¿cuál configuración te hace más rápido?**

Miles de developers están migrando a esta combinación:

> **VSCode + Claude Code = Potencia de IA sin salir de tu editor favorito**

Te explico paso a paso cómo configurarlo y por qué vale la pena.

—

## ¿Por qué VSCode + Claude y no otra cosa?

VSCode es el editor dominante desde hace años. Tiene:
– Millones de extensiones
– Comunidad gigante
– Es gratuito y open source
– Lo usás todos los días

Ahora agregale **Claude Code**: la extensión oficial de Anthropic que trae a Claude dentro de tu IDE como interfaz gráfica nativa.

**¿El resultado?** Potencia de coding AI sin aprender un editor nuevo, sin abandonar tus extensiones, sin rehacer tu flujo.

—

## Qué puedes hacer con Claude Code en VSCode

La extensión de Claude Code para VSCode ofrece una interfaz gráfica integrada directamente en tu IDE.

### 1. Chat integrado en el sidebar

Igual que en Cursor AI o GitHub Copilot, tenés un panel de chat directamente en VSCode. Preguntás en lenguaje natural y Claude responde con código, explicaciones o análisis.

### 2. @-mentions con rangos de líneas

En una conversación con Claude, podés hacer referencia directa a archivos específicos de tu proyecto:

Esto le da a Claude contexto completo de esas líneas exactas sin tener que pedírselo manualmente.

### 3. Revisar y editar planes antes de aceptar

Cuando pedís algo complejo, Claude te muestra el plan primero. Vos podés editarlo, modificarlo, y recién cuando lo aprobás, ejecuta. No más ejecuciones inesperadas.

### 4. Auto-accept edits

Podés configurar que los cambios se acepten automáticamente a medida que Claude los hace, o revisarlos uno por uno — vos decidís el nivel de control.

### 5. Múltiples conversaciones en tabs

Abrís múltiples conversaciones en tabs separados o ventanas. Cada proyecto o tarea puede tener su propia sesión activa.

### 6. Historial de conversaciones

Accedés al historial completo de tus conversaciones para retomar donde dejaste.

### 7. Keyboard shortcuts

La extensión incluye atajos de teclado para invocar rápidamente a Claude sin salir del editor.

—

## Cómo abrir Claude Code (múltiples formas)

1. **Editor Toolbar** — El icono Spark (⚡) aparece en la barra superior derecha del editor cuando tenés un archivo abierto
2. **Activity Bar** — El icono en el sidebar izquierdo abre la lista de sesiones
3. **Command Palette** — `Cmd+Shift+P` (Mac) o `Ctrl+Shift+P` (Windows/Linux), buscás “Claude Code”
4. **Status Bar** — Haces clic en `✱ Claude Code` en la esquina inferior derecha

—

## Configuración paso a paso (5 minutos)

### Requisitos previos

– **VS Code 1.98.0 o superior**
– Una cuenta de Anthropic (gratuita)

### Paso 1: Instalá la extensión

**Opción A: Link directo**
– [Instalar para VS Code](vscode:extension/anthropic.claude-code)
– [Instalar para Cursor](cursor:extension/anthropic.claude-code)

**Opción B: Desde VSCode**
1. Press `Cmd+Shift+X` (Mac) o `Ctrl+Shift+X` (Windows/Linux)
2. Buscá “Claude Code”
3. Click en Install

“`bash
# También podés instalar desde línea de comandos
code –install-extension anthropic.claude-code
“`

**Nota:** Si la extensión no aparece después de instalar, reiniciá VSCode o ejecutá “Developer: Reload Window” desde la Command Palette.

### Paso 2: Abrí el panel de Claude

1. Hacé clic en el icono ⚡ (Spark) en el Editor Toolbar o Activity Bar
2. La primera vez te aparece una pantalla de login
3. Hacé clic en “Sign in” y completá la autorización en tu navegador

**Tip:** La extensión incluye la CLI también — podés acceder desde el terminal integrado de VSCode para features avanzados.

### Paso 3: Elegí tu plan

– **Claude Pro ($20/mes):** Acceso a Opus 4.7, Sonnet 4.7, límites altos de mensajes
– **API por uso:** $5 en créditos gratis para nuevos usuarios (una sola vez), pagás lo que uses después
– **Gratis:** 30 mensajes al mes con Sonnet 4.6

—

## Comparación: VSCode + Claude vs Cursor AI

**El veredicto:** VSCode + Claude gana en flexibilidad, ecosistema de extensiones y features avanzados. Cursor AI gana en autocompletado en tiempo real y simplicidad. Si ya usás VSCode, esta combinación es el camino más rápido para conseguir coding AI sin cambiar tu flujo.

—

## Casos donde funciona mejor

### Desarrollo web full-stack
Claude entiende contexto de frontend y backend. Le pedís “creá un endpoint en Express que valide JWT y devuelva usuarios” y entiende el stack completo.

### Code review interactivo
Le mostrás un archivo y le pedís review. Te señala problemas potenciales línea por línea con los diffs visibles.

### Debugging express
Le mostrás el error y te dice: “El problema está en la línea 23, el array no está inicializado.”

### Aprender código nuevo
Heredas un proyecto sin documentación. Le preguntás “explicame cómo funciona este módulo” y te lo resume en segundos.

### Proyectos múltiples
Con los tabs de conversación, cada proyecto o feature tiene su propia sesión organizada.

—

## Limitaciones conocidas

– **No es autocompletado en tiempo real** — necesitás pedírle en el chat, no completa solo mientras escribís
– **Dependés de tu plan Anthropic** — puede costar $20/mes si usás mucho
– **No tiene acceso al código abierto** — el modelo es propietario
– **VS Code 1.98.0+ requerido** — si tenés una versión vieja, tenés que actualizar

—

## Scopes de Instalación de Plugins

Cuando instalás un plugin, elegís el alcance:

– **Install for you:** Disponible en todos tus proyectos (scope usuario)
– **Install for this project:** Compartido con colaboradores del proyecto (scope proyecto)
– **Install locally:** Solo para vos, solo en este repositorio (scope local)

## Gestión de Marketplaces

En la pestaña Marketplaces podés agregar o remover fuentes de plugins:

– Ingresá un repo de GitHub, URL, o path local para agregar un nuevo marketplace
– Click en el **ícono de refresh** para actualizar la lista de plugins
– Click en el **ícono de trash** para remover un marketplace

**Nota:** Después de hacer cambios, un banner te pide reiniciar Claude Code para aplicar las actualizaciones.

**Importante:** Los plugins y marketplaces que configures en la extensión de VSCode también están disponibles en la CLI, y viceversa.

## Integración con Chrome

Conectá Claude a tu navegador Chrome para testear web apps, debuggear console logs, y automatizar flujos de navegador sin salir de VSCode.

**Requisitos:** [Claude in Chrome extension](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) versión 1.0.36 o superior.

**Cómo usar @browser:**

“`
@browser go to localhost:3000 and check the console for errors
“`

Claude abre nuevas pestañas para tareas del browser y comparte tu estado de login — puede acceder a cualquier sitio donde ya estés logueado.

## Comandos y Shortcuts de VSCode

Abrí la Command Palette (`Cmd+Shift+P` en Mac o `Ctrl+Shift+P` en Windows/Linux) y escribí “Claude Code” para ver todos los comandos disponibles.

**Focus States:** Algunos shortcuts dependen de qué panel está “en foco”:

– **Cursor en archivo:** El editor está en foco
– **Cursor en el prompt box:** Claude está en foco

`Cmd+Esc` (Mac) / `Ctrl+Esc` (Windows/Linux) — Toggle entre editor y Claude

## Tabla de Comandos y Shortcuts

## URI Handler: Abrir Claude desde Otras Herramientas

La extensión registra un URI handler en `vscode://anthropic.claude-code/open`. Podés usarlo para abrir una nueva tab de Claude Code desde tus propias herramientas.

**Ejemplo — macOS:**

**Linux:**

**Windows:**

### Parámetros Query Opcionales

### Parámetro session

**Ejemplo práctico:**

“`
vscode://anthropic.claude-code/open?prompt=review%20my%20changes
“`

Abre una tab pre-llenada con “review my changes”.

## Configuración de la Extensión

La extensión tiene dos tipos de settings:

### 1. Extension Settings (en VS Code)

Controlan el comportamiento de la extensión dentro de VS Code.

**Cómo acceder:**
– `Cmd+,` (Mac) / `Ctrl+,` (Windows/Linux) → Extensions → Claude Code
– O escribí `/` y seleccioná “General Config”

### 2. Claude Code Settings (~/.claude/settings.json)

Compartidos entre la extensión y la CLI. Usalos para:

– Allowed commands
– Environment variables
– Hooks
– MCP servers

**Tip:** Agregá esto a tu `settings.json` para obtener autocomplete:

“`json
“$schema”: “https://json.schemastore.org/claude-code-settings.json”
“`

### Extension Settings Tables

### Extension Settings (configurables en VSCode)

| `enableNewConversationShortcut` | `false` | Activar Cmd/Ctrl+N para nueva conversación |
| `hideOnboarding` | `false` | Ocultar la checklist de onboarding (ícono de birrete) |
| `respectGitIgnore` | `true` | Excluir patrones de .gitignore en búsquedas de archivos |
| `usePythonEnvironment` | `true` | Activar el entorno Python del workspace. Requiere la extensión de Python |
| `environmentVariables` | `[]` | Setear environment variables para el proceso de Claude. Usar Claude Code settings para configuración compartida |
| `disableLoginPrompt` | `false` | Saltar prompts de autenticación (para configuraciones con third-party providers) |
| `allowDangerouslySkipPermissions` | `false` | Agrega modo Auto y Bypass permissions al selector de modo. Auto mode tiene requisitos de plan, admin, model y provider |
| `claudeProcessWrapper` | — | Path del ejecutable usado para lanzar el proceso de Claude |

## VS Code Extension vs. CLI

Claude Code está disponible como extensión de VSCode (panel gráfico) y como CLI (command-line interface en el terminal). Algunas features solo están disponibles en la CLI. Si necesitás una feature de CLI, corré `claude` en el integrated terminal de VSCode.

### CLI vs Extension: Comparación de Features

## Rewind con Checkpoints

La extensión de VSCode soporta checkpoints, que trackean los cambios de archivos de Claude y te permiten volver a un estado anterior.

**Cómo funciona:**
1. Hacé hover sobre cualquier mensaje
2. Aparecerá el botón de rewind
3. Elegí una de tres opciones:

– **Fork conversation from here:** Iniciar una nueva rama de conversación desde este mensaje, manteniendo todos los cambios de código intactos
– **Rewind code to here:** Revertir cambios de archivo hasta este punto, manteniendo el historial completo de la conversación
– **Fork conversation and rewind code:** Ambas cosas juntas — nueva rama y revert de archivos

## Run CLI en VS Code

Si necesitás una feature exclusiva de CLI, podés correr `claude` directamente en el integrated terminal de VSCode. La extensión y la CLI comparten el mismo contexto y autenticación.

## Integración con Terminal

**Para usar la CLI dentro de VSCode:**
1. Abrí el integrated terminal (“ Ctrl+` “ en Windows/Linux o “ Cmd+` “ en Mac)
2. Corré `claude`

La CLI se integra automáticamente con tu IDE para diff viewing y diagnostic sharing.

**Desde terminal externo:**
Corré `/ide` dentro de Claude Code para conectarlo a VSCode.

## Switch entre Extension y CLI

La extensión y la CLI comparten el mismo historial de conversaciones. Para continuar una conversación de la extensión en la CLI:

“`bash
claude –resume
“`

Esto abre un selector interactivo para buscar y seleccionar tu conversación.

## Incluir Output de Terminal en Prompts

Referenciá output del terminal en tus prompts usando `@terminal:name` donde `name` es el título del terminal. Esto te permite mostrar a Claudecommand output, errores, o logs sin copy-paste.

## Monitoreo de Procesos en Background

Cuando Claude corre comandos largos, la extensión muestra progreso en el status bar. Sin embargo, la visibilidad es limitada comparada con la CLI.

Para mejor visibilidad, pedile a Claude que outputtee el comando para que puedas correrlo en el integrated terminal.

## MCP (Model Context Protocol)

Los servers MCP le dan a Claude acceso a herramientas externas, bases de datos, y APIs.

**Para agregar un MCP server:**
“`bash
claude mcp add –transport http github https://api.githubcopilot.com/mcp/
“`

Una vez configurado, pedile a Claude que use las tools (ej: “Review PR #456”).

**Gestión sin salir de VSCode:**
Escribí `/mcp` en el chat panel. El diálogo de gestión MCP te permite:
– Enable/disable servers
– Reconectar a un server
– Gestionar OAuth authentication

## Trabajo con Git

Claude Code se integra con git para ayudarte con workflows de version control directamente en VSCode.

### Commits y Pull Requests

Claude puede stagear cambios, escribir commit messages, y crear PRs:

“`
commit my changes with a descriptive message
create a pr for this feature
summarize the changes I’ve made to the auth module
“`

Cuando crea PRs, Claude genera descripciones basadas en los cambios reales del código y puede agregar contexto sobre testing o decisiones de implementación.

### Git Worktrees para Tareas Paralelas

## Empezá hoy

1. Actualizá VSCode a la última versión (1.98.0+)
2. Instalá la extensión (`code –install-extension anthropic.claude-code`)
3. Abrí el panel de Claude (icono ⚡)
4. Hacé login con tu cuenta Anthropic
5. Empezá a chatear

5 minutos de configuración. Potencial de duplicar tu velocidad de coding.

—
*Artículo actualizado: abril 2026*