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!
Explorer: Explorer allows you to browse and manage files and folders your current workspace/folder. Windows:
Ctrl+Shift+F: Search current files open for a specific string. Also allowing you the option for “Find and Replace”.
Ctrl+Shift+G: Integration 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).
Ctrl+Shift+D: Displays 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).
Switch between them by using – Windows:
Cmd along with the # key
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.
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.
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
Allows quick keyboard accessibility for even quicker access to VS Code functionality and commands.
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.