Intro to Visual Studio Code for Beginners (VSCode like a Pro)
Visual Studio Code
Visual Studio Code (VSCode) is one of the best Code Editors/IDE that you can get your hands on nowadays for getting a stunning development experience provided by its simple and elegant design plus its rich features and performance compared to another Code Editors that share the same set of features.
VSCode is Written and built on Top of Github’s Electron Frameworks using Web Technologies, and the large set of extensions available for almost anything you want to get automated or help you throughout your Development Journey.
So if you are a beginner how wants to master working with Visual Studio Code from Scratch and get to know all its stunning features and composed layout so this guide is for you, consider watching the Video tutorial for a better explanation.
First, make sure to download and install VSCode for either (Windows, Mac or Linux).
Also, if you are looking for best extensions you can use as a Developer for VSCode you can take a look here.
Commands & ShortCuts
When working on a project of yours on VSCode you will need to execute a command from time to time or even search inside a file for a specific symbol or navigate between open editors very quickly all of those are being managed by VSCode either using Shortcuts for quick access or from the top menu, on the other hand, you can use the Command Palette to execute different available commands.
For accessing the command Palette you can use View Menu then command Palette or press (Ctrl + Shift + P).
Here are some basic commands for managing VSCode using the Command Palette:
Zoom: for increasing or decreasing the Editor/Font size.
Reload: allows you to reload the current working instance of the VSCod editor in case of any problem or awkward behavior.
Workspace Setting: to access and change current Editor Workspace settings (ex: change font size for current workspace only).
If you have extensions installed you can access and activate them through the commands palette.
Go to line: for going to a specific line number in a file.
And many other things you can do from the command palette you can take as your center of operations to take control of all the settings and actions across you Code Editor.
Let’s see now what are the shortcuts that you can use to quickly reach and action (for ex: find a keyword on a file)
Ctrl + F while a file is opened you will be able to search and/or replace a keyword on the currently open file.
Ctrl + P go to a file either opened or on your workspace you will get prompted for the file name, you will also see the list of the recently edited files.
Ctrl + Tab jump back and forth between current open files (files being edited) for ex: to quickly navigate between two files, if you hold Ctrl and press Tab you will see the list of files and be able to navigate through it.
Ctrl + G for quickly going to a specific line number on the current file.
Ctrl + Shift + / to automatically comment a selected block of code (/Commented Code inline or multiline/).
Ctrl + ` Open the Integrated terminal of VSCode
Ctrl + Shift + UpArrow/DownArrow to move a selected line/block of code up or down on your file.
There still plenty of other shortcuts but those are the most basic and what you will need 90% of the time while working on VSCode.
The Status Bar
The status bar gives you notification either from the editor itself or installed extensions either to warn you or notify for a specific action on the bill icon.
It shows info about the currently opened file (programming language or framework) and Current Cursor (Column, Row, and line), alongside that you will find extensions that use the status bar for ex: a Live Server extension that allows you to start a development server for testing your application.
VSCode Integrated Components
VSCode comes with a lot of cool and useful tools and components out of the box with full stability and compatibility.
File Browser: Fully featured and integrated file browser to browse for file and directories across your workspace and gives you the ability to manage the filesystem by either adding new files, deleting or renaming which makes it super useful when it comes to rapid development and project management.
Search: allows you to search across the whole workspace for either files or keywords and/or replace them with a specified text, you will also be able to exclude or include only a set of files and folder to run the search at for faster and simpler lookup.
Git Version Control: If your project is initialized with git then in this tab you will be able to see and manage your changes since the last commit or commit new stages and push to your git repository, it helps a lot when working with large project with so many active changes with features like (Discard changes, see changes or even delete file from stage).
Debugger: easily debug and run your Apps (ex: Node.js) in an isolated debugging environment to easily fix and interact with your app during the runtime, you can use more than one configuration to test different behaviors.
Extensions & Themes: Install third-party extensions for customizing your workspace, adding a new feature or supporting a new language there are thousands of cool extensions you will definitely benefit from or themes for giving your editor a new look and feel.
All the components are accessible through the left-hand panel.
Terminal & Console
The integrated Terminal that comes with VSCode out of the box is a real game changer when it comes to working with different CLIs and executing scripts you can have a split terminal which allows you to run two separate terminal processes on one single view to have a better control over your environment and be able and notice to see different commands gets executed.
You can also run different Shell interpreters by default (for ex: git Bash on windows rather than CMD) so everything is customizable through the editor user settings.
For the console, it helps when you work with the Debugger a lot cause you can use it as a Shell instance and interact with it also it gives critical info and errors about your running application.