Cursor AI: Una guía con 10 ejemplos prácticos

¿Qué es la IA de Cursor y qué puede hacer?

Cursor AI es un editor de código impulsado por IA diseñado para facilitar el desarrollo de software. Como bifurcación de Visual Studio Code (VS Code), conserva la interfaz fácil de usar y el amplio ecosistema de VS Code, lo que facilita la transición a los desarrolladores ya familiarizados con la plataforma.

Cursor AI integra capacidades avanzadas de IA a través de ChatGPT de OpenAI y Claude. Esta integración permite a Cursor AI ofrecer sugerencias inteligentes de código, detección automática de errores y optimización dinámica del código.

Funciones clave de autocompletado

Cursor ofrece funciones de autocompletado de teclas y código predictivo:

1. Autocompletar y predicción de código: Cursor proporciona una función de autocompletar que predice las ediciones de varias líneas y se ajusta en función de los cambios recientes.
2. Generación de código: Familiarizado con los cambios recientes, Cursor predice lo que queremos hacer a continuación y sugiere código en consecuencia.
3. Ediciones multilínea: Puede sugerir ediciones que abarquen varias líneas.
4. Reescrituras inteligentes: El editor puede corregir y mejorar automáticamente nuestro código, incluso si escribimos descuidadamente.
5. Predicción del cursor: Predice la siguiente posición del cursor, permitiendo una navegación fluida por el código.

Funciones del chat

Cursor también integra funciones avanzadas de chat para facilitar una mejor interacción:

1. Codebase responde: Consulta a Cursor sobre el código base, y buscará entre los archivos para dar respuestas relevantes.
2. Código de referencia: Hacer referencia a bloques de código o archivos concretos, integrándolos en el contexto de nuestras consultas.
3. Soporte de imagen: Arrastra imágenes al chat o utiliza botones para añadir contexto visual.
4. Busca en la red: Obtén la información más reciente de Internet directamente en consultas de código.
5. Aplicar al instante: Implementa las sugerencias de código del chat directamente en el código base con sólo pulsar un botón.
6. Integración de la documentación: Haz referencia a bibliotecas populares y añade nuestra propia documentación para un acceso rápido.

Para obtener una lista completa de funciones, por ejemplo, consulta la página de funciones de Cursor.

Cómo instalar Cursor AI

Cursor AI proporciona un archivo de instalación para Linux, Windows y MacOS que puede descargarse gratuitamente en su sitio web.

Para instalarlo en Windows y MacOS, lo descargamos de su página principal e instalamos el archivo de descarga como instalaríamos cualquier otro programa.

En Linux, viene como un archivo AppImage. Antes de ejecutarlo, tenemos que hacerlo ejecutable utilizando:

chmod a+x cursor-0.40.3x86_64.AppImage

Luego, podemos ejecutarlo con

./cursor-0.40.3x86_64.AppImage

Puede que tengamos que sustituir la versión 0.40.3x86_64 en los comandos anteriores dependiendo de la versión que se haya descargado. Para más instrucciones sobre cómo instalar archivos de imagen de aplicaciones, consulta su sitio web.

Tras la instalación, nos aparece la siguiente pantalla de configuración: 

• Keyboard: Esta opción nos permite configurar los atajos de teclado. Por defecto, utiliza los atajos de VS Code, que recomiendo a menos que estés familiarizado con otro editor de código de la lista.
• Lenguaje para la IA: Aquí tenemos la opción de utilizar un idioma distinto del inglés para interactuar con la IA.
• En todo el código: Activar esta opción permite a la IA comprender el contexto de todo el código base.
• Añade un comando de terminal: Si están instalados, permiten ejecutar el editor Cursor AI desde el terminal.

Cómo utilizar la IA del Cursor: 10 Casos prácticos

A lo largo de esta guía, proporcionaremos los atajos de MacOS con la tecla Cmd ⌘. Los atajos son los mismos si utilizas Cursor en Windows o Linux, excepto que en su lugar se utiliza la tecla Ctrl.

Generación de código en línea

Utilizamos el acceso directo Cmd+K para abrir el generador de código en línea. Esto abre una pequeña ventana donde insertamos un prompt para generar código:

Para generar código, escribimos una instrucción y pulsamos el botón generar:

Esto generará el código, y lo añadimos a nuestro proyecto pulsando el botón aceptar:

En este caso, utilizamos el modelo cloude-3.5-sonnet. Podemos seleccionar otro modelo utilizando el selector desplegable de modelos:

Interactúa con el código existente

