Tutorial del cursor (versión en chino)

Este artículo es una contribución a la entrada del blog de Juan Stoppa Code Smarter, Not Harder: Developing with Cursor y Claude Traducción de Sonnet. La razón por la que lo llamo traducción es porque la mayor parte del contenido de este artículo se basa en mi propia experiencia, pero como el marco del artículo se basa en la estructura de su artículo, por eso se llama traducción.

Este tutorial presenta las funciones básicas del Cursor.

Si usted es un principiante, que realmente quiere escribir el código completo del proyecto con un solo clic a través de AI, y automáticamente desplegar el entorno en línea para usarlo.

Recomendado:Bolt: una plataforma de desarrollo integral en tiempo real basada en inteligencia artificial que genera y ejecuta en línea el código completo del proyecto.

Breve introducción a Cursor

Cursor es un editor de código construido en los laboratorios de Anysphere. Está basado en un derivado modificado de VSCode, por lo que todas tus configuraciones de VSCode pueden ser importadas y usadas en Cursor, facilitando la migración si normalmente desarrollas en VSCode.

La mayor diferencia entre Cursor y VSCode es que tiene incorporada IA para la colaboración de código, para lo cual realiza una serie de cambios en VSCode que hacen que sea una experiencia mejor que usar algo como Github en VSCode. Copiloto Una clase de plugin es mucho más cómoda. Probablemente sea monótono decirlo, y empezaré con Copiloto Github Tome notas comparativas.

Github Copilot se importa como un plugin en VSCode:

Copiloto Github

En términos de uso, la asistencia de Copilot se centra en estos puntos: finalización de código, la misma ventana de diálogo que GPT con reescritura de generación de código.

Completar código es una característica central de Copilot que me encanta, razonará automáticamente lo que sigue mientras escribes el código y sólo tienes que pulsar la tecla `Tab` para recibir sus sugerencias:

Completado de código de Github Copilot, como ejemplo del documento que estoy escribiendo ahora mismo

Lo mejor de todo es la experiencia inmersiva: puedo reescribir fácilmente algún código de ejemplo sin salir de mi editor y sin copiar y pegar el código original - esto no quiere decir que genere resultados, pero de hecho genera el código que quiero en la mayoría de los casos.

Y luego está la misma ventana de diálogo que GPT, que tiene la ventaja de enviar convenientemente el contexto del código que estás editando en ese momento al modelo grande al mismo tiempo, para obtener mejores resultados de generación:

Ventana de diálogo de Github Copilot

Por último está la mediocre reescritura de edición de generación de código en el editor, que puedes activar a través de la pequeña bombilla de VSCode (formalmente llamada Acción de Código, que se utiliza para hacer algo con el código):

Las reescrituras de generación de código de Github Copilot aparecen en la Acción Código

Cuando decida utilizar Copilot para realizar cambios, aparecerá un cuadro de diálogo en el que podrá introducir comandos como `/doc` para ayudar a Copilot a generar documentación o a modificar/reescribir mejor su código:

Reescritura de la generación de código para Github Copilot

