Edit Code with AI Assistance
Now that you're comfortable in Cursor, let's learn the basics of editing code. You'll use the same tools as VS Code—but with AI magic behind the scenes.
Creating Your First File
Open a project folder
File → Open Folder, then select a project or create a new folder
Create a new file
In the left sidebar, right-click in the file explorer and select "New File"
Name it
Type a filename like "app.js" or "component.jsx". Cursor recognizes the file type by the extension.
Start typing
Start writing code. You'll see autocomplete suggestions appear.
Basic Editing Features (Just Like VS Code)
Cursor inherits all of VS Code's powerful editing features:
- **Multi-cursor editing**: Hold Alt and click to place multiple cursors, then type once and edit multiple lines at once
- **Find and Replace**: Cmd+F (Mac) or Ctrl+F (Windows) to find text, Cmd+H to find and replace
- **Select code blocks**: Click the icon next to a function/class to expand/collapse it
- **Split view**: Drag a tab to the right edge to see two files side-by-side
- **Multiple tabs**: Open as many files as you want. Click tabs to switch between them
- **Auto-save**: By default, files save automatically (look for the dot on the tab to see unsaved changes)
Git Integration (Version Control)
Cursor includes built-in Git support. Click the Git icon (branch symbol) in the left sidebar:
- See which files changed (Source Control panel)
- Stage files by clicking the + button
- Write a commit message
- Click the checkmark to commit
- Push or pull from the command palette (Cmd+P)
Git tracks changes to your code over time. Think of it like "save history" for programming. It's essential for collaboration and backup.
Extensions (Add-ons)
Cursor uses the same VS Code extensions. Popular ones for designers include:
- **Prettier**: Auto-formats your code to look clean
- **ESLint**: Catches code mistakes before they cause problems
- **Live Server**: Preview your code in a browser automatically
- **Thunder Client**: Test APIs without leaving the editor
- **Tailwind CSS IntelliSense**: Smart suggestions for Tailwind classes
To install extensions, click the Extensions icon (puzzle piece) on the left sidebar and search for what you need.
Editing Fundamentals Ready!
- You can create and edit files in Cursor
- You understand multi-cursor editing and find/replace
- You know how to use split view to see multiple files
- You're aware of Git for version control
- You can install extensions to customize your environment
Great! You now have the foundation to work with code. Next, we'll explore the AI features that make Cursor special.