Set Up VS Code Like a Developer

Before You Study (5 mins)

Lesson focus: Lesson 01 used Antigravity in your browser — perfect for a first-contact "I built an app" moment. Today we move to Visual Studio Code (VS Code), the desktop editor where most professional engineers work all day. The skills transfer; the surface changes; the depth increases. By the end, you will have your Snake game open in VS Code with a configuration that survives across machines.

What you should have ready:

• Computer with admin rights to install software (Windows, macOS, or Linux)
• Your Snake Game project from Lesson 01 (cloned locally — we'll cover that)
• A GitHub account if you don't already have one (we'll need it for Settings Sync)
• About 60 minutes of focused setup time
• Patience — a one-time investment that pays back every day for the rest of your career

The Concept

A code editor is the workbench where engineers spend most of their working hours. The choice of editor shapes how fast you read code, how cheaply you switch between projects, and how much friction stands between you and the next change. For nearly a decade, the editor most professional developers reach for first is VS Code — Microsoft's free, cross-platform editor built on web technologies (Electron framework) that has become the industry default through a combination of speed, an enormous extension ecosystem, and a sane configuration model.

VS Code occupies a "Goldilocks" position between three categories:

The deeper insight is architectural: VS Code uses a multi-process model so the editor surface stays responsive while heavy work (linting, type-checking a million-line codebase) happens in background processes. The "intelligence" you experience — autocomplete, go-to-definition, refactoring — comes from a Language Server running in a separate process, communicating with the editor over the Language Server Protocol (LSP). This is why the same editor can feel native for TypeScript, Python, Rust, and Go without any of those languages baking into VS Code itself.

Three configuration mechanisms matter from day one:

• settings.json — your editor configuration as text, version-controllable, shareable.
• Settings Sync — your settings, keybindings, snippets, and extensions follow you across machines via your GitHub or Microsoft account. Setup once, identical environment everywhere.
• Profiles — multiple configurations for different work contexts (a "Frontend" profile with React + Tailwind extensions, a "Backend" profile with Go + Python extensions). Switching profiles unloads unused extensions, keeping the editor lean.

Want the full configuration deep-dive? The companion article VS Code Setup Guide — The Complete Configuration for Web Developers walks through the exact settings.json blueprint, the essential extension toolchain, and dev containers. Read it after this lesson to lock in the configuration you set up today.

Quick Concepts

What We Will Build

By the end of this lesson, you will have done these specific things:

1. Downloaded and installed VS Code from code.visualstudio.com.
2. Run the "Shell Command: Install 'code' command in PATH" action so typing code . in any terminal directory opens VS Code there.
3. Cloned (or moved) your Snake game project from Antigravity into a local folder.
4. Opened the project in VS Code with code .
5. Installed the essential extension set: ESLint (catches syntax issues), Prettier (auto-formats on save), GitLens (Git history inline), and one AI assistant (GitHub Copilot or Codeium — pick one).
6. Opened settings.json (Cmd+Shift+P → "Preferences: Open User Settings (JSON)") and added these baseline settings:
   json

   Copy

   {
     "editor.tabSize": 2,
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.bracketPairColorization.enabled": true,
     "editor.fontLigatures": true
   }
   

7. Enabled Settings Sync via your GitHub account so this setup follows you to any other machine.
8. Made one deliberate code change in your Snake game using VS Code's editing features: try multi-cursor (Cmd+D repeatedly) to rename a variable across the file.

The configuration you complete in step 6 is the contract of this lesson. Every line of that settings.json will pay back over months of use.

Think About

Before studying, consider:

1. The mouse is slower than the keyboard for almost every editor task. The senior engineers who feel impossibly fast are not faster typists — they reach for the mouse less. Which mouse-driven habit do you suspect costs you the most time today?
2. If you switch laptops in six months — work machine, personal machine, a borrowed one — what is the cost of "configuring everything from scratch" again? Settings Sync turns that cost into zero, but only if you set it up before the switch.

By the End

After this lesson, you'll:

• ✅ Have VS Code installed and the code command in your PATH
• ✅ Have your Snake game project open in VS Code
• ✅ Have the four essential extensions installed and verified
• ✅ Have a working baseline settings.json with format-on-save
• ✅ Have Settings Sync turned on with your GitHub account
• ✅ Know three keyboard shortcuts (Cmd+P, Cmd+Shift+P, Cmd+D) that cover 80% of editor navigation

Welcome to the workbench you'll use for the next ten thousand hours. 🎨

What We Learned

