This article is a contribution to Juan Stoppa's blog post Code Smarter, Not Harder: Developing with Cursor and Claude Sonnet's translation. The reason why I call it a translation is because most of the content in this article is based on my own experience, but because the framework of the article is based on his article structure, so it is called a translation.
This tutorial introduces the basic functions of the Cursor.
If you are a white guy, you want to really realize one-click to write the complete project code through AI, and automatically deploy the online environment to use.
A brief introduction to Cursor
Cursor is a code editor built in Anysphere's labs. It is based on a modified derivative of VSCode, so all of your VSCode configurations can be imported and used in Cursor, making it easy to migrate over if you normally develop in VSCode.
The biggest difference between Cursor and VSCode is that it has built-in AI for code collaboration, for which it makes a number of changes to VSCode that make it a better experience than using something like Github on VSCode. Copilot A class of plugins is more comfortable. It may be monotonous to say that, so I'll illustrate the comparison with Github Copilot.
Github Copilot is imported as a plugin in VSCode:
Github Copilot
In use, Copilot's assistance focuses on these points: code completion, the same dialog window as GPT with code generation rewriting.
Code Completion is a core feature of Copilot that I love, it will automatically reason out what to follow as you write code, and you just need to press the `Tab` key to receive its suggestions:
Github Copilot's Code Completion, as an example of the document I'm writing right now
The best thing about it is the immersive experience: I can easily rewrite some sample code without leaving my editor and copying and pasting the original code - that's without generating results, but it does in fact generate the code I want in most cases.
And then there's the dialog window like GPT, which has the advantage of conveniently submitting the context of the code you're currently editing to the big model at the same time, for better generation results:
Github Copilot's dialog window
Finally, there's the mediocre in-editor code generation edit rewrite, which you can trigger via VSCode's little light bulb (formally called Code Action, which is used to do something with the code):
Github Copilot's code generation rewrite appears in Code Action
When you choose to use Copilot to make changes, a prompt box will pop up where you can enter commands such as `/doc` to help Copilot either generate documentation or to better modify/rewrite your code:
Code Generation Rewrite for Github Copilot
Although it looks awesome, my personal practical experience is that it doesn't work. :( Because it rewrites most of the time generates a new copy of the code, and then I have to go delete the original code again ...... Let's just say that I use Copilot mainly because I love the code completion feature.
And the Cursor experience is particularly amazing - what Copilot does well, it does better; what Copilot doesn't do well, it does to perfection.
Code completion, in my personal experience, is much more accurate. Copilot often fails to generate closed blocks of code correctly (e.g., it can't correctly generate the pairing of `()` ` `{}` with each other), but it seldom does.
The dialog window, my goodness, Copilot is really a piece of crap compared to it, because Cursor dialog generates code that can be applied directly to your code:
Cursor dialog window's apply function, that apply is to apply the code it modifies to the code
The reason why Cursor applies changes directly to your code is that it has fine-tuned its own model so that LLM outputs a diff fomat[3] like Git. With diff format it is possible to modify exactly the right section of code.
And to make things even more comfortable, Cusor makes it easy to pass multiple source code files in a single conversation or scan your entire project's code silo (by pressing `ctrl + enter`) to extract the relevant content as the context of a query to the big model to get a more precise answer:
Relevant files can be added quickly via the relevant UI, pressing `ctrl + enter` will result in a dialog based on the code in the codebin
Generation speed and indexing speed is very smooth, because it will be similar to JetBrains so that the indexing of the code warehouse, but its indexing is to do vectorization (embeddings, the customary translation is vector inlays, but I like to call it vectorization), so in the indexing can be convenient to do the similarity of the search for better generation results.
Cursor's indexing function
In addition, Cursor has its own built-in shortcuts, which I'll mention later.
In a nutshell: Cursor really kills Copilot.
Although from my previous experience of writing VSCode plug-ins, the reason why some of the east and west Copilot experience in general, mainly because as a VSCode plug-ins limit it, but Cursor is a magical editor, so a lot of restricted features can be bold and free to do, no wonder Cursor can do so well.
Basic use of Cursor
mounting
Cursor needs to be downloaded from its official website: https://www.cursor.com/. After downloading, you need to register to use it, and it supports Google and Github account login.
Cursor is on a subscription basis. New users can try the Pro subscription for two weeks. To get the Pro subscription, you need to pay 20 cents (about 140 dollars) per month. While it does work, it's a little pricey (
After installation, Cursor will prompt you to import your VSCode configuration the first time you start it up, and once that's done, you basically have an AI-enhanced version of VSCode.
Shortcut Keys and Corresponding Functions
Cursor has the following shortcut keys to use the corresponding AI functions.
1. `CTRL/CMD + L` Open dialog box
Use the `CTRL/CMD + L` keys to open the dialog box on the right side of the editor (this `L` is rightwards under vim keystrokes, the arrow keys under vim keystrokes are `h,j,k,l` on the keyboard as a row of keystrokes, with `h` on the left so left, `l` on the right right and right, `j` down and `k` up. (I really like this).
The original source of the image, the dialog box opens on the right, and other sources cited are described in the front of the image
2. `CTRL/CMD + K' opens the generation window
Use the `CTRL/CMD + K` keys above the cursor hold (because `k` stands for up! 💕) to open the Generate window:
The original source, above, opens a dialog box for generating code
As a side note, when you select a piece of content and press `CTRL/CMD + K`, you can also open the corresponding window, which generates content based on the context of your selection:
Selected Content Generation
3. `CTRL/CMD + I' opens Composer.
Using `CTRL/CMD + I` you can open a special feature of Cursor: Composer, a special feature of Cursor that allows you to make changes to several files at the same time in one dialog window.
To use Composer, you first need to turn it on in the Cursor settings, and you need to access its settings page in this order: `File > Prefereces > Cursor Settings > Features > Enable Composer`.
Figure source original, Composer setup
The `Composer`, opened with `CTRL + I`, is a small, drag-and-drop interface:
Composer's small panel interface
You can enter a step-by-step, complex modification involving multiple files, and Composer will generate all the modifications for the files involved at the same time. In general, however, Composer should be used to open its full interface via the button in the upper-right corner of the small-panel interface:
Open the full interface of Composer
It will list clearly on the left where in your cumulative dialog you want to modify those files, and you can apply the relevant changes directly.
This is by far the best way I've experienced **AI-assisted programming**: you can naturally keep describing your needs in natural language within a single window, without having to switch between multiple windows and files. I feel like Cursor is the best form of interaction that has been explored.
`@` notation for convenient contextual information
In order to make it easier to provide contextual information to a large language model, Cursor has built in different `@` annotations, which make it easy to inject different types of contextual information into your dialogs.
Some of the `@` notes are generic and can be used in all dialog windows; some are specific and I'll make additional notes as I mention them.
Note: Github Copilot actually has a similar feature, but it's not as complete as Cursor.
1. `@Files` note, passing the context of the specified code files
When you enter the `@Files` note in the dialog box, Cursor automatically pops up a search list of your code repositories. You can type in the names of the files you want to import into the context and press the confirm button, and the contents of the corresponding files will be automatically injected into the context at that time:
`@Files` note
2. `@Code` notation, passing the context of the specified code block
`Code` notes provide more precise code snippets, `@` notes are used in much the same way, will pop up the corresponding search box, you enter the keyword in the index list to select the appropriate code block can be.
The identification of code blocks is determined by the LSP of your development environment, which is accurate in most cases:
`@Code` notes
3. `@Docs` note to get the context from the official documentation of the function or library
The `@Docs` note can get the context from the official documentation of a function or library. Currently, it can only get context from accessible online documentation. So, your own JSDoc-like documentation is useless unless you can get an online address for it ~ I personally don't think this feature is very generalized.
The `@Docs` note is usually used when you need to import documents manually
4. `@Web` notation to obtain context from search engine search content
`@Web` note is similar to a method, it will default to your question first to the search engine search, and then from the search results of the context of the extraction fed to the LLM. but because the Cursor official did not publicize the transparency of the specific implementation of the method, it is not adjusted, in fact, the results of the use of the fluctuation of good and bad.
If you have a problem and want to be lazy and not open the page to search for errors or the big model's own answer can not solve the problem, you can just use this note.
5. `@Folders` note, context for passing file directory information
The `@Folders` note can provide information about file directories, so if you run into any path problems, consider using this note to look to the larger model for a solution.
`@Folders` note
6. `@Chat` notation, a notation that can only be used in the code generation window within a file.
The `@Chat` note, which can only be used in the code generation window within a file (the one opened by `CTRL + K`), passes the contents of the dialog in the dialog window open on your right as context to the larger model.
`@Chat` notes
7. `@Definitions` note, a note that can only be used in the code generation window within a file.
Like the `@Chat` note, the `@Definitions` note can only be used in the code generation window within a file. It passes the definitions of the variables and types involved in the line of code you cursor over to the larger model as context, similar to the `@Code` note.
`@Definitions` note
8. `@Git` note, can only be used in dialog windows
Dialog windows are the dialog windows opened by `CTRL + L` and `CTRL + I`. The `@Git` note can pass the commit history of your current Git repository to the big model as context.
It feels better suited for use when checking war criminal clearances during code collaboration.
8. `@Codebase` note, available only in dialog windows, for scanning the appropriate files to be passed in the codebase
The `Codebase` note isn't really very useful; rather than sweeping the codebase, it's more of a contextual pass from the codebase to find the file you want, i.e. `CodebaseFilter`.
I have a feeling that it won't be used in normal development because it has to pass filter conditions to set filter parameters:
The `@Codebase` note requires you to pass information on quantities, models used in filtering/sorting, etc.
The difference between it and the `CTRL + enter` shortcut is presumably that you can customize the filtering rules for the query. But I don't think it's very useful.
ultimate
If you can afford it, try using Cursor, it's a really good experience (even if you don't have it). Don't look at my transcript and think I'm not saying much, just use it and you'll have a great experience. The development experience is really good.
This piece is said to be a re-translation, but it seems to be basically me writing down my own experience of using it ~ so if you go to the original article, you'll probably find that there's no content here to match it.
I'm a little torn on whether or not to change the categorization of this article. Mainly because I was inspired to write my own simple tutorial on how to use it after seeing the original article, but the structure of this article is really influenced by the original article. Alas, I'm torn.
