VS Code Shortcuts to Navigate Your Editor Like Tarzan in The Jungle
Tags: vscode, shortcuts, coding
Published: 2023-05-28 18:06:59


No need for a long intro, it's pretty simple: make better programs by focusing on the program instead of the editor.

So whether it's instantly refactoring 50 different lines of code at the same time, finding issues, or changing your view by adding and closing panels, these VS Code shortcuts will help you with navigating your environment rapidly, and jumping around your code with ease.

You might also find my previous articles in this series useful:

- [Part 1](https://medium.com/r/?url=https%3A%2F%2Fbetterprogramming.pub%2Fvs-code-shortcuts-to-code-like-youre-playing-a-piano-e5db7b272d1)
- [Part 2](https://medium.com/r/?url=https%3A%2F%2Fitnext.io%2Fvs-code-shortcuts-to-code-like-youre-playing-a-piano-part-2-c27202ea7ea1)

## Add Cursor to All Matching

> Select and edit multiple instances of the same text simultaneously

Maybe this won't increase your code quality, but it'll definitely increase the amount of code you modify at a time, so no one will have the time to even review your code.

- Linux / Windows: `Ctrl + Shift + L`
- Mac: `Cmd + Shift + L`


![Editing multiple instances of the same text with multiple cursors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwwmbr6mx7ro99lgo3gl.png)


![Editing multiple instances of the same text with multiple cursors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fii23aftpttlmooyjmqp.gif)


## Next Issue In Project

> Instantly navigate to code marked with an issue across your project

VS Code is like your guardian angel. It constantly keeps watch over your spaghetti code and keeps a list of why you should've considered a different career. If you wanna make the voices go away quickly, try this shortcut!

- Linux / Windows / Mac: `F8`


![Finding next issue in project in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c2a819twcrlcls4g8hd.png)

![Finding next issue in project in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwmup0643uv6o1esf53u.gif)

## Next Issue In File

> Instantly navigate to code marked with an issue but only in the current file

The previous shortcut was great, but it turns out there are wayyy too many issues across your project to even begin to hope to fix them. Most of them are warnings either way so who cares? Why not just stick to the current file!

- Linux / Windows: `Alt + F8`
- Mac: `Opt + F8`


![Finding next issue in current file in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0ahdrm09yht8nt9qh51.png)

![Finding next issue in current file in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skinm33kmcmpyknclbm3.gif)


## Show Code Actions Menu

> Show code actions in context to the code your cursor is on

That little menu in VS Code can have so many wonderful refactoring options. It's there to make your life easier. Also, auto imports. Honestly, mostly auto imports.

- Linux / Windows: `Ctrl + Dot`
- Mac: `Cmd + Dot`


![Showing code actions menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk5oemyf2nz1h6yaeoaq.png)

![Showing code actions menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygqhu7o8uw9et3oyttcf.gif)

## Toggle Left Sidebar

> Show or hide the left (or primary) side bar

When your wide screen is not wide enough to see that 3000 character email validation regex, you can hide the side bar completely and see if that helps to understand it. Still no? Well it's a cool shortcut either way.

- Linux / Windows: `Ctrl + B`
- Mac: `Cmd + B`


![Toggling left sidebar in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olp8jnrt3xrpdervv8dq.png)

![Toggling left sidebar in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynryxgbfcet9hmlm9d27.gif)

## Toggle Right Panel

> Show or hide the right (secondary) side bar

Indeed, there is an entirely hidden section on the right. My mind was blown too when I first discovered this. Now you put your debugger there and see every single variable in your application at once!

- Linux / Windows: `Ctrl + Alt + B`
- Mac: `Cmd + Opt + B`


![Toggling right sidebar in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkvej9y9ynqzxml03boe.png)

![Toggling right sidebar in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bai6dy5q6uk212wv2pct.gif)


## Toggle File Explorer Panel

> Focus on the file explorer panel, then you can navigate with the arrow keys

This one really makes you regret the fact that you nested your components 10 levels deep, doesn't it? Well, at least the icons are pretty.

- Linux / Windows: `Ctrl + Shift + E`
- Mac: `Cmd + Shift + E`


![Toggling file explorer side menu in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydowgnvbe3cgh6rpo0a6.png)

![Toggling file explorer side menu in vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8fttw8b4jw20g2g43gq.gif)

## Find Symbol in File

> Use fuzzy search to list and find symbols like functions and variables (useful for finding a constructor quickly!)

Why answer the question of why you have 100 methods in your class? This will never come back to haunt you, at least, not now that you know this shortcut!

- Linux / Windows: `Ctrl + Shift + O`
- Mac: `Cmd + Shift + O`


![Listing symbols in current file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwe1asw4kplos1avrxz0.png)

![Listing symbols in current file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kncvant3hlo7bhtgrfbr.gif)

## Go to Definition of Highlighted Symbol

> Go to definition of the symbol under the cursor. Useful when you're working with unfamiliar code or libraries

Using an API from an npm package abandoned 3 years ago but still has 300 million weekly downloads? Sometimes you gotta get your hands dirty and dig in a bit.

- Linux / Windows / Mac: `F12`


![Going to definition of highlighted symbol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdiyhbgewsmzc2ruaxtd.png)

![Going to definition of highlighted symbol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ltgl8x5yxva4fyenln1.gif)

## Show Peek of Definition of Highlighted Symbol

> Show definition of the symbol under the cursor in a popup window

Got commitment issues? Sneak a peek at the party from a little window like a true introvert.

- Linux / Windows: `Ctrl + Shift + F12`
- Mac: `Cmd + Shift + F12`


![Show definition of highlighted symbol in popup window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uo8fq3pfu02thgeifm3.png)

![Show definition of highlighted symbol in popup window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y7vvgsl20v8emfigbxe.gif)

## Conclusion

With these shortcuts, you'll find yourself getting to the important bits of your code quicker, and with more control over them.

Check out my other articles for even more handy shortcuts:


- [Part 1](https://medium.com/r/?url=https%3A%2F%2Fbetterprogramming.pub%2Fvs-code-shortcuts-to-code-like-youre-playing-a-piano-e5db7b272d1)
- [Part 2](https://medium.com/r/?url=https%3A%2F%2Fitnext.io%2Fvs-code-shortcuts-to-code-like-youre-playing-a-piano-part-2-c27202ea7ea1)