Claude Code en VSCode: La Guía Completa

Claude Code no es solo una herramienta de terminal. Con la extensión oficial para Visual Studio Code, obtienes una experiencia integrada directamente en tu editor, con acceso a tus archivos, contexto del proyecto y flujos de trabajo reales de desarrollo. En este artículo exploramos todo lo que necesitas saber para sacarle el máximo provecho.

¿Qué aprenderás?

• Las ventajas de usar Claude Code desde VSCode vs. la terminal
• Cómo funciona el chat y el sistema de contexto
• Comandos esenciales disponibles en la extensión
• Cómo integrar servidores MCP
• Cómo usar el archivo CLAUDE.md para personalizar el comportamiento
• Configuraciones esenciales para un flujo de trabajo profesional

Ventajas de usar Claude Code desde VSCode

La extensión de Claude Code para VSCode no es simplemente una terminal embebida; agrega integraciones específicas que mejoran significativamente la experiencia:

Navegación directa a archivos

Cuando Claude Code menciona una ruta de archivo en su respuesta, puedes hacer clic directamente sobre ella para abrirla en el editor. No necesitas copiar la ruta, buscar el archivo en el explorador, o escribir comandos. Es un detalle pequeño que en la práctica ahorra mucho tiempo.

Soporte nativo para imágenes

Puedes arrastrar y soltar imágenes directamente en el chat para incluirlas como contexto. Esto es especialmente útil cuando quieres que Claude analice un diseño, un screenshot de error, un diagrama de arquitectura o cualquier referencia visual relacionada con tu código.

Tip: Si el drag & drop de archivos no funciona en algún momento, usa la opción "Copy Path" (clic derecho sobre el archivo en el explorador) y pega la ruta completa en el chat. Claude Code la reconocerá correctamente.

Bases del Chat

Contexto por pestaña

Cada pestaña de chat que abres representa una sesión independiente. La pestaña activa en tu editor es la que Claude Code tomará como contexto principal. Esto es importante: si tienes varios archivos abiertos, Claude priorizará el que está visible en ese momento.

Sintaxis especial del chat

El chat admite una sintaxis especial para trabajar con recursos del proyecto:

Por ejemplo, puedes escribir @src/app/page.tsx para incluir ese archivo como contexto, o /compact para comprimir el historial de la conversación.

Historial del Chat

Claude Code mantiene un historial de tus conversaciones anteriores. Puedes acceder a sesiones pasadas para retomar trabajo o revisar decisiones que tomaste con ayuda de la IA.

Modos de trabajo

Puedes cambiar entre diferentes modos de trabajo usando el atajo:

Shift + Tab

Esto alterna entre los distintos modos disponibles, como el modo de solo lectura (para consultas) y el modo de edición activa (donde Claude puede modificar archivos directamente).

Comandos Esenciales

Los comandos se invocan con / dentro del chat. Estos son los más importantes:

/context

Muestra el contexto actual que Claude Code está utilizando: qué archivos tiene cargados, cuántos tokens está consumiendo, y cuál es el estado general de la sesión. Útil para entender por qué Claude puede estar respondiendo de cierta manera.

/status

Muestra el estado general de Claude Code: la sesión activa, el modelo que se está usando y otros metadatos relevantes.

/compact

Comprime el historial de la conversación para liberar espacio en el contexto. Cuando una sesión se vuelve muy larga, los tokens se agotan rápido. /compact resume la conversación anterior y te permite seguir trabajando sin perder el hilo.

/reset

Reinicia la sesión por completo. Borra el historial y el contexto acumulado. Úsalo cuando quieras empezar desde cero con una tarea nueva o cuando la sesión se haya "contaminado" con contexto irrelevante.

MCP (Model Context Protocol)

MCP es uno de los features más poderosos de Claude Code. Permite conectar Claude con herramientas externas: bases de datos, navegadores, APIs, servicios de terceros, y mucho más.

¿Qué se puede hacer con MCP?

• Controlar un navegador web (útil para scraping, testing o automatización)
• Conectarse a bases de datos y ejecutar queries
• Interactuar con servicios como GitHub, Notion, Linear, entre otros
• Crear herramientas personalizadas para tu flujo de trabajo

Cómo instalar un servidor MCP

