WDD 130: Web Fundamentals

W01 Setup: Tools – Editing – 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

Download and Install VS Code

1. In your browser, navigate to Visual Studio Code.
2. 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.
3. Verify that VS Code is installed and can be run on your computer.

   

Set VS Code to Automatically Save Files

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

   You can always get into the Settings panel by pressing the two key shortcut ⌘, [Mac] or Ctrl, [Windows/Linux].

2. Type "auto save" in the search box.
3. 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.

Set VS Code to Automatically Format Code

This is important for human readability of code including HTML markup and CSS.

1. Start VS Code, and in the VS Code menu bar, click
   [Windows] File ▶️ Preferences ▶️ Settings
   [Mac] Code ▶️ Settings... ▶️ Settings
2. Type "format on" in the search box.
3. In the search results, check ✅ the Format On Save box and the Format On Type box.

   

Install the Five 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 (Five Server) extension to display web pages locally, in the browser, for testing purposes before publishing.

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

   

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

   

   You may need to close and restart VS Code in order to start using the extension.

3. Any file with an .html extension can be opened using Five Server from within VS Code. The user's default browser will launch and render the page as if on a web server.

   

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