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
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.
![Visual Studio Code official icon.](../images/w01/vscodeicon.png)
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
[Windows]File ▶️ Preferences ▶️ Settings
[Mac]Code ▶️ Settings... ▶️ Settings
You can always get into the
Settings
panel by pressing the two key shortcut⌘,
[Mac] orCtrl,
[Windows/Linux]. - Type "
auto save
" in the search box. - In the
Files: Auto Save
panel, change the dropdown menu fromoff
toafterDelay
.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.
- Start VS Code, and in the VS Code menu bar, click
[Windows]File ▶️ Preferences ▶️ Settings
[Mac]Code ▶️ Settings... ▶️ Settings
- Type "
format on
" in the search box. - In the search results, check ✅ the
Format On Save
box and theFormat 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.
- In your browser, navigate to the Five 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 Five 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.