🛠️ Installing VS Code & Essential Extensions

Why VS Code?

A code editor is where you'll spend more time than anywhere else in this course. You could write code in a plain text editor like Notepad, but that's like cooking a five-course meal with only a spoon. VS Code, made by Microsoft and free for everyone, has become the industry-standard editor — surveys consistently show a large majority of professional developers use it.

Here's what you get out of the box, and why it matters:

• Free & open source — no license to buy, and a huge community keeps improving it
• Cross-platform — identical on Windows, macOS, and Linux, so this lesson works for everyone
• Lightweight yet powerful — starts fast like a simple editor, but scales to full projects
• A massive extension marketplace — think of it as an app store that adds new abilities on demand

Don't worry about mastering every feature today. You'll pick them up naturally over the coming weeks — right now we just need it installed and comfortable.

Installing VS Code

The download page detects your operating system automatically, so this is quick.

Step 1 — Download

1. Visit code.visualstudio.com
2. Click the big download button (it already matches your OS)
3. Wait for the installer to finish downloading

Step 2 — Install for your OS

sudo apt install ./<file>.deb
# If it complains about dependencies:
sudo apt-get install -f
# Launch it:
code

Getting Familiar With the Interface

Opening VS Code for the first time is like walking into a new workshop — lots of stations, but each has a clear job. There are five regions worth knowing by name.

• Activity Bar (far left): big icons that switch what the Side Bar shows — Explorer, Search, Source Control, Run & Debug, Extensions
• Side Bar: context for the selected activity, most often your project's file tree
• Editor Area: where your code lives; open several files as tabs, or split the view side by side
• Panel (bottom): the integrated Terminal, Problems list, and Output — toggle it with Ctrl+`
• Status Bar (very bottom): your current Git branch, the file's language, and any error/warning counts at a glance

Essential Settings

Before installing extensions, let's adjust a few settings — the equivalent of tuning your seat and mirrors before you drive. You can edit settings visually (Ctrl+, on Windows/Linux, Cmd+, on Mac), but it's faster to edit the JSON directly.

Open the Command Palette (Ctrl/Cmd+Shift+P), type Open User Settings (JSON), and paste this in:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "workbench.startupEditor": "none"
}

Essential Extensions

Extensions are the power tools of your workshop. Install them from the Extensions view — click the icon in the Activity Bar or press Ctrl+Shift+X, search the name, and click Install. Here are the five that matter most for web work.

1. ESLint

What it does: a spell-checker for your JavaScript. It underlines problems — an unused variable, a likely typo, a bug-prone pattern — before you ever run the code. As a beginner, this feedback loop is gold; the editor teaches you good habits in real time.

2. Prettier — Code Formatter

What it does: automatically formats your code so indentation, spacing, and quotes are consistent — no more fiddling by hand. Combined with the formatOnSave setting above, your code tidies itself every time you save. Set it as your default formatter when prompted.

3. Live Server

What it does: spins up a tiny local web server and auto-refreshes your browser whenever you save. Right-click any HTML file and choose "Open with Live Server." Edit, save, and watch the page update instantly — you'll use this every single day in Phase 1.

4. GitLens

What it does: layers rich information on top of Git. Hover over any line to see who last changed it and why. It won't fully click until after the next lesson (Git & GitHub), but install it now so it's ready.

5. Auto Rename Tag

What it does: when you rename an HTML opening tag, it renames the matching closing tag automatically. A small thing that prevents a surprising number of "why is my page broken?" moments.

Keyboard Shortcuts

Learning shortcuts is like learning to touch-type — awkward at first, then a huge speed boost. Don't memorize all of these at once; pick two or three and use them until they're automatic, then add more.

💡 The one to learn first: the Command Palette (Ctrl/Cmd+Shift+P). Anything VS Code can do is in there — just start typing what you want. It's your safety net for every feature you haven't memorized yet.

Your First Project

Let's prove the setup works by making a page and previewing it live.

1. Create a new folder called my-first-project somewhere sensible
2. In VS Code: File → Open Folder, and select it (or run code my-first-project from a terminal)
3. In the Explorer, click New File and name it index.html
4. Type this in (yes — type it, don't paste):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First VS Code Project</title>
</head>
<body>
    <h1>Hello, VS Code!</h1>
    <p>I'm ready to start coding.</p>
</body>
</html>

Preview it with Live Server

1. Right-click index.html and choose "Open with Live Server"
2. Your browser opens to something like http://127.0.0.1:5500
3. Change the <h1> text, hit Save, and watch the browser refresh on its own

Hello, VS Code!
I'm ready to start coding.

Practice & Quiz

[x] code --version prints a version number
[x] Settings JSON saved (formatOnSave + autoSave on)
[x] 5 extensions show "Installed" in the Extensions view
[x] index.html opens in the browser via Live Server
[x] Editing + saving refreshes the page automatically
[x] You can open the Command Palette from memory

Best Practices & Troubleshooting

✅ Do

• Open a whole folder as your project, not individual files — VS Code works best that way
• Turn on Format on Save and let Prettier keep your code tidy
• Learn a couple of shortcuts at a time until they're automatic
• Keep your extension list lean — install what you use, not everything

❌ Don't

• Ignore the squiggly underlines from ESLint — they're teaching you
• Install dozens of extensions on day one; it slows the editor and overwhelms you
• Fight the auto-formatter by hand — configure it once and trust it

Summary

📚 Additional Resources

• Official VS Code Documentation
• VS Code Tips and Tricks
• Keyboard Shortcuts reference (PDF)

🚀 What's Next?

Your editor is ready — now let's make sure your work is safe and shareable. The next lesson sets up Git and GitHub, the version-control system that acts like a time machine for your code and a home for your growing portfolio.