Aunque parece impresionante, mi experiencia personal es que no funciona. :( Porque reescribe la mayoría de las veces genera una nueva copia del código, y luego tengo que ir a borrar el código original de nuevo ...... Digamos que uso Copilot principalmente porque me encanta la función de completar código.

Y la experiencia de Cursor es especialmente sorprendente: lo que Copilot hace bien, lo hace mejor; lo que Copilot no hace bien, lo hace perfectamente.

Copilot a menudo no genera correctamente bloques de código cerrados (por ejemplo, los pares de `()` `{}` entre sí no se generan correctamente), pero esto no suele ocurrir con Copilot.

La ventana de diálogo, madre mía, Copilot es realmente una porquería comparada con ella, porque el diálogo de Cursor genera código que se puede aplicar directamente a tu código:

La función apply de la ventana de diálogo del cursor, que apply es aplicar el código que modifica al código

La razón por la que Cursor aplica los cambios directamente a tu código es que ha afinado su propio modelo para que LLM produzca un fomato diff[3] como Git. Con el formato diff es posible modificar exactamente la sección correcta del código.

Y para hacer las cosas aún más cómodas, Cusor facilita el paso de múltiples archivos fuente en una conversación o el escaneo de todo el silo de código de tu proyecto (pulsando `ctrl + enter`) para extraer contenido relevante como contexto para pedir respuestas más precisas al gran modelo:

Los archivos pertinentes pueden añadirse rápidamente a través de la interfaz de usuario correspondiente; si se pulsa "ctrl + enter", aparecerá un diálogo basado en el código de la bandeja de códigos.

Velocidad de generación y la velocidad de indexación es muy suave, ya que será similar a JetBrains para que la indexación del almacén de código, pero su indexación es hacer vectorizada (incrustaciones, la traducción habitual es incrustaciones de vectores, pero me gusta llamarlo vectorizado), por lo que cuando la indexación puede ser conveniente hacer una búsqueda de similitud para una mejor generación.

Función de indexación del cursor

Además, Cursor tiene sus propios atajos incorporados, que mencionaré más adelante.

En pocas palabras: Cursor realmente mata a Copilot.

Aunque desde mi experiencia previa de escribir VSCode plug-ins, la razón por la que algunas cosas Copilot uso de la experiencia en general, principalmente porque como VSCode plug-ins limitarlo, pero Cursor es un editor mágico, por lo que una gran cantidad de características restringidas puede ser audaz y libre de hacer, no es de extrañar Cursor puede hacer tan bien.

Uso básico del cursor

montaje

Cursor debe descargarse de su sitio web oficial: https://www.cursor.com/. Tras la descarga, es necesario registrarse para utilizarlo, y admite el inicio de sesión con cuentas de Google y Github.

Cursor funciona mediante suscripción. Los nuevos usuarios pueden probar la suscripción Pro durante quince días. Para una suscripción Pro, tendrás que pagar 20 dólares al mes (unos ciento cuarenta dólares). Aunque funciona, es un poco caro.

Después de la instalación, Cursor te pedirá que importes tu configuración de VSCode cuando lo inicies por primera vez, y una vez hecho esto, básicamente tienes una versión mejorada de VSCode.

Teclas de acceso directo y funciones correspondientes

Cursor dispone de las siguientes teclas de acceso directo para utilizar las funciones AI correspondientes.

1. `CTRL/CMD + L` para abrir el cuadro de diálogo

Usa las teclas `CTRL/CMD + L` para abrir el cuadro de diálogo a la derecha del editor (esta `L` está hacia la derecha bajo las teclas de vim, y las teclas de dirección bajo las teclas de vim son `h,j,k,l` en el teclado como una fila de teclas, con `h` a la izquierda tan a la izquierda, `l` a la derecha derecha y derecha, `j` abajo y `k` arriba. (Esto me gusta mucho).

La fuente de la imagen es el texto original, el cuadro de diálogo se abre a la derecha, y otras fuentes citadas se describen en la parte delantera de la imagen.

2. `CTRL/CMD + K' abre la ventana de generación

Utiliza las teclas `CTRL/CMD + K` encima de la sujeción del cursor (¡porque `k` significa arriba! 💕) para abrir la ventana Generar:

El texto fuente original, arriba, abre un cuadro de diálogo para generar código

Como nota al margen, cuando selecciones un contenido, al pulsar `CTRL/CMD + K` también se abrirá la ventana correspondiente, y el contexto en el que se generará el contenido será el contenido que hayas seleccionado:

Generación de contenidos seleccionados

3. `CTRL/CMD + I' abre Composer.

Usando `CTRL/CMD + I` puedes abrir una característica especial de Cursor: Compositor, una característica especial de Cursor que te permite hacer cambios en varios archivos al mismo tiempo en una ventana de diálogo.

Para utilizar Composer, primero tienes que activarlo en la configuración del Cursor, y tienes que acceder a su página de configuración en este orden: `Archivo > Preferencias > Configuración del Cursor > Características > Activar Composer`.

Figura fuente original, configuración Composer

El `Compositor`, que se abre con `CTRL + I`, es una pequeña interfaz de arrastrar y soltar:

Interfaz de panel pequeño de Composer

Puede introducir una modificación compleja paso a paso que implique varios archivos, y Composer generará todas las modificaciones de los archivos implicados al mismo tiempo. En general, sin embargo, Composer debe utilizarse en su totalidad a través del botón situado en la esquina superior derecha de la interfaz del panel pequeño:

Abrir la pantalla completa de Composer

Enumerará claramente a la izquierda en qué parte de tu diálogo acumulativo quieres cambiar esos archivos, y podrás aplicar directamente los cambios pertinentes.

Esta es, con diferencia, la mejor forma que he experimentado de **programación asistida por IA**: puedes seguir describiendo de forma natural tus necesidades en lenguaje natural dentro de una única ventana, sin tener que cambiar entre múltiples ventanas y archivos. Creo que Cursor es la mejor forma de interacción que se ha explorado.

Notación `@` para facilitar la información contextual

Para facilitar el suministro de información contextual a un modelo lingüístico de gran tamaño, Cursor ha incorporado diferentes anotaciones `@`, que facilitan la inyección de distintos tipos de información contextual en el diálogo.

Algunas de las notas `@` son genéricas y pueden utilizarse en todas las ventanas de diálogo; otras son específicas y las iré añadiendo a medida que las mencione.

Nota: Github Copilot tiene una función similar, pero no es tan completa como Cursor.

1. Nota `@Ficheros`, que pasa el contexto de los ficheros de código especificados.

Cuando introduzcas la nota `@Ficheros` en el cuadro de diálogo, Cursor mostrará automáticamente una lista de búsqueda de tu repositorio de código, puedes introducir el nombre del fichero que quieres importar al contexto, y después pulsar el botón confirmar, el contenido del fichero correspondiente se inyectará automáticamente en el contexto:

Nota

2. Nota `@Code`, que pasa el contexto del bloque de código especificado.

Las notas `Code` proporcionan fragmentos de código más precisos, las notas `@` se utilizan de manera muy similar, aparecerá el cuadro de búsqueda correspondiente, se introduce la palabra clave en la lista de índice para seleccionar el bloque de código apropiado puede ser.

La identificación de los bloques de código viene determinada por el LSP de su entorno de desarrollo, que es preciso en la mayoría de los casos:

Notas `@Código

3. Nota `@Docs` para obtener el contexto de la documentación oficial de la función o biblioteca.

La nota `@Docs` puede obtener el contexto de la documentación oficial de una función o biblioteca. Actualmente, sólo puede obtener el contexto de la documentación accesible en línea. Por lo tanto, su propia documentación tipo JSDoc es inútil a menos que pueda obtener una dirección en línea para ella ~ Personalmente, no creo que esta característica sea de uso muy general.

La nota `@Docs`, que suele utilizarse cuando hay que importar documentos manualmente.

4. Notación `@Web` para obtener el contexto del contenido de las búsquedas en buscadores

`@Web` nota es similar a un método, por defecto a su pregunta en primer lugar a la búsqueda del motor de búsqueda, y luego de los resultados de búsqueda del contexto de la extracción alimentado a la LLM. pero debido a que el funcionario Cursor no la transparencia pública de la aplicación específica del método, no se ha ajustado, de hecho, los resultados de la utilización de la fluctuación de buenos y malos.

Si tienes un problema y quieres ser perezoso y no abrir la página para buscar errores o si la propia respuesta del gran modelo no resuelve el problema, puedes utilizar esta nota.

5. Nota `@Folders`, contexto para pasar información sobre directorios de archivos

La nota `@Folders` puede proporcionar información sobre directorios de archivos, así que si te encuentras con algún problema de rutas, considera utilizar esta nota para buscar una solución en el modelo grande.

Nota "Carpetas

6. Notación `@Chat`, una notación que sólo puede utilizarse en la ventana de generación de código dentro de un fichero.

La nota `@Chat`, que sólo puede utilizarse en la ventana de generación de código dentro de un fichero (la que se abre con `CTRL + K`), pasa el contenido del diálogo de la ventana de diálogo abierta a su derecha como contexto al modelo mayor.

Nota

7. Nota `@Definitions`, una nota que sólo puede utilizarse en la ventana de generación de código dentro de un fichero.

Al igual que la nota `@Chat`, la nota `@Definitions` sólo puede utilizarse en la ventana de generación de código dentro de un fichero. Pasa las definiciones de las variables y tipos implicados en la línea de código sobre la que se pasa el cursor al modelo mayor como contexto, de forma similar a la nota `@Code`.

Nota "Definiciones

8. Nota `@Git`, sólo puede utilizarse en ventanas de diálogo

La ventana de diálogo es la que se abre con `CTRL + L` y `CTRL + I`. La nota `@Git` puede pasar el historial de commits de tu repositorio Git actual al modelo grande como contexto.

Parece más adecuado para su uso cuando se comprueban las autorizaciones de criminales de guerra durante la colaboración en código.

8. Nota `@Codebase`, que sólo se puede utilizar en la ventana de diálogo para buscar los archivos adecuados para pasar en el codebase

La nota `Codebase` no es realmente muy útil; en lugar de barrer el código base, es más bien un pase contextual del código base para encontrar el archivo que quieres, es decir, `CodebaseFilter`.

Tengo la sensación de que no se utilizará en el desarrollo normal porque tiene que pasar condiciones de filtro para establecer los parámetros del filtro:

La nota `@Codebase` requiere que pases información sobre cantidades, modelos utilizados en el filtrado/clasificación, etc.

La diferencia con el atajo `CTRL + enter` es, presumiblemente, que puedes personalizar las reglas de filtrado de la consulta. Pero no creo que sea muy útil.

lo último en

Si te lo puedes permitir, prueba a usar Cursor, es una experiencia realmente buena (aunque no lo tengas). No mires mi transcripción como si no dijera mucho, sólo úsalo y tendrás una gran experiencia. La experiencia de desarrollo es realmente buena.

Se dice que este artículo es una re-traducción, pero parece ser básicamente yo escribiendo mi propia experiencia de uso ~ así que si vas al artículo original, probablemente encontrarás que no hay contenido aquí que coincida.

Estoy un poco indeciso sobre si re-categorizar o no este artículo. Principalmente porque me inspiré para escribir mi propio tutorial sencillo sobre cómo usarlo después de ver el artículo original, pero la estructura de este artículo está realmente influenciada por el artículo original. Estoy indeciso.