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, you are good to go! You can check for updates
by clicking on the Help menu and selecting Check for Updates.
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. In this class we will use the Live Server extension to display the web pages locally, in our browser, without having to be on the web in order to debug programs locally using the browser's DevTools.
- In your browser, navigate to the Live Server extension in Extension Marketplace.
- Click Install and follow the prompts carefully to install the extension
within VS Code.
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 the .html extension can be opened using Live Server from within VS Code and the default browser will launch and render the page as if on a web server.