Didacticiel sur le curseur (version chinoise)

Cet article est une contribution au billet de Juan Stoppa Code Smarter, Not Harder : Developing with Curseur et Claude Traduction de Sonnet. La raison pour laquelle j'appelle cela une traduction est que la plupart du contenu de cet article est basé sur ma propre expérience, mais que le cadre de l'article est basé sur la structure de son article, c'est pourquoi on l'appelle une traduction.

Ce tutoriel présente les fonctions de base du curseur.

Si vous êtes débutant, vous voulez vraiment écrire le code complet du projet en un seul clic grâce à l'IA, et déployer automatiquement l'environnement en ligne pour l'utiliser.

Recommandé :Bolt : une plateforme de développement full-stack en temps réel pilotée par l'IA qui génère et exécute en ligne le code d'un projet complet.

Une brève introduction au curseur

Il est basé sur un dérivé modifié de VSCode, de sorte que toutes vos configurations VSCode peuvent être importées et utilisées dans Cursor, ce qui facilite la migration si vous développez habituellement en VSCode.

La plus grande différence entre Cursor et VSCode est qu'il dispose d'une IA intégrée pour la collaboration de code, pour laquelle il apporte un certain nombre de changements à VSCode qui en font une meilleure expérience que l'utilisation de quelque chose comme Github sur VSCode. Copilote Une classe de plugin est beaucoup plus confortable. C'est probablement monotone de dire cela, et je commencerai par Copilote Github Prenez des notes comparatives.

Github Copilot est importé en tant que plugin dans VSCode :

Copilote Github

En termes d'utilisation, l'assistance de Copilot se concentre sur ces points : complétion de code, même fenêtre de dialogue que GPT avec réécriture de la génération de code.

La complétion de code est une fonction essentielle de Copilot que j'adore, elle raisonne automatiquement sur ce qui suit pendant que vous écrivez le code et vous n'avez qu'à appuyer sur la touche `Tab` pour recevoir ses suggestions :

Github Copilot's Code Completion, comme exemple du document que je suis en train d'écrire.

La meilleure chose à ce sujet est l'expérience immersive : je peux facilement réécrire un exemple de code sans quitter mon éditeur et sans copier-coller le code original - cela ne veut pas dire qu'il génère des résultats, mais il génère en fait le code que je veux dans la plupart des cas.

Il y a aussi la même fenêtre de dialogue que GPT, qui a l'avantage de soumettre le contexte du code que vous êtes en train d'éditer au grand modèle en même temps, pour de meilleurs résultats de génération :

Fenêtre de dialogue de Github Copilot

Enfin, il y a la médiocre réécriture de la génération de code dans l'éditeur, que vous pouvez déclencher via la petite ampoule de VSCode (anciennement appelée Action de code, qui est utilisée pour faire quelque chose avec le code) :

Les réécritures de la génération de code de Github Copilot apparaissent dans l'action de code.

Lorsque vous choisissez d'utiliser Copilot pour effectuer des modifications, une fenêtre d'invite apparaît dans laquelle vous pouvez saisir des commandes telles que `/doc` pour aider Copilot à générer de la documentation ou à mieux modifier/réécrire votre code :

Réécriture de la génération de code pour Github Copilot

Bien qu'il ait l'air génial, mon expérience personnelle est qu'il ne fonctionne pas. :( Parce qu'il réécrit la plupart du temps en générant une nouvelle copie du code, et qu'ensuite je dois à nouveau supprimer le code original ...... Disons que j'utilise Copilot principalement parce que j'aime la fonction de complétion de code.

Et l'expérience Cursor est particulièrement étonnante - ce que Copilot fait bien, il le fait mieux ; ce que Copilot ne fait pas bien, il le fait parfaitement.

Copilot ne parvient pas toujours à générer correctement des blocs de code fermés (par exemple, les paires de `()` `{}` entre elles ne sont pas générées correctement), mais c'est rarement le cas avec Copilot.