También podemos utilizar el chat en línea para interactuar con el código existente, seleccionando el código correspondiente antes de utilizar el atajo Cmd+K. Esto se puede utilizar para hacer cambios en el código, como refactorizar, o para hacer preguntas sobre el código. Después de escribir la consulta, hacemos clic en el botón Enviar Edición para obtener las modificaciones:

Los cambios de código en el Cursor se presentan como un diff. Las líneas rojas representan las líneas que se eliminarán con el cambio, mientras que las verdes representan los nuevos cambios que se añadirán:

Hacer preguntas sobre el código existente

Del mismo modo, podemos hacer preguntas sobre un fragmento de código seleccionándolo y utilizando el atajo Cmd+K. En el caso de una pregunta, pulsamos el botón quick question para enviar la pregunta:

Autocompletar con pestaña

Mientras escribes código, Cursor te sugerirá complementos de código generados mediante IA. De forma similar al completado de código tradicional, podemos utilizar la tecla Tab para incorporar estas sugerencias a nuestro código.

Por ejemplo, supongamos que empezamos a implementar una función llamada maximum(). Cursor reconocerá nuestra intención y sugerirá una aplicación adecuada. Pulsando Tab, podemos añadir el código sugerido:

Autocompletar también funciona con código escrito en lenguaje natural. Por ejemplo, si queremos crear un bucle doble for para iterar sobre todas las parejas de una lista, podemos describirlo simplemente en texto plano. Cursor proporcionará entonces la correspondiente sugerencia de autocompletar, que puedes integrar pulsando la tecla Tab:

Visión general de la interfaz del chat

Para abrir la ventana del chat, utiliza el atajo Cmd+L. La ventana de chat es más versátil que el generador en línea, ya que nos permite no sólo generar código, sino también hacer preguntas. Aquí tienes una visión general de la interfaz del chat:

Generación de código con chat

De forma similar a la generación con el chat en línea, también podemos generar código utilizando la función de chat. El código generado en el chat puede integrarse en el proyecto haciendo clic en el botón Aplicar, situado en la esquina superior derecha de la ventana de código.

Mejorar el contexto de la consulta con @

Quizá la característica más importante de la ventana de chat sea la opción @ Mention. Esta opción nos permite proporcionar más datos para que la IA genere la respuesta. Esto va desde simples archivos y carpetas hasta búsquedas en la web o dar a la IA acceso a un GitHub de GitHub.

Por ejemplo, podemos utilizar @Web para que la IA busque la respuesta en Internet.

Ten en cuenta que en algunos casos puede ser problemático compartir toda la base de código o un repositorio privado de GitHub con la IA. Debemos ser conscientes de lo que compartimos con la IA y evitar compartir información sensible o datos privados.

Preguntas sobre la base de código global

Una de las funciones que encuentro más útiles cuando trabajo en proyectos más grandes es la posibilidad de encontrar rápidamente un fragmento de código haciendo una pregunta con todo el código base como ámbito. Hace poco, quise localizar en un proyecto una función que calcula la dirección de navegación en una aplicación. Con Cursor, podía localizarlo de forma muy sencilla describiendo lo que hace la función:

Ten en cuenta que en este caso utilizamos la opción codebase. Aunque, por alguna razón, Cursor no mostraba el código real, al hacer clic en el cuadro de código se abría el archivo correcto y me desplazaba hasta la función que buscaba:

Soporte de imagen

El chat del Cursor también admite entradas de imágenes. Por ejemplo, podemos esbozar un diseño de interfaz de usuario para un sitio web y pedirle que genere el código HTML y CSS correspondiente. Para añadir una imagen, podemos arrastrarla y soltarla en la ventana de chat.

Añadir documentación

Una función muy útil de Cursor AI es la posibilidad de añadir referencias a la documentación. Esto es especialmente útil para las bibliotecas menos conocidas o privadas, cuya documentación podría no haberse utilizado en el proceso de entrenamiento de la IA.

Para añadir una entrada de documentación, utilizamos el símbolo @ y luego seleccionamos Docs en el menú desplegable:

Se abrirá una ventana solicitando una URL para la documentación. Añadamos el PyTorch como ejemplo:

Después de insertar la URL, podemos dar un nombre a la entrada de documentación. En este caso, utilizamos PyTorch. Luego podemos utilizar este nombre para referirnos a esta documentación en la consulta del chat utilizando @PyTorch.

Las referencias a la documentación también pueden gestionarse en el Características de la configuración del Cursor:

Cursor AI: Características y ventajas adicionales

Apoyo lingüístico

