An editor you can actually drive
What each pane of VS Code or Cursor is for, and the five shortcuts worth learning in your first week.
Wait, you have not downloaded an editor yet?
Open files and move around a project
Folders, tabs, search and file history live here.
Write and edit code
This is where you actually work line by line.
Use AI tools when helpful
Inside VS Code itself you can use AI tools too, alongside extensions and terminal-based assistants.
terminal
$ npm run dev
$ claude
VS Code
Most flexible starting point
An editor is the place where you write, read, edit and organise code. VS Code is a popular code editor used by developers across languages and frameworks.
important
You can add AI tools inside VS Code too. Use extensions or terminal-based assistants without leaving the editor.
An editor is the workspace where learners open files, edit code and run commands. AI tools can sit inside that workspace too, especially inside VS Code, so the editor stays the home base.
Your editor is where you will spend most of the next nine phases. Click the numbered hotspots below to see what each part does. Most beginners use only a small part of the editor for months.
Activity bar
- What it is
- The strip of icons down the far left. Each icon changes what the sidebar next to it shows: your files, a search across the whole project, source control, extensions.
- Do this first
- Leave it on the top icon, the two sheets of paper. That is your files, and it is the only one you need this week.
The thin strip along the very bottom is the status bar. The branch you are on sits at the left and the number of errors sits next to it. Glance at it, do not click it.
Click this panel (or tab into it) to start. Nothing is captured until you do.
- ⌘⇧PCommand paletteEvery command the editor has, searchable by name. If you can describe it, you do not need to find the menu.Firefox keeps this one for private browsing. If your window goes odd, that is Firefox, not you.
- ⌘PGo to fileType three letters of a filename and you are in it. This is how people with 400-file projects never open the sidebar.Normally your browser print dialog, held back while this panel has focus, and only while it does.
- ⌥⌘↓Cursor on the line belowor hold ⌥ and click anywhereTwo cursors, one edit. Renaming the same thing on six lines stops being six edits.
- ⌘/Comment the line outThe fastest way to answer "is this line the problem": switch it off, reload, switch it back.
- F12Go to definitionor ⌘ and click the nameJumps from a name to the place it was created. This is how you read a codebase you did not write.⚑ Cannot be tested here: F12 opens your browser developer tools before this page ever sees the key.
Four of these five you just pressed for real. The fifth, go to definition, your browser takes before this page can see it, which is itself the lesson: a shortcut belongs to whichever window is listening.
Then train the shortcuts. Press the real key combinations on the cards; they tick when you get them right. Five is the correct number to learn at once.
Two settings are worth turning on before you write anything else. Format on save, so whitespace never becomes an argument with yourself. And a linter, so a missing bracket is a red squiggle rather than a twenty-minute mystery.
One habit to start now is go-to-definition. Being able to jump into a function you did not write makes a large unfamiliar codebase much easier to navigate. From Phase 04 onwards, you will be reading far more code than you write.
You should now be able to
- Name what each region of the editor does
- Use the command palette and quick-open without thinking
Loading…