VS Code for Game Dev

🧭 Before You Dive In

Installing new software can feel like the intimidating part, but this is really just clicking through an installer — the same way you'd install any app on your phone or laptop. Nothing in this lesson can break your computer, and if a step ever feels off, you can simply re-download and try it again.

Go at your own pace: check off one step in the checklist below, then take a breather before the next one. There's no timer here — the goal is a working setup, not a fast one.

💻 Why Visual Studio Code?

You've probably typed in Google Docs, Notes, or Notepad before — VS Code is a text editor too, just one built specifically for writing code. The big difference: while you type, it quietly watches for mistakes and helps you write faster, instead of just holding plain text.

VS Code (not to be confused with Visual Studio) is a lightweight but powerful code editor — free, open source, and built by Microsoft. It has become the most-used editor in the world because it's fast, extensible, and works for every language.

For game development with JavaScript and HTML5 Canvas, VS Code gives you:

✅ Setup Checklist

Click each step as you complete it. Progress: 0 / 7 steps done.

Let's get started!

• ✓
  Download VS Code — Go to code.visualstudio.com and download the installer for your OS (Windows, macOS, or Linux). Run the installer with default settings.
• ✓
  Open a project folder — In VS Code: File → Open Folder… → choose or create a folder named my-game. VS Code treats the folder as your project root.
• ✓
  Install Live Server — Click the Extensions icon (four squares) or press Ctrl+Shift+X. Search Live Server by Ritwick Dey and click Install. This is the most important extension for game dev.
• ✓
  Install Prettier — Search Prettier - Code formatter and install it. It auto-formats your code when you save, keeping indentation and spacing clean.
• ✓
  Create your first file — Right-click in the Explorer panel → New File → name it index.html. Type ! and press Tab — VS Code generates a full HTML skeleton instantly.
• ✓
  Launch Live Server — Right-click index.html in the Explorer → "Open with Live Server." A browser tab opens at localhost:5500. Now every save instantly updates the browser.
• ✓
  Open the terminal — Press Ctrl+` (backtick) to open VS Code's built-in terminal. You can run commands, start build tools, and manage files without leaving the editor.

🗂️ Game Project Folder Structure

A clean folder structure makes your project easier to manage, especially during a Game Jam when time is short. Here's the recommended layout — skim it once, but don't feel like you need all of it on day one. The tip right after the tree explains why.

🔁 The Live Server Workflow

Think of Live Server as a mirror that's always watching your file: every time you save, it instantly shows the browser what changed — no manual refreshing, no forgetting to reload. Your development cycle should be fast. With Live Server, it looks like this:

1. Write code in VS Code
2. Press Ctrl+S to save
3. Browser tab automatically reloads
4. See the result immediately
5. Repeat — every 30 seconds if needed

This tight feedback loop is how professionals work. The goal is to never go more than a few minutes without running your code. Small, frequent tests catch bugs early — long sessions without testing mean hours of debugging later.

🔍 Opening the Browser DevTools

Press F12 in the browser to open DevTools. The Console tab shows error messages and any console.log() output from your game. This is your primary debugging tool — seeing a red error message here isn't a failure, it's the tool doing exactly its job.

// Add debug output anywhere in your game:
console.log('Player position:', player.x, player.y);
console.log('Enemy count:', enemies.length);
console.warn('Lives low!');   // shows in yellow
console.error('Crash!');     // shows in red

⌨️ Essential Keyboard Shortcuts

You don't need to memorize all ten today — start with Save and Undo, and the rest will stick naturally the more you code. Bookmark this table and glance back whenever you need one.

🧩 Recommended Extra Extensions

These are optional add-ons, not requirements — Live Server and Prettier from the checklist above are the only two you truly need to get started.