Home / Guides / VS Code Setup Guide

VS Code Setup Guide

Get your development environment ready for OIM3690. This should take 15–20 minutes.

1. Install Git

VS Code needs Git installed on your computer to track changes and push code to GitHub.

  • Mac: Open Terminal and type git --version. If Git is not installed, macOS will prompt you to install it.
  • Windows: Download from git-scm.com and run the installer. Use the default settings.

To verify: open a terminal and type git --version. You should see a version number.

2. Install VS Code

Download from code.visualstudio.com and install.

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

3. 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
GitHub Copilot AI coding assistant (free tier included with any GitHub account)
Prettier - Code formatter Auto-formats your HTML/CSS/JS on save

Enable Copilot

  1. Click the Copilot icon in the bottom-right of VS Code
  2. Sign in with your GitHub account
  3. You should see "Copilot" in the status bar — you're set

If you applied for the GitHub Student Developer Pack, Copilot Pro will activate automatically once approved. The free tier works fine until then.

4. Recommended Extensions (optional)

Extension What it does
Auto Rename Tag Rename matching HTML open/close tags together
Color Highlight Shows color previews next to CSS color values
Image preview Shows image thumbnails in the gutter

5. Settings to Change

Open Settings: Cmd+, (Mac) 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

6. 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 — 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.

7. GitHub Desktop (optional)

Download from desktop.github.com and sign in with your GitHub account. GitHub Desktop provides a visual interface for Git if you prefer it over VS Code's built-in Source Control. See the Git Basics guide for how to use Git in VS Code.

Troubleshooting

Copilot not showing up?

  • Make sure you're signed into GitHub in VS Code (bottom-left avatar icon)
  • Restart VS Code after installing the Copilot extension

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