Cursor
Cursor: El editor de código con IA integrada
¿Qué es Cursor?
Cursor es un editor de código construido sobre VS Code que integra modelos de inteligencia artificial como GPT-4, GPT-4o, Claude 3.5 Sonnet y Claude 3 Opus directamente en el flujo de trabajo de programación. A diferencia de las extensiones de IA que se añaden a un editor existente, Cursor está diseñado desde cero para que la IA sea una parte nativa de la experiencia de desarrollo.
Esto significa que no necesitas cambiar entre tu editor y un chat de IA: todo ocurre dentro del mismo entorno donde escribes código. Cursor mantiene compatibilidad total con las extensiones de VS Code, por lo que puedes seguir usando tus temas, atajos de teclado y plugins favoritos.
Fue creado por la startup Anysphere y ha ganado popularidad rápidamente entre desarrolladores que buscan una herramienta que realmente entienda el contexto de su proyecto, no solo el archivo abierto.
Instalación
Instalar Cursor es sencillo y gratuito:
- Ve a cursor.com y descarga el instalador para tu sistema operativo (Windows, macOS o Linux).
- Ejecuta el instalador y sigue los pasos habituales.
- Al abrir Cursor por primera vez, puedes importar tu configuración de VS Code (extensiones, temas, atajos) con un solo clic.
- Inicia sesión o crea una cuenta gratuita para empezar a usar las funciones de IA.
# Alternativa en Linux via terminal# Descarga el AppImage desde la web y ejecútalo:chmod +x cursor-*.AppImage./cursor-*.AppImageCursor está disponible para Windows, macOS y Linux. Si ya usas VS Code, la transición es prácticamente invisible: la interfaz, los atajos y las extensiones son los mismos.
Características principales
Tab Completion (completado con Tab)
La función de Tab Completion es similar a GitHub Copilot pero con diferencias clave. Mientras escribes código, Cursor genera sugerencias en gris que puedes aceptar presionando Tab. Lo que distingue a Cursor es:
- Completado multi-línea: No sugiere solo una línea, sino bloques completos de lógica.
- Cursor predicción: Puede predecir no solo qué escribir, sino dónde moverá el cursor a continuación, permitiendo aceptar múltiples sugerencias en secuencia sin interrumpir el flujo.
- Edición inline: Acepta sugerencias parciales y edita sobre la marcha antes de confirmar.
Chat integrado
El panel de Chat te permite conversar con modelos como GPT-4o o Claude 3.5 Sonnet sin salir del editor. Características destacadas:
- Contexto automático: Puedes referenciar archivos, símbolos o documentación del proyecto con
@archivo.tso@simbolo. - Historial de conversación: Las sesiones de chat se guardan y puedes retomarlas después.
- Aplicación directa: Desde el chat puedes pedir que los cambios se apliquen directamente al código.
Ejemplo de uso en Chat:
> @auth.service.ts Esta función de login tiene un bug, cuando el usuario> no existe lanza un error 500 en vez de 401. Arréglalo.
Cursor lee el archivo, identifica el problema y genera el diff con la corrección.Composer (ediciones multi-archivo)
Composer es la función más potente de Cursor y su principal diferenciador. Permite que la IA edite múltiples archivos de forma coordinada en una sola solicitud:
- Multi-file edits: Puedes pedir “añadir validación al formulario de registro” y Cursor modificará el componente React, el servicio de API, las pruebas y los tipos de TypeScript simultáneamente.
- Vista de diff: Antes de aplicar los cambios, puedes revisar cada modificación archivo por archivo con una interfaz de diff visual.
- Iteración: Si los cambios no son exactamente lo que querías, puedes pedir ajustes sin perder el contexto de la conversación.
Para abrir Composer usa Ctrl+I (o Cmd+I en Mac) o el atajo Ctrl+Shift+I para Composer en modo ventana.
Contexto inteligente
Cursor indexa automáticamente tu codebase para que las respuestas de la IA consideren todo el proyecto, no solo el archivo abierto. Esto incluye:
- @Codebase: Busca simbología relevante en todo el repositorio.
- @Docs: Permite indexar documentación externa (React, Next.js, Django, etc.) para que la IA la consulte.
- @Web: Búsqueda en internet para preguntas sobre APIs nuevas o problemas actuales.
Cómo usar Cursor gratis (Tier Free)
Cursor ofrece un plan gratuito generoso que permite probar todas las funciones principales:
| Recurso | Límite del plan gratis |
|---|---|
| Completions (Tab) | 2.000 por mes |
| Premium requests (Chat, Composer con GPT-4/Claude) | 50 por mes |
| Modelos rápidos (GPT-4o-mini) | Ilimitados en algunos planes |
Consejos para maximizar el plan gratis:
- Usa modelos rápidos para tareas simples: Las consultas con modelos como GPT-4o-mini no consumen premium requests. Reserva los modelos premium (GPT-4, Claude 3.5 Sonnet) para tareas complejas.
- Usa Tab Completion generosamente: Las completions por Tab son más eficientes que el chat para cambios pequeños. No cuestan premium requests.
- Sé específico en tus prompts: Un prompt claro reduce la necesidad de iteraciones, ahorrando requests premium.
- Agrupa cambios relacionados: En vez de hacer 5 chat requests pequeños, describe todo en un solo Composer request.
Para cambiar el modelo predeterminado ve a Settings > Models y selecciona un modelo rápido como predeterminado para el chat.
Ejemplos concretos de uso
Refactoring
Supongamos que tienes una función monolítica que quieres dividir:
// Antes: función larga y monolíticafunction procesarPedido(pedido: Pedido) { // 200 líneas de validación, cálculo de impuestos, // envío de emails, actualización de BD...}En Composer puedes escribir:
@pedido.service.ts Refactoriza la función procesarPedido en 4 funcionesprivadas más pequeñas: validarPedido, calcularImpuestos, enviarNotificaciony actualizarBaseDatos. Mantén la función pública como orquestador.Añade tipos JSDoc a cada función nueva.Cursor generará los cambios en el archivo, manteniendo la funcionalidad idéntica pero con mejor estructura.
Debugging
Cuando tengas un error en producción:
# Error en logs: TypeError: Cannot read property 'email' of undefined# en la línea 47 de user_handler.pyAbres Chat y escribes:
@user_handler.py Estoy obteniendo este error: "TypeError: Cannot readproperty 'email' of undefined" en la línea 47. El error ocurre cuandoel usuario se registra vía OAuth. Encuentra el bug y explícamepor qué ocurre antes de sugerir el fix.Cursor analizará el archivo, identificará que el objeto user puede ser None en el flujo OAuth y propondrá una corrección con explicación.
Generar componentes
Para crear un componente React desde cero:
@Codebase Crea un componente ProductCard que muestre la imagen delproducto, nombre, precio y un botón de "Añadir al carrito".Usa los estilos del design system que ya tenemos (mira @styles/).El componente debe aceptar props del tipo Product que ya existe en@types/index.ts. Incluye estados de loading y error.Cursor generará el componente React con TypeScript, usará los estilos existentes del proyecto y respetará las interfaces ya definidas.
Comparación con GitHub Copilot
| Característica | Cursor | GitHub Copilot |
|---|---|---|
| Plataforma | Editor independiente (fork de VS Code) | Extensión para VS Code, JetBrains, Neovim |
| Modelos disponibles | GPT-4, GPT-4o, Claude 3.5 Sonnet, Claude 3 Opus, modelos locales | GPT-4o (Copilot), modelos Claude (Copilot Enterprise) |
| Edición multi-archivo | Sí, nativa via Composer | Parcial (Copilot Edits, limitado) |
| Chat con contexto | Sí, indexa todo el codebase | Sí, con @workspace |
| Plan gratuito | 2.000 completions + 50 premium requests/mes | Limitado (requiere trial o cuenta estudiantil) |
| Precio Pro | $20/mes | $10/mes (Copilot Individual) |
| Extensiones VS Code | Compatible al 100% | Nativo en VS Code |
| Custom instructions | Sí, .cursorrules por proyecto | No nativo (excepto Copilot Enterprise) |
| Documentación indexada | Sí, con @Docs | No de forma nativa |
Ventajas de Cursor:
- Composer es superior para cambios multi-archivo coordinados.
- Cambio de modelo en vivo: puedes seleccionar GPT-4o para una consulta y Claude 3.5 Sonnet para otra.
- Archivo
.cursorrulespermite definir reglas de estilo y contexto por proyecto. - Indexación de documentación externa para mejor contexto.
Ventajas de GitHub Copilot:
- Funciona dentro de cualquier editor soportado (no necesitas cambiar de IDE).
- Precio individual más bajo ($10/mes vs $20/mes).
- Mayor ecosistema y soporte empresarial.
- Autocomplete generalmente más rápido y menos intrusivo.
Limitaciones del tier gratis
Es importante conocer los límites para planificar tu uso:
- 50 premium requests mensuales: Se consumen rápido si usas Composer con modelos avanzados. Un Composer request puede contar como 1 premium request si es simple, pero consultas complejas pueden consumir más.
- 2.000 completions mensuales: Suficiente para uso moderado, pero un desarrollador a tiempo completo puede superarlas en semanas intensivas.
- Sin acceso a modelos más potentes cuando se agota el límite: Debes esperar al siguiente mes o upgradearte.
- Rate limiting: Incluso dentro de los límites, pueden existir restricciones temporales si haces muchas solicitudes en poco tiempo.
- Privacy en plan gratis: Los datos pueden usarse para entrenamiento. El plan Pro incluye opción de “Privacy Mode” que no envía código para entrenamiento.
Trucos avanzados
Archivo .cursorrules
Crea un archivo .cursorrules en la raíz de tu proyecto para dar instrucciones persistentes a la IA:
- Siempre usa TypeScript estricto (no any).- Prefiere composición sobre herencia.- Nombres de funciones en camelCase, nombres de clases en PascalCase.- Los componentes React deben tener su propio archivo.- Usa las utilidades de @/lib/utils para formateo de fechas.- Nunca uses var, siempre const o let.- Los tests van en archivos .test.ts junto al archivo que testean.Cada vez que Cursor genere código, seguirá estas reglas automáticamente.
Atajos de teclado esenciales
| Acción | Windows/Linux | macOS |
|---|---|---|
| Abrir Chat | Ctrl+L | Cmd+L |
| Abrir Composer | Ctrl+I | Cmd+I |
| Composer en ventana | Ctrl+Shift+I | Cmd+Shift+I |
| Aceptar sugerencia Tab | Tab | Tab |
| Rechazar sugerencia | Esc | Esc |
| Siguiente sugerencia | Alt+] | Option+] |
Referencias con @
USA el sistema de referencias para dar contexto preciso:
@archivo.ts— Incluye un archivo específico en el contexto.@Codebase— Busca código relevante en todo el proyecto automáticamente.@Docs— Consulta documentación indexada (React, Next.js, etc.).@Web— Busca en internet información actualizada.@Definitions— Trae definiciones de tipos e interfaces.@Folders— Incluye carpetas enteras como contexto.
Referencia de código inline
En Chat o Composer puedes referenciar código seleccionándolo primero y luego abriendo el chat. El código seleccionado se incluirá automáticamente como contexto. También puedes seleccionar texto y presionar Ctrl+K (o Cmd+K) para editar inline sin abrir el chat completo.
Modos de Composer
Cursor Composer tiene dos modos:
- Normal: Genera cambios y los aplica directamente tras confirmación.
- Agent: El modo Agent puede explorar el codebase, leer archivos adicionales, ejecutar comandos de terminal y tomar decisiones autónomas. Es ideal para tareas complejas que requieren investigación previa.
Para activar el modo Agent, en el campo de Composer haz clic en el ícono de ajustes y selecciona “Agent mode”.
Consejos de uso eficiente
- Describe el QUÉ, no el CÓMO: En lugar de “cambia el bucle for por un map”, di “refactoriza esta función para que sea más legible usando métodos funcionales”.
- Proporciona ejemplos: “Quiero que el componente se vea como el Card de Material UI pero con nuestros colores de marca” es mejor que “haz un card bonito”.
- Itera en Composer: Si el primer resultado no es perfecto, pide ajustes en la misma conversación en vez de empezar de cero.
- Usa
.cursorrulespara patrones del equipo: Ahorra requests premium definiendo convenciones una vez en el archivo de reglas. - Copia prompts útiles: Mantén un documento con prompts que te hayan funcionado bien y reutilízalos con pequeñas variaciones.
Cursor representa un cambio fundamental en cómo interactuamos con la IA durante el desarrollo: en vez de copiar y pegar entre un chat y el editor, la IA vive dentro de tu flujo de trabajo. El plan gratuito es más que suficiente para experimentar y decidir si vale la pena el upgrade. Comienza instalándolo, importa tu configuración de VS Code, y prueba Composer con una tarea real de tu proyecto — la diferencia será evidente desde el primer uso.