Installing VS Code and Essential Extensions

Week 1, Day 1 - Lecture 2

Why VS Code?

Imagine you're a writer. You could write your novel on napkins, in a basic notepad, or use a professional writing tool with spell-check, formatting options, and organization features. VS Code is like that professional writing tool, but for programmers!

graph TD A[VS Code Features] --> B[IntelliSense] A --> C[Integrated Terminal] A --> D[Git Integration] A --> E[Extensions] A --> F[Debugging Tools] B --> G[Auto-completion] B --> H[Error Detection] C --> I[Run Commands] C --> J[No Window Switching] D --> K[Version Control] D --> L[Visual Git Status] E --> M[Language Support] E --> N[Themes & Tools] F --> O[Breakpoints] F --> P[Variable Inspection]

Key Benefits

Installation Steps

Step 1: Download VS Code

  1. Visit code.visualstudio.com
  2. Click the download button for your operating system
  3. The website automatically detects your OS (Windows/Mac/Linux)

Step 2: Installation Process

Windows Installation

  1. Run the downloaded .exe file
  2. Accept the license agreement
  3. Choose installation location (default is fine)
  4. Select additional tasks:
    • ✓ Add "Open with Code" to context menu
    • ✓ Add to PATH (important!)
    • ✓ Register Code as default editor for supported files
  5. Click Install
  6. Launch VS Code when installation completes

Mac Installation

  1. Open the downloaded .dmg file
  2. Drag Visual Studio Code to Applications folder
  3. Launch VS Code from Applications
  4. When prompted, allow VS Code to access folders
  5. To add to PATH: Open Command Palette (Cmd+Shift+P) and type "shell command"
  6. Select "Install 'code' command in PATH"

Linux Installation (Ubuntu/Debian)

  1. Download the .deb package
  2. Open terminal and navigate to downloads
  3. Run: sudo dpkg -i <file>.deb
  4. If dependencies error occurs: sudo apt-get install -f
  5. Launch with: code

First Launch: Getting Familiar

When you first open VS Code, it's like walking into a new workshop. Let's explore the layout:

graph TD A[VS Code Interface] --> B[Activity Bar] A --> C[Side Bar] A --> D[Editor Area] A --> E[Status Bar] A --> F[Panel] B --> G[Explorer] B --> H[Search] B --> I[Source Control] B --> J[Debug] B --> K[Extensions] C --> L[File Tree] C --> M[Open Editors] D --> N[Code Editor] D --> O[Tabs] E --> P[Language Mode] E --> Q[Git Branch] E --> R[Errors/Warnings] F --> S[Terminal] F --> T[Problems] F --> U[Output] F --> V[Debug Console]

Key Interface Elements

Essential Settings

Before we install extensions, let's configure some basic settings. Think of this as adjusting your car seat and mirrors before driving.

Opening Settings

Recommended Settings

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

What these settings do:

Essential Extensions

Extensions are like power tools for your coding workshop. Let's install the essential ones:

mindmap root((Essential Extensions)) Language Support JavaScript ES6 HTML CSS Support npm Intellisense Code Quality ESLint Prettier Better Comments Git Integration GitLens Git History Productivity Live Server Auto Rename Tag Path Intellisense Themes Material Icon Theme One Dark Pro

Installing Extensions

  1. Click the Extensions icon in the Activity Bar (or Ctrl+Shift+X)
  2. Search for the extension name
  3. Click Install

Must-Have Extensions for Web Development

1. ESLint

Purpose: Like a spell-checker for your code

2. Prettier - Code Formatter

Purpose: Automatically formats your code for consistency

3. Live Server

Purpose: Like having a personal web server

4. GitLens

Purpose: Supercharges Git capabilities

5. Auto Rename Tag

Purpose: Automatically renames paired HTML/XML tags

Keyboard Shortcuts

Learning keyboard shortcuts is like learning to touch-type - it seems slow at first but makes you much more productive.

Essential Shortcuts

Action Windows/Linux Mac
Open Command Palette Ctrl+Shift+P Cmd+Shift+P
Quick Open File Ctrl+P Cmd+P
Toggle Terminal Ctrl+` Cmd+`
Save File Ctrl+S Cmd+S
Find in File Ctrl+F Cmd+F
Multiple Cursors Alt+Click Option+Click
Comment Line Ctrl+/ Cmd+/

Creating Your First Project

Let's create a simple project to test our setup:

  1. Create a new folder called "my-first-project"
  2. Open VS Code
  3. File → Open Folder → Select "my-first-project"
  4. Create a new file: Click New File icon or Ctrl+N
  5. Save as "index.html"
  6. Type the following code:
<!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>

Testing Live Server

  1. Right-click on index.html
  2. Select "Open with Live Server"
  3. Your default browser should open showing your page
  4. Try changing the text and saving - watch it update automatically!

Troubleshooting Common Issues

Extension Not Working?

Live Server Not Opening?

Can't Find Settings?

Assignment: VS Code Setup

  1. Install VS Code on your computer
  2. Install all recommended extensions from this lecture
  3. Configure the recommended settings
  4. Create a test project folder with an HTML file
  5. Test Live Server functionality
  6. Practice using at least 3 keyboard shortcuts
  7. Take a screenshot of your VS Code setup and save it

Bonus: Explore the themes marketplace and find a color theme you like!