Los ejemplos que hemos mostrado en este artículo estaban en Python, HTML y CSS. Pero Cursor no se ha construido teniendo en cuenta ningún lenguaje específico. Como su generación de código se basa en LLM de propósito generalCursor puede generar código en cualquier lenguaje de programación. Utilizará la extensión del archivo para adivinar qué idioma debe utilizarse.

Extensiones

Como Cursor está construido sobre VS Code, hereda de su rico ecosistema de extensiones. Podemos acceder a ellas en el menú View.

Para configurar Cursor para que funcione con Python, recomendé el tutorial de configuración de VSCode Pythonya que las mismas funciones deberían estar disponibles tanto en VSCode como en Cursor.

Colaboración con otros

Utilizar herramientas colaborativas como Git con Cursor es similar a utilizarlas con cualquier editor de código. Estas herramientas no dependen de cómo se haya escrito el código. Hay extensiones diseñadas específicamente para ayudar con Git.

Recuerda que el chat de Cursor te permite utilizar repositorios Git dentro de un contexto utilizando el operador @. Ten en cuenta que esto debe utilizarse con precaución si el repositorio contiene datos privados.

Establecer reglas de IA personalizadas

Cursor nos permite guiar a la IA mediante reglas específicas. Puedes acceder a ellas en el menú de ajustes generales:

Estas reglas pueden modificar el comportamiento de la IA sin necesidad de incitarla repetidamente. Por ejemplo, podemos asegurarnos de que la IA utilice siempre sugerencias de tipo en Python añadiendo una regla como "Utilizar siempre sugerencias de tipo en las definiciones de funciones de Python".

Modelos de IA personalizados

Otra característica interesante de Cursor es la posibilidad de añadir otros modelos de IA. Esta opción se encuentra en los ajustes de Models:

Aquí podemos añadir nuevos modelos. Estos ajustes del modelo también permiten añadir nuestras claves API si lo deseamos.

Cursor AI vs GitHub Copilot

Cursor AI y GitHub Copilot son asistentes de código impulsados por IA, cada uno de los cuales ofrece características únicas.

Cursor AI se basa en VSCode y funciona como un editor independiente. Se integra estrechamente con el entorno de codificación para automatizar tareas y proporcionar sugerencias de código intuitivas, lo que ayuda a agilizar la escritura y refactorización del código. Es especialmente adecuado para los desarrolladores que prefieren una integración profunda con un IDE familiar.

GitHub Copilot, desarrollado por GitHub y OpenAI, se integra con varios editores de código populares como Visual Studio Code. Proporciona sugerencias de código sensibles al contexto, basadas en el estilo de codificación del usuario y en el contexto del proyecto. GitHub Copilot destaca en la predicción de líneas de código posteriores y es compatible con una amplia gama de lenguajes y marcos de programación.

Desde el punto de vista de la integración, Cursor AI ofrece una personalización significativa dentro de su entorno independiente basado en VSCode, lo que puede mejorar el flujo de trabajo para algunos usuarios. En cambio, GitHub Copilot destaca por su fácil configuración e integración con IDEs de uso generalizado, lo que facilita su adopción por parte de muchos desarrolladores.

Ambas herramientas proporcionan sugerencias de código en tiempo real y son compatibles con múltiples lenguajes y marcos de trabajo. Cursor AI puede ser ventajoso para tareas especializadas debido a su profunda integración, mientras que el amplio soporte IDE de GitHub Copilot y su sencilla configuración lo hacen accesible a un público más amplio.

En última instancia, la elección entre Cursor AI y GitHub Copilot puede depender de factores como las necesidades de personalización, las preferencias de integración y el presupuesto. Ambas herramientas pretenden mejorar la eficacia de la codificación de formas diferentes.

Conclusión

Herramientas como ChatGPT han hecho la programación mucho más accesible al permitir a los usuarios escribir código simplemente explicando sus objetivos en lenguaje natural. Cursor da un paso más al integrarse directamente con el editor de código, eliminando la necesidad de cambiar entre el editor y una interfaz de chat.

Mientras que Cursor AI ofrece una completa solución independiente diseñada específicamente para una profunda integración en el entorno VSCode, herramientas como GitHub Copilot proporcionan versatilidad en varios IDE populares. La elección entre ambos depende, en última instancia, de las necesidades y preferencias individuales de personalización y facilidad de configuración.

En resumen, Cursor AI es un potente editor de código basado en IA que promete cambiar la forma en que los desarrolladores abordan la codificación, la refactorización y la depuración.