VS Code is a feature rich piece of software and we will barely scratch the surface of what it can do. They have excellent documentation, if you find time and are curious to explore check out their Getting Started guide. You can find all sorts of good stuff looking through there.
The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.
Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
Contains different views like the File Explorer to assist you while working on your project.
Located along the bottom of the editor, it contains information about the opened project and the files you edit.
Before we start talking about any settings it is important to understand that VS Code uses two different sets of settings. There are the user settings which apply all the projects that you open with VS Code and then there are the Workspace Settings which only apply to a single project. Those settings will be stored in the root folder of your project in a folder called .vscode. These workspace settings take precedent over any conflicting user settings.
VS Code has a plethora of settings but they make it very easy to access, change and search those settings. The settings can be accessed multiple ways my preferred method is using the command pallette (⇧⌘P) then just typing 'settings'.
Note that this will also give you an option to open the JSON settings file if you prefer not to use the GUI VS Code provides
VS Code has a ton of built in keyboard shortcuts to make you work faster. I highly recommend you download the shortcut cheatsheet and if you can print it and place it somewhere that you can easily reference it while working.
You can always access these from VS code from the help menu. Help > Keyboard Shortcut Reference (⌘K ⌘R)
Try out lots of helpful features in the interactive playground accessible when you open a new blank window.
| Shortcut | Command |
|---|---|
| ⇧⌘P | Show command Palette |
| ⌘P | Quick Open files |
| Shortcut | Command |
|---|---|
| ⌥↑ / ⌥↓ | Move line up/down |
| ⇧⌥↑ / ⇧⌥ ↓ | Copy line up/down |
| ⌘K | Delete line |
| ⌘] / ⌘[ | Indent/Outdent line |
| Home (fn←) | Move cursor to start of line |
| End (fn→) | Move cursor to end of line |
| ⌘/ | Toggle line comment |
| ⇧⌥A | Toggle block comment |
| Shortcut | Command |
|---|---|
| ⌥ + Left Click | Insert cursor new cursor at click |
| ⌘⌥↑ / ⌘⌥↓ | Insert cursor above/below |
| ⇧⌘I | Insert cursor at end of each selected line |
| ⇧⌘L | Select all occurrences of current selection |
| ⌘D | Select current word |
| ^⇧⌘→ / ^⇧⌘← | Expand / Shrink selection |
| Shortcut | Command |
|---|---|
| ⌘F | Find |
| ⌥⌘F | Replace |
| ⇧⌘F | Find in file |
| Shortcut | Command |
|---|---|
| F2 | Rename Symbol |
| ⌥F12 | Peek definition |
| ⇧⌥F | Format document |
| ⌘K ⌘F | Format selection |
| Shortcut | Command |
|---|---|
| ^TAB / ^⇧TAB | Cycle through tab history |
| ^- / ^⇧- | Go back/forward through tabs |
| Shortcut | Command |
|---|---|
| ⌘ \ | | Split Editor |
| ⌘1,⌘2, ⌘... | Focus in to editor # |
| ⌘W | Close editor |
| ⌘K ⌘W | Close all |
| Shortcut | Command |
|---|---|
| ⌘S | Save |
| ⌥⌘S | Save All |
| Shortcut | Command |
|---|---|
| ⌘= / ⌘- | Zoom in/out |
| ⌘B | Toggle sidebar visibility |
| ⇧⌘E | Show file explorer |
| ⇧⌘V | Open Markdown preview |
| ⌘K ⌘V | Open Markdown preview to the side |
| Shortcut | Command |
|---|---|
| ^` | Open integrated terminal |
| ^⇧` | New terminal |
- https://code.visualstudio.com/docs/getstarted/themes
- https://code.visualstudio.com/docs/introvideos/configure
- VS Code Getting Started Guide
- VS Code Can Do That? Tips and tricks for VS Code
- VS Code Tips and Tricks Tips and tricks from the docs
- Super secret VS Code hacks to boost your productivity Tips and tricks from a FreeCodeCamp article
- Keyboard Shortcut Cheat-sheets
You can always access these from VS code from the help menu. Help > Keyboard Shortcut Reference (⌘K ⌘R)
