Cursor Tutorial 1 - Using the Tab Feature

What is the simplest and most direct form of AI-assisted programming? Why do different AI editors implement the Tab feature, yet the experience varies so much? What capabilities does Cursor's Tab feature offer?

By 鸟飞鱼跃 | Original Article

Cursor offers three main features for AI-assisted programming:

1. Tab feature
2. Prompt box (Cmd + K)
3. Chat function (Cmd + L)

In this tutorial, we'll focus on the Tab feature, which best demonstrates Cursor's magic to users.

Why do different AI editors implement the Tab feature, yet the experience varies so much? What capabilities does Cursor's Tab feature offer?

What is the Tab Feature?

What's the simplest and most direct form of AI-assisted programming? It's the automatic generation of code completion suggestions based on the current code context, allowing users to modify and complete code with just a Tab key.

I can't think of a simpler or more direct way to assist programming. Users don't need to describe any requirements; AI provides suggestions directly. This is the most natural and straightforward assistance method.

Cursor's Tab feature is precisely such a programming aid. Compared to GitHub Copilot and MarsCode, Cursor's strongest advantage lies in its code editing capability. It can not only insert code but also modify existing code, which Cursor emphasizes repeatedly in its official documentation:

You can also find a more detailed comparison in the previous article Why Abandon Github Copilot?.

Basic Tab Features

Multi-line Completion

The most basic function is code generation, which directly generates code completion suggestions based on the current cursor position. As shown below:

In this example, you might have only entered the function definition and the first line, but Cursor's Tab feature can intelligently complete the remaining code.

But Cursor's Tab feature isn't limited to this. It also supports multi-line editing, directly generating multi-line code completion suggestions. As shown below:

The Tab feature will generate multi-line code completion suggestions based on your current cursor modifications. In the above example, after you input "Block", it suggests completing similar parts with "Block" as well.

Note that in the above examples, Tab displays the suggested completion code in gray.

Advanced Tab Features

Smart Rewrite

Cursor's Tab feature isn't just simple code completion. It can intelligently rewrite your existing code. This is Cursor's most proud "code editing" feature. Whether it's small changes or major refactoring, this feature can be incredibly useful.

When rewriting (or modifying) code, Cursor's code modification suggestions appear in a prompt box, rather than as gray code suggestions like in code completion.

Cursor Prediction

The features introduced above are all based on the current cursor position, combined with the code context, to provide completion or modification suggestions.

Going a step further, Cursor can even predict where you might want to edit next. This powerful feature is called "cursor prediction". (I think I now understand why Cursor is called Cursor)

In the above example, we can see that when you modify a function name, Cursor predicts that the function name in the red circle below should also change accordingly.

Similarly, in this example, when you change the variable name "updates" to "updatesToServer", Cursor predicts that the "updates" variable below should also be updated to "updatesToServer".

Tips

Tab in Peek

Cursor's Tab feature isn't limited to the main editing window; it can also be used in the preview window of "Go to Definition" or "Go to Type Definition". This feature is particularly useful when adding new function parameters.

For example, when you need to modify a function definition and then quickly fix all places using that function, this feature is very convenient. Especially for vim users, you can combine it with the gd command to first modify the function definition and then quickly fix all call sites.

In the above example, we can see that the user uses the Tab feature in the preview window to modify the function definition and add a new parameter.

This feature can significantly improve code refactoring efficiency, making it easier and faster to add new features or modify existing interfaces.

Partial Accepts

You can accept the next word in the suggestion by pressing Ctrl/⌘ and the right arrow. This allows you to control the code completion process more precisely.

Future Development of Tab Feature

From the user experience perspective, there's room for improvement in the context referencing of the Tab feature. For example, when you modify code from another file and return to the current file, the Tab feature's suggestions may have a higher error rate.

According to Cursor's blog post Next Action Prediction, the Tab feature will soon support cross-file code generation suggestions, going beyond just suggestions based on the current file. This means Cursor will better understand the project context and provide more accurate and useful code suggestions.

Conclusion

In summary, Cursor's Tab feature is a powerful and intuitive AI-assisted programming tool. By now, you should have a good understanding of it through this tutorial.

But Cursor's power isn't as simple as it seems. It took deep research to discover that Cursor's team has done a lot of optimization and improvement work.

Cursor's Tab feature uses a self-researched model, and in Cursor's blog, it mentions various methods for training the model and optimization details. Interested readers can check it out.