# 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](/guides/getting-started/). ## 1. Install VS Code Download from [code.visualstudio.com](https://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](https://education.github.com/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](/guides/babson-ai-key/) next. ## 3. Recommended Extensions (optional) | 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 `

Hello World

` inside the `` 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