Vamos a hablar sobre la función de menciones o el símbolo @. Voy a abrir la ventana de chat y aquí, si escribo @, tengo las opciones de archivos, carpetas, código, web, documentos, gate, codebase y el bloc de notas. En este video, te voy a mostrar cómo usar archivos, carpetas y web.
Trabajando con Archivos
Empecemos con los archivos. Si hago clic en «files» (archivos), aquí puedo elegir el tipo de archivo con el que quiero trabajar. Si hago clic en app.js, esto significa que todo el chat se enfocará en este archivo.
También puedo referenciar múltiples archivos a la vez. Por ejemplo, puedo agregar el archivo HTML. Esto significa que la IA se está enfocando tanto en app.js como en index.html.
Ahora puedo escribir una instrucción como: «Crea una función que agregue un botón en el archivo index.html y usa JavaScript para añadir un event listener».
Voy a referenciar el archivo index y escribir: «Agrega un botón en el archivo index.html y usa JavaScript para agregar un event listener».
Al presionar Enter, va a modificar los dos archivos. Primero, agrega el botón en el HTML, y segundo, va a añadir el código en el archivo app.js.
Voy a aceptar este cambio y también el del JavaScript. Como puedes ver, si regreso al HTML, tengo el botón que se agregó, y en el JavaScript, tengo el event listener tal como se instruyó.
Esa es la potencia de las menciones: no solo trabajar en un archivo individual, sino que podemos saltar entre diferentes archivos usando la mención @.
Trabajando con Carpetas
Ahora hablemos de las carpetas. Si hago clic en @ y luego en «folder» (carpeta), a veces detecta automáticamente el nombre de la carpeta y a veces no. En caso de que no lo detecte, tienes que escribir el nombre de la carpeta manualmente, como «app».
Si hago esto, simplemente significa que estoy trabajando en esta carpeta en particular.
Trabajando con Código
También tenemos la opción de «code» (código). Para esto, podemos copiar código del archivo app.js. Por ejemplo, código para «sumar dos números» o «sumar un array». Si hago clic en eso, obtengo el código de ese archivo desde la línea 2 hasta la línea 16.
También puedo referenciar diferentes fragmentos de código y trabajar con ambos al mismo tiempo.
La Función Web – El Verdadero Poder
Y ahora viene la función más poderosa: @ y luego «web». Déjame mostrarte algunos casos de uso.
Imagínate que te has encontrado con cierto paquete o documentación y no sabes cómo usarlo. Ahora, en lugar de leer mucha documentación o manuales de paquetes, con Cursor AI y la función web, va a ser muchísimo más fácil.
Ejemplo Práctico: Implementando Multer
Por ejemplo, digamos que quieres integrar Multer, que es un paquete para Express que permite la subida de archivos. En lugar de revisar toda la documentación, veamos cómo lo hace Cursor.
Supongamos que queremos implementar subida de archivos y necesitamos Multer en nuestro proyecto. Tengo el archivo app.js donde quiero implementar la subida de archivos.
Voy a copiar la URL de la documentación de Multer y pegarla. Luego puedo escribir: «Implementa la subida de archivos usando Multer en este archivo» y referenciar el archivo app.js.
Al presionar Enter, primero busca en la web y obtiene la información correcta. Después de terminar, va a implementarlo en el archivo app.js.
Como puedes ver, me dice que debemos instalar Multer. Si hago clic en «run» (ejecutar), puedo ver este comando en la terminal. Al hacer clic en ejecutar, está instalando Multer automáticamente.
Después me dice que debemos agregar este código al archivo app.js. Hago clic en «apply» (aplicar) y luego «accept» (aceptar).
Si observo los cambios en el código ahora, esta es la lógica completa para subida de archivos.
Ese es el verdadero poder de la función web en Cursor: puede buscar información actualizada en internet y aplicarla directamente a tu código, ahorrándote horas de lectura de documentación.
Esta funcionalidad de menciones (@) en Cursor te permite trabajar de manera más eficiente al poder referenciar archivos específicos, carpetas completas, fragmentos de código, y hasta buscar información actualizada en la web para implementarla directamente en tu proyecto.