Useful VS Code shortcuts
I want to share with you some practical VS Code shortcuts I use all the time that will help you improve your productivity. In the following link, you can find more tips and tricks for VS Code.
- Smart select
- Move to start/end of a bracket.
- Undo cursor position
- Select next/previous occurrence
- Select all occurrences
- Vertical selection
- Delete a line
Better see first what smart select does:
Really useful when you want to select large blocks of code. In the example above, I select all the render code inside a component. You place your cursor at the code you want to select, and then you press
Shift + Alt + RightArrow to gradually expand the selection. If you messed it up and selected more than you wanted, press
Shift + Alt + LeftArrow—or just
LeftArrow since you are already holding
Shift + Alt—to shrink the selection.
Smart Select doesn’t work well with JSX tags. By that I mean it doesn’t gradually select the parent tags but instead selects all the content inside the render method at once. For that reason, I use the Very Smart Select extension.
You probably know that you can undo recent changes with
Ctrl + Z. But what if you went too far and discarded some changes that you wanted? Press
Ctrl + Y to redo the changes. This combination doesn’t seem that impressive at first, but it’s proved to be really useful.
Are you at the top bracket of a long function, and you want to navigate fast to the bottom? Break the function into smaller functions because it probably does more than it should (lol), or press
Ctrl + Shift + \ to toggle between the top and bottom brackets.
If you toggled between the top/bottom brackets, and you ended up somewhere you didn’t expect, hold
Ctrl + U to return to the previous cursor position.
Select some text and then press
Ctrl + D to select the next occurrence.
Really useful if you want to rename a div to p or remove some double-quotes for example. The shortcut to select the previous occurrence is not enabled by default, and it’s called “Add Selection To Previous Find Match.” I configured mine to
Ctrl + Shift + D.
Select some text and then press
Ctrl + Shift + L to select all occurrences. Useful when you want to rename a component. I changed this shortcut to
Ctrl + Shift + A because I find it more intuitive. Also, if you want to avoid editing something accidentally, when you select the text, and before you press
Ctrl + Shift + L, press
Ctrl + F instead and check how many times the text is present in the search pop up. If that doesn’t help, you can also press
F3 to cycle through the occurrences to make sure you won’t overwrite something by accident.
You probably know that you can open and close the terminal if you press
Ctrl + `. This shortcut is called: “View: Toggle Integrated Terminal.” But there’s another shortcut that’s called: “View: Focus Active Editor Group.” If you configure the latter to the same keybinding—that is
Ctrl + `—and you specify a when clause with a value of terminalFocus, you can then switch the focus between the terminal and the active editor. To add a when clause, right-click the setting and select: “change when expression.”
You can jump to the next terminal with
Alt + Up/Down Arrow if the terminal has focus, and you can split it with
Ctrl + Shift + 5. Finally, to kill the active terminal, you need to configure the “Terminal: Kill the Active Terminal Instance” shortcut. I’ve configured mine to
Ctrl + Shift + 6.
The ability to vertically select text is one of the reasons I don’t use Vim. I know, I know, you can probably do this in Vim too but is not advertised that much, so I don’t know how to do it.
You can vertically select text with
Ctrl + Alt + Down/Up Arrow. If you mess up the selection, press
Escape and try again.
One use case that comes to mind is to copy a component’s props—in other words, the function parameters—and paste them where you want to render the component. Check the following gif for an example:
Copy the props with vertical select:
Paste the selection in the render method. I’m also selecting the previous occurrence to replace comma
You can do this in many ways:
- You can move the cursor to the line and press
Ctrl + Shift + K.
- You can cut the text with
Ctrl + X.
- You can select the line with
Ctrl + Land press
Hometo go at the beginning of the line, press
Shift + Endto select the line, and finally press
Deleteto delete it.
Other things to read
- Reveal animations on scroll with react-spring
- Gatsby background image example
- Extremely fast loading with Gatsby and self-hosted fonts