Tips for using Visual Studio Code editor/IDE.
Microsoft's collection of tips and tricks for VS Code.
Cheat Sheet [pdf]
| Shortcut Key | Action |
|---|---|
| Ctrl + Space | Display Intellisense hints. |
| Alt + ↑ / ↓ | Move current line up/down. |
| Shift + Alt + ↑ / ↓ | Copy current line up/down. |
| Ctrl + / | Toggle comment (line or selection). |
| Ctrl + Shift + \ | Jump to matching bracket. |
| Ctrl + ] / [ | Indent/outdent line. |
| Ctrl + B | Toggle sidebar display. |
| Ctrl + C | Copy current line (empty selected). |
| Ctrl + P | Quick search for recently opened files by name. |
| Ctrl + X | Cut current line (empty selection). |
| Ctrl + Shift + K | Delete line. |
| Ctrl + K + Z | Distraction-free ("Zen") mode toggle |
| Ctrl + \ | Side-by-side editing |
| Ctrl + K + V | Side-by-side Markdown editing with preview |
| Ctrl + K Ctrl + F | Format selected text/code |
| Shift + Alt + F | Format entire document/file |
| Ctrl + Shift + F / H | Find or replace in files (in side bar). |
| Ctrl + Shift + G | Source control (in side bar). |
| Ctrl + Shift + P | Open/display the command palette. |
Probably the best feature of VS Code is its fantastic configurability. To access the User settings.json file, which contains the VS Code configuration parameters, File → Preferences → Settings or Ctrl + ,. As the file name indicates, settings are stored as regular JSON key/value pairs. Here are some of the settings that I find most useful.
| Setting | Description |
|---|---|
"files.trimFinalNewlines": true |
Removes blank lines from end of files. |
"files.trimTrailingWhitespace": true |
Removes extra whitespace from ends of lines. |
"editor.renderWhitespace": "all" |
Displays all whitespace characters (tabs, spaces, new lines, etc.) on screen. |
"editor.cursorStyle": "block" |
Displays cursor as a block. |
"editor.cursorBlinking": "smooth" |
Flashes cursor smoothly. |
"editor.rulers": [80, 100, 120] |
Displays vertical line at columns 80, 100, and 120 to show visually length of code line. |
"workbench.editor.highlightModifiedTabs": true |
Adds highlight to top of tab of unsaved editors for easy identification. |
"editor.minimap.enabled": false |
Disables the editor minimap. |
"editor.matchBrackets": "near" |
Matches bracket pairs only in close proximity. |
"workbench.sideBar.location": "right" |
Moves the side bar to the right side of VS Code window. |
"window.title": "${dirty}${activeEditorLong}" |
Displays full path and file name of current editor in VS Code title bar. |
- Bracket Pair Colorizer
- GitHub Plus Theme
- Rainbow Indent - Shows indentation with a faint rainbow colored background to make them more readable.
- REST Client - Make HTTP and cURL requests directly from VS Code and view responses directly.
- VSCodeVim - Vim emulator for VSCode