Navigating VS Code

New to Visual Studio Code? It’s look and feel is pretty similar to most editors and IDEs. But let’s take a bit to become familiar with it. I will quickly introduce you to the fundamentals: the Activity Bar, the Editor, Tabs, the Status Bar, the Command Palette, and the Minimap. All in under 3 minutes!

Activity bar


Explorer: Explorer allows you to browse and manage files and folders your current workspace/folder. Windows: Ctrl+Shift+E Mac:Cmd+Shift+E

 Search Ctrl+Shift+FSearch current files open for a specific string. Also allowing you the option for “Find and Replace”.

Source control Ctrl+Shift+GIntegration with your version control system – namely Git! Which actually comes built in. You have the ability to initialize the current workspace/folder and/or perform version control functions like commit, pull, etc. (p.s. must be already installed on your local machine).

Debugger Ctrl+Shift+DDisplays useful debugging information like call stacks, variables, and breakpoints. 


The main area! You can open up to 3 editors side by side in one single instance of VS Code. You can have multiple tabs within each (a.k.a open multiple files).

Photo taken from

Switch between them by using – Windows: Ctrl Mac:Cmd along with the # key 12,  3 

Re-arrange the editors by drag and dropping along the top bar. 


When you open a file in VS Code, it’ll open a new tab in the current editor.

Photo taken from

By default, tabs are added to the right, but you can te-arrange tabs the same way you would editors, by drag and dropping the filename header located at the top.

Status bar


The status bar gives you info about the project, or in particular the file, you currently have open.

Right side: The current line you are on, the indentation setting, the encoding, EOL sequence, and the language mode.

Left side: If you have Git setup, you will be able to see things like what branch you currently have checked out. Along with any errors and warnings.  (p.s. toggle this visibility by using Ctrl+B)

Command Palette

Allows quick keyboard accessibility for even quicker access to VS Code functionality and commands.  Ctrl+Shift+P or  Ctrl+P with  >


What you’ll find in the palette will diff based on the extensions you installed. Therefore, the more you install the more functionality you’ll have access to. Depending on where you are in your code, you can find out what you can execute by typing ? into the cmd palette. It’ll pop back to you a list of available commands.


Located on the right side of the editor. Click or drag the shaded area to navigate to that section of the code. The minimap gives you a nice overview of the file you have open.  








And that’s it for navigating VS Code! Let me know in the comments if there is anything you think I missed.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s