La fenêtre de dialogue, mon Dieu, Copilot est vraiment une merde comparée à elle parce que le dialogue du curseur génère du code qui peut être appliqué directement à votre code :

La fonction d'application de la fenêtre de dialogue du curseur, cette application consiste à appliquer le code qu'elle modifie au code.

La raison pour laquelle Cursor applique les changements directement à votre code est qu'il a affiné son propre modèle de manière à ce que LLM produise un format diff[3] comme Git. Avec le format diff, il est possible de modifier exactement la bonne section du code.

Et pour rendre les choses encore plus confortables, Cusor facilite le passage de plusieurs fichiers sources dans une conversation ou l'analyse du silo de code de votre projet entier (en appuyant sur `ctrl + enter`) pour extraire le contenu pertinent comme contexte pour demander au grand modèle des réponses plus précises :

Les fichiers pertinents peuvent être ajoutés rapidement via l'interface utilisateur correspondante, en appuyant sur `ctrl + enter`, un dialogue s'ouvrira sur la base du code contenu dans la corbeille à codes.

La vitesse de génération et la vitesse d'indexation sont très fluides, parce qu'elles sont similaires à celles de JetBrains, de sorte que l'indexation de l'entrepôt de codes, mais son indexation est vectorisée (embeddings, la traduction habituelle est vector inlays, mais j'aime l'appeler vectorisée), de sorte que lors de l'indexation, il peut être pratique de faire une recherche de similarité pour une meilleure génération.

Fonction d'indexation du curseur

En outre, le curseur dispose de ses propres raccourcis intégrés, dont je parlerai plus loin.

En bref : le curseur tue vraiment le copilote.

Bien que d'après mon expérience précédente de l'écriture de plug-ins VSCode, la raison pour laquelle certaines choses utilisées par Copilot en général, principalement parce que comme un plug-ins VSCode limite, mais Cursor est un éditeur magique, de sorte que beaucoup de fonctionnalités restreintes peuvent être audacieux et libre de faire, pas étonnant que Cursor peut faire si bien.

Utilisation de base du curseur

montage

Cursor doit être téléchargé depuis son site officiel : https://www.cursor.com/. Après le téléchargement, vous devez vous enregistrer pour l'utiliser, et il prend en charge la connexion aux comptes Google et Github.

Cursor fonctionne sur la base d'un abonnement. Les nouveaux utilisateurs peuvent essayer l'abonnement Pro pendant quinze jours. Pour un abonnement Pro, vous devrez payer 20 dollars par mois (soit environ cent quarante dollars). Bien qu'il fonctionne, c'est un peu cher.

Après l'installation, Cursor vous demandera d'importer votre configuration VSCode lorsque vous le démarrerez pour la première fois, et une fois que c'est fait, vous aurez une version de VSCode améliorée par l'IA.

Touches de raccourci et fonctions correspondantes

Le curseur dispose des touches de raccourci suivantes pour utiliser les fonctions AI correspondantes.

1. `CTRL/CMD + L` pour ouvrir la boîte de dialogue

Utilisez les touches `CTRL/CMD + L` pour ouvrir la boîte de dialogue sur le côté droit de l'éditeur (ce `L` est vers la droite sous les touches de vim, et les touches fléchées sous les touches de vim sont `h,j,k,l` sur le clavier comme une rangée de touches, avec `h` à gauche donc à gauche, `l` à droite et à droite, `j` vers le bas et `k` vers le haut. (J'aime beaucoup cela).

La source de l'image est le texte original, la boîte de dialogue s'ouvre à droite et les autres sources citées sont décrites au recto de l'image.

