Here are some neat tricks and shortcuts for working with HTML, CSS, and general productivity in VS Code:
## Emmet Abbreviations (HTML & CSS)
div*5 → Creates 5 divs.
ul>li*3 → Creates a list with 3 items.
.class → Creates <div class="class"></div>
[href=“https://example.com”]{Visit} → Creates a link.
img:src → Creates an <img src=""> tag.
table>tr*2>td*3 → Creates a table with 2 rows, 3 columns.
## Multi-Cursor Editing
Cmd+D → Select next occurrence of word.
Cmd+Shift+L → Select all occurrences of word.
Cmd+Option+Down/Up → Add cursors to multiple lines.
## Quick File Navigation
Cmd+Shift+O → Go to symbol in file (e.g., functions, classes).
Cmd+P → Quick open files by name.
Command Palette
Cmd+Shift+P → Access all commands.
## Formatting
Option+Shift+F → Format document.
## Commenting
Cmd+/ → Toggle line comment.
Option+Cmd+/ → Toggle block comment.
## Duplicate Line
Shift+Option+Down/Up → Duplicate line.
## Move Line
Option+Up/Down → Move line up/down.
## Wrapping with Tag (Emmet)
Select text, type div and press Cmd+Shift+A to wrap selection in a <div>
## Rename Symbol
F2 → Rename variable, class, etc.
## Extensions for Productivity