• VS Code is the de facto standard editor for professional engineering work — a "Goldilocks" tool between lightweight editors and heavy IDEs.
• Extensions are the engine. ESLint catches code-quality issues, Prettier auto-formats on save, GitLens shows Git history inline, an AI assistant accelerates writing.
• settings.json is configuration as code. Anything in the GUI Settings UI also lives as a key in settings.json — and the JSON file is what you version-control, share with teammates, and migrate between machines.
• Settings Sync ties your editor configuration to your GitHub account, so a fresh laptop becomes "your laptop" in five minutes instead of a day.
• The Command Palette (Cmd+Shift+P) is "God Mode". Almost every action in VS Code is a command — find it by name, run it, no menu hunting.
• Multi-cursor (Cmd+D) turns repetitive edits into parallel ones — the single biggest editor productivity unlock for most engineers.

Commands We Used

# Open the current directory in VS Code (after installing the 'code' command)
code .

# Clone your Snake game from GitHub (we'll publish to GitHub formally in Lesson 05)
git clone https://github.com/<your-username>/<your-repo>.git

# Verify VS Code is installed and the command is on PATH
code --version

A starter settings.json for web development:

{
  // Editor behavior
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.bracketPairColorization.enabled": true,
  "editor.fontLigatures": true,

  // UI refinement
  "workbench.sideBar.location": "right",
  "editor.minimap.enabled": false,
  "explorer.compactFolders": false,

  // Files
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

Three keyboard shortcuts to commit to muscle memory this week:

Why It Matters

The editor is where a developer spends most of their working time. A 5% improvement in editor fluency compounds — over a year, that is the difference between someone who ships features and someone who fights friction. Today's investment is one of the highest-leverage 60 minutes in the entire course.

The thing senior engineers know that beginners don't is that the editor is part of the codebase. A team's settings.json, the .editorconfig, the recommended extensions — these belong in the repository so a new contributor sees the same project the maintainers see. The lesson glossed over a few things you'll add as your skill grows:

• Workspace settings — per-project overrides of your user settings, committed alongside the project
• .vscode/extensions.json — recommended extensions that VS Code prompts to install when someone opens the repo
• tasks.json — automated workflows triggered with one keybinding (Cmd+Shift+B runs your build task)
• Dev Containers — defining your entire development environment as code (Docker-based), so every contributor gets identical Node version, identical Postgres, identical extensions

Want to dive deep into the configuration that survives across years of professional work? Read VS Code Setup Guide — The Complete Configuration for Web Developers. It is the longest-form reference in the engineering blog and is calibrated to extend exactly what you set up today.

Checklist

• I installed VS Code and verified code --version works in the terminal
• I installed the code command via "Shell Command: Install 'code' command in PATH"
• My Snake game project opens with code . from its directory
• I installed ESLint, Prettier, GitLens, and one AI assistant extension
• My settings.json has editor.formatOnSave: true and editor.defaultFormatter: "esbenp.prettier-vscode"
• I enabled Settings Sync via my GitHub account
• I used multi-cursor (Cmd+D) at least once to rename a variable across my code

Quick Quiz

Q1: What does Cmd+Shift+P (macOS) / Ctrl+Shift+P (Win/Linux) open?

• A) The Command Palette — every VS Code action by name ✓
• B) The keyboard preferences
• C) A shutdown dialog

Q2: What does editor.formatOnSave: true do?

• A) Encrypts the file before saving
• B) Runs the configured formatter (e.g. Prettier) every time you save ✓
• C) Saves a backup copy in the cloud

Q3: Why is Settings Sync useful?

• A) It backs up your code in case you lose your laptop
• B) Your editor configuration follows you across machines via GitHub ✓
• C) It speeds up your CPU

Q4: What is Cmd+D good for?

• A) Closing the document immediately
• B) Selecting the next occurrence of the current word — for parallel multi-cursor edits ✓
• C) Diving into the code's deepest definition

Bonus Challenge

Customize your settings.json with one personal preference per day for the next 5 days. Suggested experiments: a different theme (One Dark Pro, Tokyo Night), a font with ligatures (JetBrains Mono, Fira Code), workbench.sideBar.location: "right" (the file explorer stops jumping the code when you toggle it), editor.cursorStyle: "line-thin". After 5 days, your editor feels like yours, not stock — and that ownership compounds.

Next Lesson

Lesson 03: Build Your First 3D Scene — Fortnite's 3D Technology, You Can Use It

You'll learn: The same WebGL technology that powers parts of Fortnite, Google Earth, and most modern web games is free, runs in your browser, and is accessible through a library called Three.js. We'll build a small 3D scene step by step.

Your workbench is set. Now we build something three-dimensional on it. 🛠️