Setup: Code Editor - Visual Studio Code
Overview
The purpose of this setup activity is to install Microsoft's Visual Studio Code. VS Code is free to install on Mac, Windows, and Linux operating systems. This is the editing tool that will be used in this course to write and edit web page code.
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 each month unless you turn it off.
- Skip to Step 2 in the Instructions.
Instructions
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.
Set your VS Code Environment Preferences
- Install your VS Code interface preferences. This video, even though it ends abruptly, covers
a very brief introduction to VS Code and shows how you can edit some interface preferences in the program.
🎦 Visual Studio Code Introduction.
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 use the Live Server extension to display web pages locally, in the browser, for testing purposes before publishing, thus saving time.
- 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.
Figure: Extension Icon in the VS Code Activity Bar Note that it is very common to manage extensions using the Extensions View. The Extensions View icon is found in the Activity Bar.
- A demonstration of how to use the extension will be shown later. Basically, any file with
an
.htmlextension 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.
This tool allows pages to be tested locally without going through the publication process to the remote web server.
Do NOT install other extensions unless you understand the extension's purpose and utility.
You can always manage extensions as needed later.