Being productive in VS Code can help you focus on just your code or can speed up some repetitive tasks you are doing. To start being productive all you need is to learn a few keyboard shortcuts and install a few extensions.
So here are some VS Code tips that help me every day.
Note: This was written for Macs and I would love some help translating this post to work with Windows
Here is a video version if that's more your speed:
This was also posted on our blog
VSCode has a CLI to open VS Code directly from your terminal.
Install it with these simple steps:
- Launch VS Code
- Open the Command Palette (
shift+cmd+p) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.
- Restart the terminal for the new \$PATH value to take effect. You'll be able to type 'code .' in any folder to start editing files in that folder.
VS Code has an integrated terminal you can open and start using directly in VS Code. If you didn't know, now you know 💁♀️. And you have to start using it.
It works exactly like your current terminal and you can open it like this:
- Use the ⌃` keyboard shortcut with the backtick character.
- Use the View > Terminal menu command.
- From the Command Palette (
shift+cmd+p), use the View: Toggle Integrated Terminal command.
Naming is the hardest and most important part of programming. That's just how it is, I don't make the rules.
You are going to be renaming a lot while building your Twitter competitor. So let's make that much easier.
To rename a symbol (in some languages even across multiple files) press
F2 after selecting the symbol you would like to rename. Then type away and you just saved yourself 100s of hours (over the course of many many years, of course).
Now here is the tip that will change your life. Write this down, bookmark it, remember this, or whatever. This is just the best tip and you'll use it all the time.
Multiple-cursors can be added and operate independently based on the context it sits in.
So there are a few ways you can add multiple-cursors.
alt+click which will add a new cursor on every click.
alt+cmd+up that will insert cursors below or above respectively.
cmd+d selects the word at the cursor or the next occurrence of the current selection adding a cursor at each word.
shift+cmd+l will select each occurrence of the currently selected text adding a cursor to each selection.
You can also check out the Multi Line tricks extension which will allow you to add a cursor at the end of each selected line with
VS Code's command palette makes VS Code completely accessible using only the keyboard. Typing
shift+cmd+P will bring up the Command Palette allowing you to access all of the functionality of VS Code.
Here are a few shortcuts for the most useful commands:
cmd+Pwill let you navigate to any file or symbol by typing its name
ctrl+tabwill cycle you through the last set of files opened
shift+cmd+Pwill bring you directly to the editor commands
shift+cmd+Owill let you navigate to a specific symbol in a file
alt+Gwill let you navigate to a specific line in a file
The user interface is broken up into 5 parts:
- Editor - The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
- Side Bar - Contains different views like the Explorer to assist you while working on your project.
- Status Bar - Information about the opened project and the files you edit.
- Activity Bar - 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.
- Panels - 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.
Here are some shortcuts to help you navigate the UI:
shift+ctrl+GSource Control (A)
cmd+shift+DRun Panel (A)
cmd+shift+XExtension Panel (A)
cmd+bToggle Side Bar visibility (B)
ctrl+cmd+wToggle Tab visibility (C)
cmd+jToggle open bottom panel (D) with Terminal, Problems, Output, Debug Console
There are a ton of keyboard shortcuts available in VS Code. We'll go over some general shortcuts now and more detailed tips for each feature.
alt+ZToggle word wrap. If you have long lines in your file and need to see everything without formatting each line.
cmd+FSearch in the current file
alt+shift+rightMake selection by word
cmd+DFinds and selects the next match for the currently selected word.
cmd+upMove cursor to end/beginning of the current file
cmd+rightMove cursor to end/beginning of current line
alt+rightMove cursor by word
ctrl+shift+-Go back and Go forward. This is across files and selections. So if you move files you can go back forward. If you go to the bottom of a file and make a selection you can Go back to your previous selection.
shift+ctrl+cmd+rightExpand or shrink block selection. This is useful for selecting a component, function, HTML element, etc.
cmd+clickJump to definition
cmd+XWhen not selecting text will cut the current line
cmd+shift+KDelete current line
shift+upMove a selection up or down.
alt+upMove a line up or down.
shift+alt+upCopy line or selection and paste below or above line or selection.