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

vscode-screenshot-1.png

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. 

Editor

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).

vscode-threeeditors
Photo taken from code.visualstudio.com

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. 

Tabs

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

vscode-tabs.png
Photo taken from code.visualstudio.com

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

vscode-statusbar.PNG

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  >

vscode-commandpalette.png

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.

 Minimap

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.  

vscode-minimap

 

 

 

 

 

 

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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