Lesson 4: VS Code Like a Pro

Most people use maybe 5% of what their editor can do. A handful of shortcuts and extensions can save hours every week — this lesson is the shortest in the course, and arguably the highest return on time invested.

The command palette: your shortcut to everything

Ctrl+Shift+P  (Windows/Linux)
Cmd+Shift+P   (Mac)

This opens a searchable list of literally every command VS Code has. Forgot a shortcut? Open the command palette and type what you want to do in plain words — it'll find the command and show you its keyboard shortcut, too.

Shortcuts worth memorizing first

Shortcut	Does
`Ctrl/Cmd + P`	Quick-open any file by typing its name
Ctrl/Cmd + `	Toggle the integrated terminal open/closed
`Ctrl/Cmd + /`	Comment out the current line
`Alt/Option + ↑↓`	Move the current line up or down
`Ctrl/Cmd + D`	Select the next occurrence of the current word (multi-edit)
`Ctrl/Cmd + Shift + K`	Delete the current line entirely

quick tip

Ctrl/Cmd + D repeated multiple times selects every matching occurrence of a word at once, so you can rename all of them simultaneously by just typing. This alone replaces a huge amount of manual find-and-replace.

The integrated terminal: no more switching windows

Press Ctrl/Cmd + \` and a terminal opens right inside VS Code, already pointed at your project folder — every command from Lesson 1 works exactly the same here, without alt-tabbing to a separate app.

Extensions worth installing on day one

Extension	Why
Prettier	Auto-formats your code consistently — stop manually fixing indentation
ESLint	Catches likely bugs and style issues as you type JavaScript
Live Server	Opens your HTML in the browser with auto-refresh on save — exactly what you used for the HTML & CSS course
GitLens	Shows who changed each line and when, right inside the editor

Install extensions from the Extensions icon in the left sidebar (or Ctrl/Cmd+Shift+X) — search the name, click Install, done.

Multi-cursor editing

Alt/Option + Click
# adds an extra cursor wherever you click — type once, edit in multiple places at once

This is one of those features that feels unnecessary until the first time you need to add the same small change to five different lines — then it becomes indispensable.

Try it yourself

exercise

Open any project. Practice Ctrl/Cmd+P to jump between files without touching your mouse, and Ctrl/Cmd+\` to toggle the terminal. Do this for a few minutes until it feels automatic — muscle memory is the actual goal here.

Level up: install your first extensions

exercise 2

Install Prettier and Live Server. Open one of your HTML files from earlier lessons, right-click it, and choose "Open with Live Server" — your page opens in the browser and refreshes automatically every time you save.

✓ quick check — 3 questions

1. What does the Command Palette let you do?

Change your theme colors only Search and run any VS Code command Install extensions only

2. Which extension auto-refreshes your browser when you save HTML?

ESLint GitLens Live Server

3. What does Alt/Option + Click do?

Adds an extra cursor for multi-editing Deletes the current file Opens the terminal

what's next

Lesson 5 covers package managers — npm, that giant node_modules folder, and how to safely install code other people wrote instead of writing everything from scratch.

bottom line

The Command Palette (Ctrl/Cmd+Shift+P) is your search bar for everything VS Code can do. A handful of shortcuts plus Prettier, ESLint, and Live Server cover most of what separates a fast workflow from a frustrating one.