Home / Guides / VS Code Setup

VS Code Setup

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, and you're set

The free tier is all you need for this course. The Student Developer Pack used to upgrade you to Copilot Pro automatically, but new Copilot Pro sign-ups are paused as of June 2026, so do not count on it. The AI tools guide covers your options for fuller AI agent use.

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, 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.

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

Last updated: Friday, 6/5/2026