Visual Studio Code
code .
Open the current directory in VS Code
Keyboard
command
corresponds toCtrl
on Windows/Linux and⌘
on macOS
File Navigation
command + up
Move to start of filecommand + down
Move to end of fileoption + up
Move to start of paragraphoption + down
Move to end of paragraph
Line Navigation
command + enter
Move to next linecommand + shift + enter
Move to previous linecommand + left
Move to start of linecommand + right
Move to end of line
Word Navigation
option + left
Move to start of wordoption + right
Move to end of word
Deleting
option + delete
Delete single wordcommand + delete
Delete line
Highlighting a Word
command + d
Select next occurrencecommand + shift + l
Select all occurrences
Editor
command + p
search for files in directoryshift + command + p
search actionscommand + f
search for word in fileopen -a ‘Google Chrome’ websiteAddress
open 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 (opens in a new tab) game for learning VSCode shortcuts
- VS Code Emmet User Guide (opens in a new tab)
- Emmet Cheatsheet (opens in a new tab)