VS Code — Your Workspace

Every profession has a primary workspace. A CA has Tally and Excel. A designer has Figma. A developer has VS Code — Visual Studio Code, made by Microsoft, free, and used by more developers than any other editor in the world.

What VS Code Is

VS Code is a code editor: a text editor that understands code. You open your project folder in VS Code and see every file. You click a file to open it and edit it. The editor highlights keywords, catches errors as you type, and shows you exactly where each file sits in your project.

The CA analogy: VS Code is to a developer what a well-organised filing cabinet plus a smart calculator is to a CA. It does not do the work for you — but it organises your workspace, warns you when something is wrong, and makes navigation fast.

Why Not Just Use Notepad?

Notepad is plain text. It has no awareness of what you are writing.

VS Code knows:

• Syntax highlighting — code is colour-coded so you can read it faster
• IntelliSense — as you type a function name, it suggests completions and shows the documentation inline
• Error squiggles — red underlines appear on mistakes before you even run the code
• Integrated terminal — the PowerShell/bash window you used in Session 1 is built right in, at the bottom of the screen
• Extensions — add tools for Tailwind, TypeScript, Git, Supabase, ESLint, and more

The Interface in 60 Seconds

When you open VS Code with a project:

┌─────────────────────────────────────────────────────────┐
│  File Explorer (left)  │  Editor (centre)               │
│  ─────────────────     │  ──────────────────────────   │
│  📁 my-project         │  // your code appears here     │
│    📄 package.json     │                                 │
│    📁 src/             │                                 │
│      📄 app/page.tsx   │                                 │
│      📄 components/    │                                 │
│                        │                                 │
├────────────────────────────────────────────────────────┤
│  Terminal (bottom)  —  the same PowerShell you used    │
└────────────────────────────────────────────────────────┘

• Left panel — your file tree. Every file in your project, structured as folders.
• Centre — the editor. Click any file to open and edit it.
• Bottom — the integrated terminal. Run npm run dev, git commit, or any command from here without switching windows.

Hands-On: Open VS Code

If you have not installed VS Code yet, see the VS Code setup guide.

Once installed:

1. Open VS Code
2. Press Ctrl + backtick (Ctrl + `) to open the integrated terminal
3. Type echo "VS Code is working" and press Enter
4. You should see VS Code is working printed below

How VS Code Connects to Everything Else

VS Code is the hub that connects your other tools:

• Git — VS Code shows which files changed (green/red indicators), lets you stage and commit without leaving the editor
• GitHub — the Source Control panel in VS Code connects directly to your remote repository
• Terminal — you run Supabase CLI commands, Vercel deploys, and npm run dev from the integrated terminal
• Claude Code — in Session 4, Claude Code runs inside VS Code's terminal and edits your files directly

You write in VS Code. Claude Code edits in VS Code. You review in VS Code. Everything flows through one window.