Puedes instalar servidores MCP directamente desde la configuración de la extensión en VSCode. Claude Code soporta tanto servidores publicados en el registro oficial como configuraciones personalizadas vía claude_mcp_config.json.

La configuración básica de un servidor MCP luce así:

{
  "mcpServers": {
    "nombre-del-servidor": {
      "command": "npx",
      "args": ["-y", "@nombre/paquete-mcp"]
    }
  }
}

Cómo llamar a los servidores MCP

Una vez instalado, puedes referenciar las herramientas del servidor directamente en tu conversación. Claude Code detectará automáticamente qué herramientas están disponibles y las usará cuando sea pertinente.

Skills (Habilidades)

Claude Code soporta el concepto de skills: instrucciones o contexto especializado que puedes cargar para tareas específicas. Son útiles cuando tienes flujos de trabajo repetitivos que requieren que Claude siga un proceso particular.

Los skills se pueden definir como archivos de instrucciones (generalmente Markdown) que Claude Code carga como contexto adicional al inicio de la sesión.

El archivo CLAUDE.md

CLAUDE.md es el archivo de configuración más importante para personalizar el comportamiento de Claude Code en tu proyecto. Se coloca en la raíz del repositorio y Claude lo lee automáticamente al iniciar cada sesión.

Puedes usarlo para:

• Definir el stack tecnológico del proyecto
• Establecer convenciones de código (naming, estructura de carpetas, etc.)
• Indicar qué archivos o carpetas debe ignorar
• Describir el contexto del negocio o del producto
• Configurar el comportamiento esperado para tareas recurrentes

Ejemplo básico de CLAUDE.md:

# Proyecto: Mi App

## Stack
- Next.js 15 (App Router)
- PostgreSQL con Prisma
- Tailwind CSS

## Convenciones
- Usa `async/await` en lugar de `.then()`
- Los componentes de servidor no llevan `"use client"`
- Nombres de archivos en kebab-case

## Contexto
Esta es una plataforma SaaS para gestión de asesorías online.

Mientras más detallado sea tu CLAUDE.md, mejor será la calidad de las respuestas de Claude dentro de ese proyecto.

Configuraciones Esenciales

Bypass de permisos por defecto

Por defecto, Claude Code te pedirá confirmación antes de ejecutar ciertas acciones (crear archivos, ejecutar comandos, etc.). En proyectos donde ya confías en el flujo de trabajo, puedes habilitar el bypass de permisos para que Claude actúe directamente sin interrupciones constantes.

Nota: Al abrir un chat nuevo, esta configuración puede no estar activa. Es recomendable verificarlo al inicio de cada sesión si tu flujo de trabajo depende de ella.

MCP para controlar el navegador

Una de las configuraciones más útiles es conectar un servidor MCP de control de navegador (como puppeteer o playwright vía MCP). Esto le permite a Claude Code interactuar con páginas web en tiempo real: navegar, hacer clic, rellenar formularios, tomar screenshots, etc.

Es especialmente valioso para:

• Testing automatizado guiado por IA
• Scraping con instrucciones en lenguaje natural
• Debugging de interfaces en el navegador

Consideraciones y Tips Finales

Usa "Copy Path" cuando el drag & drop falle. En VSCode, haz clic derecho sobre cualquier archivo en el explorador y selecciona Copy Path (o Copy Relative Path). Luego pégalo directamente en el chat de Claude Code. Funciona de forma confiable incluso cuando el drag & drop tiene problemas.

Mantén sesiones enfocadas. Cada sesión de chat tiene un límite de tokens en el contexto. Si la conversación se vuelve muy larga, usa /compact para resumirla o /reset para empezar con una sesión limpia dedicada a la nueva tarea.

Abre solo los archivos relevantes. Claude Code toma como contexto el archivo activo en el editor. Mantener abierto solo lo que es relevante para la tarea mejora la calidad de las respuestas.

Define bien tu CLAUDE.md desde el inicio. Invertir 10 minutos en escribir un buen CLAUDE.md al comenzar un proyecto puede ahorrarte horas de correcciones y aclaraciones a lo largo del desarrollo.

Recursos

• 📖 Documentación oficial: code.claude.com/docs/en/vs-code