WDD 130 | Setup: Visual Studio Code

Setup: Code Editor - Visual Studio Code

Overview

The purpose of this setup activity is to install Microsoft's Visual Studio Code (VS Code). It is free to install on Mac, Windows, and Linux operating systems. This is the software application that will be used to write and edit code.

Instructions

If you already have VS Code installed:

Make sure it is up to date by going to Help on the VS Code application menu bar and clicking Check for Updates....
Note that VS Code will automatically try to update itself each month.
Skip to Step 2 in the Instructions section below.

Download and Install VS Code

In your browser, navigate to Visual Studio Code.
You will be prompted to download VS Code for your operating system.
Click download and follow the directions to download and install VS Code.
There are no required settings to change during the installation process.
Verify that VS Code is installed and can be run on your computer.

Visual Studio Code Opening Welcome Screen

Set VS Code to Automatically Save Files

Start VS Code, and in the VS Code menu bar, click
File ▶️ Preferences ▶️ Settings [Windows] or
Code ▶️ Settings... ▶️ Settings [Mac]

You can always get into the Settings panel by pressing the two key shortcut ⌘, [Mac] or Ctrl, [Windows/Linux].
Type auto save in the search box.
In the Files: Auto Save panel, change the dropdown menu from off to afterDelay.
Option: You can set the delay to your preferred time in milliseconds in the Files: Auto Save Delay setting.

Install the Live Server Extension

One of the reasons that VS Code is popular and useful is that custom extensions can be added to allow developers to customize the application. In this class we will save time by using the Live Server extension to display web pages locally, in the browser, for testing purposes before publishing.

In your browser, navigate to the Live Server extension in Extension Marketplace.
Select Install and follow the prompts carefully to install the extension within VS Code.

Extension Install Button

Manage extensions in VS Code using the Extensions View. The Extensions View icon is found in the Activity Bar.

Extension View Icon in the VS Code Activity Bar

You may need to close and restart VS Code in order to start using the extension.
Any file with an .html extension can be opened using Live Server from within VS Code. The user's default browser will launch and render the page as if on a web server.

After right mouse clicking on an HTML file in the VS Code explorer, this menu option appears.

This tool allows pages to be tested locally without going through the publication process to the remote web server.