Useful VS Code shortcuts

Last update: 25 August, 2019

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.

Table of contents

Smart select

Better see first what smart select does:

smart select

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.

Undo/Redo

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.

Move to start/end of a bracket.

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.

top/bottom bracket navigation

Undo cursor position

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 next/previous occurrence

Select some text and then press Ctrl + D to select the next occurrence.

add next occurence into selection

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 all occurrences

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.

Terminals

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.

Vertical selection

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:

vertical select

Paste the selection in the render method. I’m also selecting the previous occurrence to replace comma , to ={""}:

paste vertical selection

Delete a line

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 + L and press Delete.
  • Press Home to go at the beginning of the line, press Shift + End to select the line, and finally press Delete to delete it.

Resources

Other things to read

Popular posts

Other notes