VS Code

Installation on Windows  

Installation on Windows is relatively simple: just access the official Visual Studio Code website and download the latest version by clicking the “Download for Windows” button.

Next, run the downloaded installer and follow the instructions on the screen. Don’t forget to check the “Add to Path” option to add Visual Studio Code to the environment variables.

After finishing the installation, close all open terminals and open a new one (PowerShell or Windows Terminal) and type the command below.

code --version  

If everything goes as expected, you will see the version of Visual Studio Code installed on your machine, and everything will be ready to proceed.

Installation on Mac  

Installation on Mac is relatively simple: just access the official Visual Studio Code website and download the latest version by clicking the “Download for Mac” button.

Open the installer and copy Visual Studio Code to the Applications folder on your Mac, and that’s it—the installation is properly completed.

Adding to PATH  

We can also add Visual Studio Code to the PATH to have access to the `code` command in the terminal, allowing us to open folders directly from there in Visual Studio Code.

Open your applications menu and start Visual Studio Code. On its home screen press F1 to open the command execution screen.

Search for the command Shell Command: Install ‘code’ command in PATH to add Visual Studio Code to your operating system’s PATH.

Installation on Linux (Ubuntu)  

Installation on Linux is relatively simple: just access the official Visual Studio Code website and download the latest version by clicking the “Download for Linux” button.

As a result of the download, you will have a `.deb` package in the Downloads folder. Open a terminal, navigate to it, and run the following command.

sudo apt install ./DOWNLOADED_FILE.deb  

Done, the installation of Visual Studio Code is completed and it should already appear in the applications menu for you.

Adding to PATH  

We can also add Visual Studio Code to the PATH to have access to the `code` command in the terminal, allowing us to open folders directly from there in Visual Studio Code.

Open your applications menu and start Visual Studio Code. On its home screen press F1 to open the command execution screen.

Search for the command Shell Command: Install ‘code’ command in PATH to add Visual Studio Code to your operating system’s PATH.

Extensions  

Extensions are a kind of complementary applications installed inside Visual Studio Code that allow us access to extra features.

There are many extensions already created and new ones arriving every day, but in this article we will cover the ones used in running the courses.

With Visual Studio Code open, press CTRL (CMD)+SHIFT+X or locate the extensions icon in the right side menu of the screen.

A new screen will open for us to search for extensions, and we will install the following ones.

C# – ms-dotnettools.csharp  

Azure – ms-vscode.vscode-node-azure-pack  

Docker – ms-azuretools.vscode-docker  

Flutter – dart-code.flutter  

Beautify – hookyqr.beautify  

Since there may be extensions with the same or similar names, always search for the package name provided above.

If you are not working with Flutter at the moment and don’t want to install its extension now, for example, you don’t have to. You can limit the installation of extensions only to those you are actually using.

The Beautify extension is used to indent CSS, HTML, and JavaScript code in a more optimized way. It is optional here, but recommended.

Settings  

Visual Studio Code allows many settings, and you are free to explore here, but we will leave the settings we use in the courses listed below.

To access the settings, simply press CTRL (CMD)+COMMA, and you will be presented with a graphical interface where you can modify or search for a setting.

In the upper right corner of this screen, there will be a button called Open Settings (JSON) that will display the JSON of the current settings.

If you want to keep all the settings the same as ours, use the JSON below in your configuration.

{  

    "editor.formatOnSave": true, // Formats the code whenever we save  

    "editor.fontFamily": "Source Code Pro", // Font  

    "editor.fontSize": 18, // Font Size  

    "workbench.colorTheme": "Atom One Dark", // Theme  

    "workbench.iconTheme": "vscode-icons", // Icon Package  

    "workbench.startupEditor": "newUntitledFile", // Always opens a blank file  

    "editor.minimap.enabled": false, // Disables the Mini Map  

    "workbench.panel.defaultLocation": "right", // Places the terminal on the right  

    "terminal.integrated.cursorStyle": "underline", // Makes the terminal cursor an underline  

    "terminal.integrated.fontSize": 18, // Terminal font size  

    "git.enableSmartCommit": true, // Enables GIT Smart Commit  

    "git.autofetch": true // Enables GIT Auto Fetch  

}

Note that to use the same font, theme, and icons you need to install them first, so follow the processes below before saving this configuration.

The font we use is Source Code Pro and it can be downloaded directly from Google Fonts. After downloading it, install it and restart Visual Studio Code.

Icons and Themes  

Visual Studio Code allows the use of customized icons, which greatly help with file visualization.

Both icons and themes can be installed as extensions, so repeat the extension installation process and search for the following items.

VS Code Icons – vscode-icons-team.vscode-icons  

Atom One Dark Theme – akamud.vscode-theme-onedark