Course Banner

Visual Studio Code (VS Code)

Introduction

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. It is available for Windows, Mac and Linux and is free and open-source. Do not mistake it for Visual Studio, they are different applications.

This document covers three topics:

Installation on Windows

Video Demonstration

This video demonstrates downloading and installing Visual Studio Code for Windows. The demonstration is of an older version of Visual Studio Code so there may be some slight variation to the steps. Watch the video through the 1:48 mark.

Steps

  1. Open a web browser and enter code.visualstudio.com
  2. Once loaded, click the large green "Download" button on the left to download the installer.
  3. After the download is complete, launch the installer.
  4. If presented with the security warning(s) asking if it is OK for the software to change your PC?, proceed by clicking "Yes".
  5. Click "Next."
  6. Accept the license agreement and click "Next."
  7. On the following screens click "Next."
  8. When you reach the screen with the "Install" button, click it.
  9. When done, click "Finish" to close the installer.

Installation on Mac

Video Demonstration

This video demonstrates downloading and installing Visual Studio Code for Mac. Watch the video through the 2:33 mark.

Steps

  1. Open a web browser and enter code.visualstudio.com
  2. Once loaded, click the large green "Download" button on the left.
  3. After the download is complete, open the ZIP file.
  4. The ZIP file contains the "Visual Studio Code" program.
  5. Drag and drop the program to "Applications."

Overview

VS Code interface image

Welcome Screen

You can open recent folders, settings, etc.

Activity Bar

Explorer - The Explorer area is where you manage the files and subfolders of the currently opened folder.

Search - The Search area is where you can search for specific text throughout the open project or open files.

Debug - We will not be using this feature of VS Code.

Extensions - Add or manage extensions for VS Code.

Source Control - The Source Control area is where you can sync files to a version control system (e.g. GitHub or GitLab). We will be using this extensively.

Docker - We will not be using this feature of VS Code.

Side Bar

Shows the view you selected in the Activity Bar.

Editor

The most important part of the application is the Editor area on the right side. Here you can open and edit your code files. It’s possible to open up to three files side-by-side.

Status Bar

The bar at the bottom of the application gives you access to information about the opened project and the open files.

Errors and Warnings - Lists the number of errors and warnings currently found in the open project. Clicking it will open the "Problems" panel which lists the errors and warnings.

Notification - A bell icon will appear when new notifications are available. Click it to view them.

Panels

Here you can choose from four different panel. You need only to concern yourself with the Problems view.

Command Palette

VS Code Command line interface

Use Ctrl+Shift+P on Windows or ⌘+Shift+P on Mac to open the palette and start typing the command you want to run. All functions of Visual Studio Code can be accessed here.

Quick File Navigation

The quickfile option in VS Code

Use Ctrl+P on Windows or ⌘+P on Mac to open the file search dialog. Start typing and you’ll get back a result list with matching file names.

Extensions

Be sure to do the VS Code Extensions activity to add extensions for our class as well as download a sheet of common shortcuts.