Home / Guides / VS Code Setup

VS Code Setup

Get your development environment ready for OIM3690. This should take 15 to 20 minutes. Install Git and GitHub Desktop first, as in Getting Started.

1. Install VS Code

Download from code.visualstudio.com and install.

  • macOS: drag to Applications
  • Windows: run the installer, check "Add to PATH"

2. Install Required Extensions

Open VS Code → click the Extensions icon (left sidebar, looks like 4 squares) → search and install:

Extension What it does
Live Server Preview your HTML files in a browser that auto-refreshes when you save
Prettier - Code formatter Auto-formats your HTML/CSS/JS on save

Copilot is missing from that table on purpose. Current versions of VS Code ship it built in, so there is nothing to install.

Turn on Copilot

  1. Hover over the Copilot icon in the status bar (bottom of the window) and choose Use AI Features
  2. Sign in with your GitHub account when prompted
  3. The status bar icon stops showing a prompt once you are signed in

If the status bar does not offer it, open the Command Palette with Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and run GitHub Copilot: Sign in.

The free tier covers this course. Apply for the GitHub Student Developer Pack in Week 1 and you get Copilot Student instead, which makes code completions unlimited and adds a monthly credit allowance for chat and agent mode. Sign-ups for it reopened in June 2026. For chat and agent mode, set up Your Babson AI Key next.

Extension What it does
Error Lens Puts the error message on the line that has the error, instead of leaving it in the Problems panel
Better Comments Colors comments by their first character. // ? turns blue, which is a good way to mark a line of AI-generated code you do not understand yet

You do not need Auto Rename Tag or Color Highlight. VS Code renames matching HTML tags on its own once Editor: Linked Editing is on (see the next section), and it already shows a color swatch beside every CSS color value.

4. Settings to Change

Open Settings: Cmd+, (macOS) or Ctrl+, (Windows).

Search for and change these:

Setting Value Why
Editor: Tab Size 2 Standard for HTML/CSS/JS
Editor: Format On Save checked Prettier formats your code every time you save
Files: Auto Save afterDelay Saves your files automatically
Editor: Linked Editing checked Renames a closing HTML tag when you rename the opening one

5. Test Your Setup

  1. Create a new folder on your computer called test-site
  2. Open it in VS Code: File → Open Folder
  3. Create a file called index.html
  4. Type ! and press Tab, and VS Code should generate an HTML template
  5. Add <h1>Hello World</h1> inside the <body>
  6. Right-click index.html → Open with Live Server
  7. Your browser should open with "Hello World" displayed

If all of this worked, your setup is ready.

Troubleshooting

Copilot not showing up?

  • Make sure you are signed into GitHub in VS Code (bottom-left avatar icon)
  • Check that AI features are turned on from the Copilot icon in the status bar
  • Restart VS Code, then update it if the icon is still missing

Live Server not working?

  • Make sure you opened a folder (not just a file) in VS Code
  • Make sure your file is named index.html (lowercase, no spaces)

Prettier not formatting?

  • Check that "Format On Save" is enabled in Settings
  • Try Cmd+Shift+P → "Format Document" manually

Last updated: Monday, 9/14/2026