Visual Studio Code
code . Open the current directory in VS Code
Keyboard
commandcorresponds toCtrlon Windows/Linux and⌘on macOS
File Navigation
command + upMove to start of filecommand + downMove to end of fileoption + upMove to start of paragraphoption + downMove to end of paragraph
Line Navigation
command + enterMove to next linecommand + shift + enterMove to previous linecommand + leftMove to start of linecommand + rightMove to end of line
Word Navigation
option + leftMove to start of wordoption + rightMove to end of word
Deleting
option + deleteDelete single wordcommand + deleteDelete line
Highlighting a Word
command + dSelect next occurrencecommand + shift + lSelect all occurrences
Editor
command + psearch for files in directoryshift + command + psearch actionscommand + fsearch for word in fileopen -a ‘Google Chrome’ websiteAddressopen file in browser
Emmet
Emmet is a built in system of abbreviations that make working with HTML faster and easier.
Syntax
- child
>parent>child - sibling
+sibling+sibling - class
.element.class
| Shortcut | HTML |
|---|---|
!html | Generates boilerplate |
nav.navbar | <nav class="navbar"></nav> |
.container | <div class="container"></div> |
button[type="submit"]{Submit} | <button type="submit">Submit</button> |
nav>a.nav-item$\*>a | |
ul>li\*3.class-${List item $} |
Resources
- Shortcuts Masters game for learning VSCode shortcuts
- VS Code Emmet User Guide
- Emmet Cheatsheet