Installing VS Code

VS Code (Visual Studio Code) is a professional code editor created by Microsoft. It's free, powerful, and used by millions of developers worldwide.

What is VS Code?

Feature

Benefit

Free & Open Source

No cost, ever

Cross-Platform

Windows, Mac, Linux

Lightweight

Runs fast, starts quick

Powerful

Used by professional developers

Extensible

Add features with extensions

AI-Ready

Built-in AI integration

Popular

Huge community, lots of resources

VS Code is NOT:

❌ Visual Studio (different product, more complex)
❌ A browser-based tool (runs on your computer)
❌ Expensive professional software (it's free!)

Installation Instructions

Choose your operating system:

Windows

# Windows Installation
 
## Step 1: Download
1. Open your browser
2. Go to: code.visualstudio.com
3. Click the big "Download for Windows" button
4. The .exe file will download (about 90MB)
 
## Step 2: Run Installer
1. Find the downloaded file (usually in Downloads folder)
2. Double-click VSCodeUserSetup-x64-[version].exe
3. If prompted, click "Yes" to allow changes
 
## Step 3: Installation Options
When you see the setup wizard:
1. Accept the license agreement
2. Keep the default installation location
3. IMPORTANT: On "Select Additional Tasks" screen, CHECK these boxes:
   ☑️ "Add 'Open with Code' action to file context menu"
   ☑️ "Add 'Open with Code' action to directory context menu"
   ☑️ "Register Code as an editor for supported file types"
   ☑️ "Add to PATH" ← Very important!
4. Click Install
5. Click Finish

First Launch Checklist

After installing, verify everything works:

✅ VS Code Installation Verification

0/6

VS Code Interface Tour

Text

┌─────────────────────────────────────────────────────────────────┐
│  File  Edit  Selection  View  Go  Run  Terminal  Help          │ ← Menu Bar
├─────┬───────────────────────────────────────────────────────────┤
│     │  index.html        style.css  ×                           │ ← Open Files
│  📁 ├───────────────────────────────────────────────────────────┤
│     │  1  <!DOCTYPE html>                                       │
│  🔍 │  2  <html>                                                │
│     │  3    <head>                                              │
│  🔀 │  4      <title>My Page</title>                           │ ← Editor
│     │  5    </head>                                             │
│  🐛 │  6    <body>                                              │
│     │  7      <h1>Hello!</h1>                                   │
│  📦 │  8    </body>                                             │
│     │  9  </html>                                               │
├─────┴───────────────────────────────────────────────────────────┤
│  PROBLEMS   OUTPUT   DEBUG CONSOLE   TERMINAL                   │ ← Panels
│  > Terminal ready                                               │
└─────────────────────────────────────────────────────────────────┘

Key Areas:

Icon	Name	Purpose
📁	Explorer	Browse files and folders
🔍	Search	Find in files
🔀	Source Control	Git integration
🐛	Run & Debug	Debugging tools
📦	Extensions	Add features

Installing Essential Extensions

Extensions add features to VS Code. Let's install the essentials.

How to Install Extensions:

Click the Extensions icon (📦) in the left sidebar
- Or press Ctrl/Cmd + Shift + X
Search for the extension name
Click Install

Extension 1: Live Server

Live Server

What it does: Preview HTML files in browser with auto-refresh.

How to install:

Search: Live Server
Find one by "Ritwick Dey" (millions of downloads)
Click Install

How to use: Right-click HTML file → "Open with Live Server"

Extension 2: Prettier

Prettier

What it does: Automatically formats your code to look clean.

How to install:

Search: Prettier - Code formatter
Find the official one (Prettier)
Click Install

How to use: Right-click in file → "Format Document"

Extension 3: Codeium (Free AI)

Codeium

What it does: Free AI coding assistant with autocomplete.

How to install:

Search: Codeium
Find "Codeium: AI Coding Autocomplete"
Click Install
Follow prompts to create free account

How to use: Just start typing — AI suggestions appear automatically.

Extension Verification

✅ Essential Extensions Installed

0/3

Test Live Server:

Create a new file: test.html
Add: <h1>Hello World</h1>
Save the file
Right-click → "Open with Live Server"
Browser should open showing your page!

Essential Keyboard Shortcuts

Start learning these — they'll speed up your work:

Action	Windows	Mac
New File	Ctrl + N	Cmd + N
Save	Ctrl + S	Cmd + S
Save All	Ctrl + K, S	Cmd + Option + S
Close File	Ctrl + W	Cmd + W
Open File	Ctrl + O	Cmd + O
Open Folder	Ctrl + K, Ctrl + O	Cmd + O
Toggle Terminal	Ctrl + `	Ctrl + `
Command Palette	Ctrl + Shift + P	Cmd + Shift + P
Quick Open	Ctrl + P	Cmd + P
Find	Ctrl + F	Cmd + F
Find in Files	Ctrl + Shift + F	Cmd + Shift + F

Recommended Settings

Make VS Code more comfortable:

Lesson Summary

What You Accomplished:

✅ Installed VS Code on your computer
✅ Completed first launch verification
✅ Installed essential extensions (Live Server, Prettier, Codeium)
✅ Learned the interface basics

Your Development Environment

You now have a professional code editor used by millions of developers worldwide!

Knowledge Check

📝 Quiz

1/2

What is VS Code?

Next Up

Let's install Node.js — the JavaScript runtime for modern development!