How to download and install Visual Studio Code?

In this article we will look at the steps of How to Download and Install Visual Studio Code on Windows and Mac operating systems.

For the development of each programming language, there are multiple IDE (Integrated Development Environment) available. For JavaScript also there are numerous IDEs, and Visual Studio Code editor is one of them. It is a lightweight but strong source code editor that runs on your desktop and is available for Windows, macOS, and Linux. Visual Studio Code has built-in support for JavaScript, TypeScript, and Node.js. It has an extensive ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity

How to download and carry out the installation of the Visual Studio Code?

Getting up and running with Visual Studio Code is swift and straightforward. It is a small download so you can install it quickly and give the VS Code a try. VS Code is a free code editor. Additionally, it runs on the macOS, Linux, and Windows operating systems. Let’s see how we can set up the same in the different platforms we use.

The first step is shared across all the platforms irrespective of any OS you are using.

Download Visual Studio Code:

You can download Visual Studio code from URL “https://code.visualstudio.com/download” by selecting the right platform:

You can click any of the icons mentioned above, depending on the operating system for which you are planning to download the visual studio code editor.

How to Install Visual Studio Code on Windows?

Firstly, download the Visual Studio Code installer for Windows. Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe). It will only take a minute.

Secondly, accept the agreement and click on next.

Then, click on “create a desktop icon” so that it can be accessed from desktop and click on Next.

After that, click on the install button.

Finally, after installation completes, click on the finish button, and the visual studio code will get open.

By default, VS Code installs under C:\users\{username}\AppData\Local\Programs\Microsoft VS Code.

How to install Visual Studio Code on macOS?

Follow the below steps(shown in gif file and mentioned in bullet points) to install the VS Code on macOS:

1. Download Visual Studio Code for macOS.

2. After clicking on the Mac option on the download site, it will download a zip file, as shown below:

3. Double-click on the downloaded zip to expand the contents. It will give a file, as shown below:

4. Drag “Visual Studio Code.app” to the “Applications” folder, so as it available in the “Launchpad.”

5. Double click on the “Visual Studio Code” to open.

6. Add VS Code to your Dock by right-clicking on the icon to bring up the context menu and choosing Options => Keep in Dock.

After the successful installation, let’s move to the next section to understand the various components of the User Interface of Visual Studio Code Editor.

What are the essential components of the VS Code?

Visual Studio Code is a code editor at its core. Like many other code editors, VS Code adopts a standard user interface and layout of an explorer on the left, showing all of the files and folders you have access to. Additionally, it has an editor on the right, showing the content of the files you have opened. Below are a few of the most critical components the VSCode editor:

VS Code comes with a straight-forward and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse. Additionally, it allows access to the full context of your folder or project. The UI is divided into five areas, as highlighted in the above image.

1. Editor — It is the main area to edit your files. You can open as many editors as possible side by side vertically and horizontally.

2. SideBar — Contains different views like the Explorer to assist you while working on your project.

3. Status Bar — It contains the information about the opened project and the files you edit.

4. Activity Bar — It is located on the far left-hand side. It lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.

5. Panels — It displays different panels below the editor region for output or debug information, errors, and warnings, or an integrated terminal. Additionally, the panel can also move to the right for more vertical space.

VS Code opens up in the same state it was last in, every time you start it. It also preserves folder, layout, and opened files.