Installing VS Code and Extensions — The No-Boring Setup Guide

"Tools are only as scary as the last time you tried them. Let's make VS Code feel like your favorite hoodie."

---

Opening: Why this matters (and yes, you already know something)

You just came from the Course overview and expectations (where we promised clarity, deadlines, and merciless unit tests) and the Creative coding mindset (where you learned to think playfully and embrace weird bugs). Installing VS Code is the practical bridge between those two: it's the environment where your creative ideas meet reproducible code, version control, and the ability to actually hand something in that doesn't crash during demo day.

This guide walks you through installing VS Code, grabbing the extensions that make life less painful, configuring a sane workspace, and avoiding common setup potholes. No fluff. Just everything you need to go from "I have an idea" to "I pushed it to GitHub" without tearing out your hair.

---

Quick roadmap

1. Install VS Code
2. Essential extensions (the ones you actually use)
3. Recommended settings & snippets
4. Workspaces, Git, and Live Preview
5. Troubleshooting & sanity checks

Think of it like building a tiny studio for your projects: lights, music, and an ergonomic chair for your brain.

---

1) Install VS Code (Windows / macOS / Linux)

• Go to the official site: https://code.visualstudio.com/
• Download the appropriate installer and run it.
• On Windows, check the boxes to "Add to PATH" and "Open with Code" if prompted.
• On macOS, drag to Applications.
• On Linux, follow the distro instructions (deb/rpm or Snap).

Pro tip: install the version labeled "Stable" unless you like surprise bugs from Insider builds.

---

2) Extensions that actually matter (your starter pack)

Here’s the minimal, high-impact set for CS30 projects.

Extension	Why you want it	Example use-case
ESLint	Keeps JavaScript neat and catches bugs early	Finds missing semicolons, unused vars
Prettier	Automatic code formatting	One consistent style across team submissions
Live Server	Instant browser refresh for HTML/CSS/JS	Preview your interactive sketches as you type
GitLens	Supercharges Git inside VS Code	Blame, history, quick file authorship lookup
Debugger for Chrome (or built-in)	Debug JS in browser from VS Code	Set breakpoints, step through code
vscode-icons or Material Icon Theme	Makes file tree readable	Because folders with icons are happier folders

Uninstalling extras later is fine — extensions are like shoes: comfort and fit matter more than hype.

---

3) Recommended settings to stop fighting the editor

Open Settings (Ctrl/Cmd + ,) and consider these tweaks. You can paste the snippet into your settings.json (Command Palette → Preferences: Open Settings (JSON)).

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true
  },
  "liveServer.settings.port": 5500
}

Why these? Format on save + Prettier = fewer style debates. Auto-save on focus change prevents accidental data loss if you alt-tab into chaos. Excluding node_modules and .git keeps the search fast.

Keyboard shortcuts to love

• Toggle terminal: Ctrl/Cmd + `
• Open command palette: Ctrl/Cmd + Shift + P
• Quick file open: Ctrl/Cmd + P

Learning these is like learning to surf keyboard waves — it feels ridiculous at first and then addictive.

---

4) Workspaces, Git, and Live Preview (How things actually get submitted)

1. Create a project folder for each assignment. Open that folder in VS Code (File → Open Folder).
2. Initialize git: open terminal and run

git init
git add .
git commit -m 'initial commit'

3. Link to remote GitHub repo and push so you have backups and a submission history.

4. Use Live Server: right-click index.html → Open with Live Server. Edit, save, watch browser update instantly.

5. Use the built-in debugger for JS or the Chrome/Edge debug extension for more complex stepping.

Contrast: some folks prefer using only the terminal and vim — which is cool if you're a wizard. For most of us, VS Code hits the sweet spot: GUI convenience with terminal power.

---

5) Troubleshooting and common hiccups

• VS Code starts slow: disable heavy extensions and restart.
• ESLint not working: ensure you have a local eslint package or workspace setting; check node version.
• Live Server returns 404: confirm your working directory and that index.html exists.
• Git won't push: set your remote and ensure authentication (use SSH keys or GitHub CLI auth).

If you run into something weird, Google the error text, and then actually read the top two answers. Stack Overflow is a judgmental but reliable friend.

---

Real-world example: from idea to push (5 steps)

1. Open folder cs30-assignment1 in VS Code.
2. Create index.html, styles.css, app.js.
3. Start Live Server and prototype interaction — tweak until delightful.
4. Run ESLint + Prettier on save to keep code tidy.
5. Commit and push to GitHub: git add . && git commit -m 'complete interactive sketch' && git push.

Why this matters: you build a reproducible trail of work (grade-friendly), and you learn to ship iteratively — a key creative coding skill.

---

Closing: Key takeaways (so you can flex in lab)

• VS Code is the bridge between creative experimentation and reliable deliverables. Use it to prototype fast and submit clean work.
• Install just a few focused extensions: ESLint, Prettier, Live Server, GitLens. Resist the temptation to hoard extensions like browser tabs.
• Adopt a small set of settings and shortcuts to save time — format on save and learn the command palette.
• Version control is part of the setup, not an optional extra. Commit early, commit often.

"Setup isn't procrastination — it's scaffolding. Build the scaffolding once, and the rest of your creativity gets to jump higher."

Go set up VS Code now. It should take less time than a pizza delivery. When you're done, come back and we’ll turn that editor into a playground for code that moves, sings, and occasionally breaks in beautiful ways.

---

Want bonus polish? (Optional next steps)

• Sync settings across machines with Settings Sync (built-in).
• Add workspace-specific .vscode/launch.json for debug configs.
• Install a theme and icons that make you grin — aesthetics matter.

You got this. See you in the next lab where we actually make something messy and brilliant.