VS Code — Overview
What Visual Studio Code is, why every web developer uses it, and how it compares to the tools you already know.
When you work in Excel, you have a dedicated tool built exactly for spreadsheets — not a generic text editor. It knows what a formula is. It colour-codes cells. It catches errors before they run. It has a built-in formula bar where you write instructions and see results immediately.
Visual Studio Code (VS Code) is the equivalent for code. It is not a generic text editor like Notepad. It is a dedicated environment built specifically for writing software — and it is the single most widely used tool in the world of web development.
It is also completely free, made by Microsoft, and runs on Windows, Mac, and Linux.
Why Not Just Use Notepad?
You could open a .txt file, rename it .js, and start typing JavaScript. Technically, it would work. But using Notepad for code is like doing your GST returns in a blank Word document instead of Excel.
Could you? Yes. Would you? Never.
VS Code adds everything that makes the difference between struggling through code and actually understanding what you're writing:
| Feature | Notepad | VS Code |
|---|---|---|
| Colour-coding by syntax | No — everything is black | Yes — functions, strings, variables each a different colour |
| Error detection before running | No | Yes — red underlines for problems |
| Autocomplete | No | Yes — suggests what you're about to type |
| File explorer sidebar | No | Yes — see all project files at once |
| Built-in terminal | No — switch to Command Prompt | Yes — terminal panel inside VS Code |
| Git integration | No | Yes — see changed files, commit, push from inside VS Code |
| Extensions for any tool | No | Yes — Tailwind, React, Supabase, Claude Code — all inside VS Code |
| Search across all files | No | Yes — Ctrl+Shift+F searches every file in the project |
The Excel Analogy
| Excel feature | VS Code equivalent |
|---|---|
| Formula bar | The editor panel — where you write instructions |
Syntax highlighting in formulas (SUM, IF, VLOOKUP highlighted differently) | Syntax highlighting — function, const, return each in distinct colours |
| Cell validation (red border when you type text into a number cell) | TypeScript + ESLint — red underlines when your code has a mistake |
Autocomplete for formula names (type =SU and it suggests SUM) | IntelliSense — type use and it suggests useState, useEffect, etc. |
| VBA editor (Alt+F11) — where macros live | The VS Code editor — where all logic lives |
| Immediate Window in VBA | The integrated terminal — run commands, see output instantly |
| Tab bar (Sheet1, Sheet2, Sheet3...) | The file tabs across the top — one per open file |
| Recent files | Ctrl+P — open any file in the project by name |
| Track Changes | Source Control panel (Git) — see every line you changed |
| Add-ins (Power Query, Solver...) | Extensions — add capabilities to VS Code |
The core idea: VS Code is a professional environment that makes writing code as structured, guided, and error-resistant as Excel makes writing formulas.
How VS Code Fits Into Your Daily Workflow
Every day you spend building something, VS Code is open. Here is where it sits in the stack:
| Step | What happens | Where |
|---|---|---|
| 1 | Open a project folder | VS Code — File → Open Folder |
| 2 | Write or edit code | VS Code editor |
| 3 | Run the dev server | VS Code integrated terminal (npm run dev) |
| 4 | See live preview | Browser (Chrome/Edge) |
| 5 | Claude Code assists | VS Code extension panel or terminal |
| 6 | Save a checkpoint | VS Code Source Control panel (Git commit) |
| 7 | Push to GitHub | VS Code Source Control → Sync |
| 8 | App goes live | Vercel (automatic, triggered by the push) |
VS Code is the centre of this loop. Everything else flows through it.
What This Section Covers
| Page | What you will do |
|---|---|
| Install | Download and install VS Code on Windows, with the right options checked |
| Interface Tour | Learn the 5 areas of VS Code and how to navigate without the mouse |
| Extensions | Install the exact 8 extensions our training stack requires |
| Settings | Configure the 6 settings that matter most for day-to-day work |
| Shortcuts | The 20 keyboard shortcuts that separate beginners from fast developers |
| Verification | Run through the checklist to confirm everything is working |
Expected time for this section: 45–60 minutes. Installation is 10 minutes. The interface tour and extensions together are the most important — budget 20 minutes on those. Shortcuts are reference material — come back to them as you practice.
One Thing Before You Start
VS Code is where you will spend most of your day as a developer. The time you invest in learning it properly — the keyboard shortcuts, the extensions, the settings — pays back within the first week and keeps compounding. Do not rush through this section.
Every expert developer has VS Code tuned to their workflow. By the end of this section, you will have a solid foundation to build on.