2. `CTRL/CMD + K' ouvre la fenêtre du générateur

Utilisez les touches `CTRL/CMD + K` au-dessus de la position du curseur (car `k` signifie up !) pour ouvrir la fenêtre Generate. 💕) pour ouvrir la fenêtre Generate :

Le texte source original, ci-dessus, ouvre une boîte de dialogue permettant de générer du code.

Par ailleurs, lorsque vous sélectionnez un élément de contenu, le fait d'appuyer sur `CTRL/CMD + K` ouvrira également la fenêtre correspondante, qui générera du contenu en fonction du contexte de votre sélection :

Génération de contenu sélectionné

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

En utilisant `CTRL/CMD + I` vous pouvez ouvrir une fonction spéciale de Cursor : Composer, une fonction spéciale de Cursor qui vous permet de faire des changements sur plusieurs fichiers en même temps dans une fenêtre de dialogue.

Pour utiliser Composer, vous devez d'abord l'activer dans les paramètres du curseur, et vous devez accéder à sa page de paramètres dans l'ordre suivant : `Fichier > Préférences > Paramètres du curseur > Fonctionnalités > Activer Composer`.

Figure source originale, configuration du compositeur

Le `Composeur`, ouvert avec `CTRL + I`, est une petite interface de glisser-déposer :

Interface du petit panneau du compositeur

Vous pouvez saisir une modification complexe, étape par étape, impliquant plusieurs fichiers, et Composer générera toutes les modifications pour les fichiers concernés en même temps. En général, cependant, Composer doit être utilisé dans son intégralité via le bouton situé dans le coin supérieur droit de l'interface du petit panneau :

Ouvrir le plein écran de Composer

Il indiquera clairement à gauche l'endroit de votre dialogue cumulatif où vous souhaitez modifier ces fichiers, et vous pourrez appliquer directement les modifications appropriées.

C'est de loin la meilleure façon dont j'ai expérimenté la **programmation assistée par l'IA** : vous pouvez continuer à décrire vos besoins en langage naturel dans une seule fenêtre, sans avoir à passer d'une fenêtre à l'autre et d'un fichier à l'autre. J'ai l'impression que Cursor est la meilleure forme d'interaction qui ait été explorée.

Notation `@` pour des informations contextuelles pratiques

Afin de faciliter la fourniture d'informations contextuelles à un grand modèle linguistique, Cursor a intégré différentes annotations `@`, qui permettent d'injecter facilement différents types d'informations contextuelles dans votre dialogue.

Certaines des notes `@` sont génériques et peuvent être utilisées dans toutes les fenêtres de dialogue ; d'autres sont spécifiques et je les compléterai au fur et à mesure que je les mentionnerai.

Note : Github Copilot dispose d'une fonctionnalité similaire, mais elle n'est pas aussi complète que Cursor.

1. note `@Files`, transmettant le contexte des fichiers de code spécifiés

Lorsque vous saisissez la note `@Files` dans la boîte de dialogue, Cursor affiche automatiquement une liste de recherche de vos dépôts de code. Vous pouvez saisir les noms des fichiers que vous souhaitez importer dans le contexte et appuyer sur le bouton de confirmation, et le contenu des fichiers correspondants sera automatiquement injecté dans le contexte à ce moment-là :

`@Files` note

2. note `@Code`, transmettant le contexte du bloc de code spécifié

Les notes `Code` fournissent des extraits de code plus précis, les notes `@` sont utilisées de la même manière, elles font apparaître la boîte de recherche correspondante, vous entrez le mot-clé dans la liste d'index pour sélectionner le bloc de code approprié.

L'identification des blocs de code est déterminée par le LSP de votre environnement de développement, qui est précis dans la plupart des cas :

`@Code` notes

3. note `@Docs` pour obtenir le contexte à partir de la documentation officielle de la fonction ou de la bibliothèque

La note `@Docs` peut obtenir le contexte à partir de la documentation officielle d'une fonction ou d'une bibliothèque. Actuellement, elle ne peut obtenir le contexte qu'à partir de la documentation en ligne accessible. Ainsi, votre propre documentation de type JSDoc est inutile à moins que vous ne puissiez obtenir une adresse en ligne pour elle ~ Personnellement, je ne pense pas que cette fonctionnalité soit d'un usage très général.

La note `@Docs`, qui est généralement utilisée lorsque vous devez importer des documents manuellement.

4. la notation `@Web` pour obtenir le contexte à partir du contenu des moteurs de recherche

La note `@Web` est similaire à une méthode, elle va par défaut à votre question d'abord à la recherche du moteur de recherche, et puis à partir des résultats de la recherche du contexte de l'extraction alimenté au LLM. mais parce que le fonctionnaire Cursor n'a pas la transparence publique de la mise en œuvre spécifique de la méthode, il n'a pas été ajusté, en fait, les résultats de l'utilisation de la fluctuation de bon et de mauvais.

Si vous avez un problème et que vous voulez être paresseux et ne pas ouvrir la page pour chercher des erreurs ou si la réponse du grand modèle ne résout pas le problème, vous pouvez simplement utiliser cette note.

5. note `@Folders`, contexte permettant de transmettre des informations sur les répertoires de fichiers

La note `@Folders` peut fournir des informations sur les répertoires de fichiers, donc si vous rencontrez des problèmes de chemin, pensez à utiliser cette note pour chercher une solution dans le grand modèle.

`@Folders` note

6. la notation `@Chat`, une notation qui ne peut être utilisée que dans la fenêtre de génération de code à l'intérieur d'un fichier.

La note `@Chat`, qui ne peut être utilisée que dans la fenêtre de génération de code à l'intérieur d'un fichier (celle ouverte par `CTRL + K`), transmet le contenu du dialogue dans la fenêtre de dialogue ouverte à votre droite comme contexte au modèle plus large.

`@Chat` note

7. note `@Definitions`, une note qui ne peut être utilisée que dans la fenêtre de génération de code à l'intérieur d'un fichier.

Comme la note `@Chat`, la note `@Definitions` ne peut être utilisée que dans la fenêtre de génération de code à l'intérieur d'un fichier. Elle transmet les définitions des variables et des types impliqués dans la ligne de code que vous survolez au modèle plus large en tant que contexte, de la même manière que la note `@Code`.

`@Definitions` note

8. note `@Git`, utilisable uniquement dans les fenêtres de dialogue

La fenêtre de dialogue est celle ouverte par `CTRL + L` et `CTRL + I`. La note `@Git` peut transmettre l'historique des commits de votre dépôt Git actuel au grand modèle en tant que contexte.

Il semble mieux adapté à la vérification des habilitations de criminels de guerre lors de la collaboration au code.

8. note `@Codebase`, qui ne peut être utilisée que dans la fenêtre de dialogue pour rechercher les fichiers appropriés à passer dans le codebase

La note `Codebase` n'est pas vraiment très utile ; plutôt que de balayer la base de code, il s'agit plutôt d'un passage contextuel à partir de la base de code pour trouver le fichier que vous voulez, c'est à dire `CodebaseFilter`.

J'ai le sentiment qu'il ne sera pas utilisé dans le cadre d'un développement normal parce qu'il doit passer des conditions de filtrage pour définir des paramètres de filtrage :

La note `@Codebase` vous demande de transmettre des informations sur les quantités, les modèles utilisés pour le filtrage/tri, etc.

La différence avec le raccourci `CTRL + enter` est probablement que vous pouvez personnaliser les règles de filtrage pour la requête. Mais je ne pense pas que ce soit très utile.

ultime

Si vous pouvez vous le permettre, essayez d'utiliser Cursor, c'est une très bonne expérience (même si vous ne l'avez pas). Ne regardez pas ma transcription comme si je n'avais pas dit grand-chose, utilisez-le et vous aurez une excellente expérience. L'expérience de développement est vraiment bonne.

Cet article est censé être une retraduction, mais il semble que ce soit essentiellement moi qui écrive ma propre expérience d'utilisation ~ si vous allez à l'article original, vous constaterez probablement qu'il n'y a pas de contenu ici qui corresponde à l'article original.

Je suis un peu déchiré sur la question de savoir si je dois ou non re-catégoriser cet article. Principalement parce que j'ai été inspiré pour écrire mon propre tutoriel simple sur la façon de l'utiliser après avoir vu l'article original, mais la structure de cet article est vraiment influencée par l'article original. Hélas, je suis partagé.