Work like a pro
A few habits separate a tidy, fast workflow from a frustrating one. Build these in early.
Open the folder, not files
Use File › Open Folder and work from the whole project. The Explorer, search, and relative paths all depend on it.
Save & format on save
Turn on auto-save and format-on-save (with Prettier) so your code stays consistent without thinking about it.
Use the built-in terminal
Open it with Ctrl ` — run Git, npm, and scripts without leaving the editor.
Preview with Live Server
Right-click your HTML › Open with Live Server for an auto-refreshing preview as you edit.
Search across the project
Ctrl Shift F searches every file at once — far faster than hunting by hand.
Commit early, commit often
Use the Source Control panel to stage and commit small changes. Future-you will thank present-you.
index.html at the project root, group assets in images/, css/, js/, and use lowercase, hyphenated file names (about-us.html, not About Us.html).Shortcuts worth memorizing
The handful that save the most time. (Mac uses Cmd where Windows uses Ctrl.)
| Action | Windows / Linux | Mac |
|---|---|---|
| Command Palette | Ctrl Shift P | Cmd Shift P |
| Quick-open a file | Ctrl P | Cmd P |
| Toggle terminal | Ctrl ` | Ctrl ` |
| Comment / uncomment line | Ctrl / | Cmd / |
| Format document | Shift Alt F | Shift Option F |
| Select next match (multi-cursor) | Ctrl D | Cmd D |
| Move line up / down | Alt ↑ / ↓ | Option ↑ / ↓ |
| Copy line up / down | Shift Alt ↑ / ↓ | Shift Option ↑ / ↓ |
| Find in this file | Ctrl F | Cmd F |
| Find across all files | Ctrl Shift F | Cmd Shift F |
| Rename symbol everywhere | F2 | F2 |
| Save all | Ctrl K S | Cmd Option S |
Make it yours
Open settings with Ctrl ,. For precise control, open settings.json from the Command Palette (“Preferences: Open User Settings (JSON)”) and paste a starting point like this:
settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.fontSize": 14,
"files.autoSave": "afterDelay",
"files.trimTrailingWhitespace": true,
"emmet.triggerExpansionOnTab": true,
"workbench.colorTheme": "Default Dark Modern"
}
Handy customizations
- Themes: Ctrl K then Ctrl T to browse color themes.
- Emmet: type
!then Tab in an HTML file for instant boilerplate;div.card+ Tab expands to<div class="card"></div>. - Word wrap keeps long lines visible without horizontal scrolling.
- Format on save + Prettier means you never hand-align code again.
.vscode/settings.json in a project to share formatting rules with teammates (or your future self).Keep going
New to the editor? Start with VS Code Setup to install and configure it. Then drill the Keyboard Shortcuts, and when you're ready to publish, see GitHub and Netlify Deploy.