DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for VSCode tips and tricks
Ivan Szebenszki
Ivan Szebenszki

Posted on

VSCode tips and tricks

From time to time I spend some time with playing tools I use everyday in order to be more productive. It's easy to keep using the features I already know, even though there is a better way. This week I played with VSCode, here is what I learned.

Shortcuts

Navigation

I usually used the touchpad or Cmd + P to select a file from the sidebar or navigate between open files, but using shortcuts made it much quicker. You can switch between the editor and the sidebar by pressing Cmd + Shift + E, then navigate by cursor key and open the selected file with Cmd + Down. To switch between open tab Ctrl + Tab or Ctrl + Shift + Tab can be used.

Insert line

I did not know that I can insert a new line below or above the current line by pressing Cmd + Enter and Cmd + Shift + Enter respectively. Usually I navigated to the end or beginning of the current line and pressed Enter, but it is much easier with these shortcuts.

Go to/peek definition

This is not new for me, but I put it here as it is very useful feature. If you press F12 VSCode jumps the definition of the symbol under the cursor. If you press Alt + F12 VSCode does not jumps there, but open the definition as an overlay, so you can have a quick look. It is worth to mention Cmd + Shift + O that opens a list of symbols, so you can jump to any of them very quickly.

Others

Ctrl + Shift + G Show Git
Ctrl + K, P Copy full path of the current file
Ctrl + K, W Close all open files
Ctrl + K, R Reveal current file in explorer
Cmd + Ctrl + Shift + Right Expand selection
Cmd + Ctrl + Shift + Left Shrink selection

Extensions

Overtype

I always missed overtype mode from VSCode, but finally found this extension. It shows the current mode in the status bar and by pressing Cmd + Shift + I you can switch to overtype mode and back.

TODO Highlight

I usually use TODO and FIXME tags in comments to mark what I have to do later, and just use VSCode 'Find in files' function to find these marks later. Of course there is a better way: TODO Highlight. It is a very simple, but very useful extension. By default it highlights TODO: and FIXME: in your code, but it is highly configurable: other tags can be added, files can be included or excluded. It also can give you a list of all tags in your project.

Thanks for reading it. Happy coding. ❀

Say hello.
LinkedIn | Github | Instagram

Top comments (2)

Collapse
 
vishalraj232 profile image
vishal kumar

nice one.

Collapse
 
rodriguesl3 profile image
Lucas Rodrigues

These commands are pretty useful. Good job.

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.