From Zero to AI

Lesson 5.2: VS Code - Our Code Editor

Duration: 45 minutes

Learning Objectives

After completing this lesson, you will be able to:

  • Understand what a code editor is and why we need one
  • Download and install Visual Studio Code
  • Navigate the VS Code interface confidently
  • Create, open, and save files in VS Code
  • Use basic keyboard shortcuts to work efficiently
  • Customize the editor appearance

Introduction

Now that you have Node.js installed, you need a place to write your code. While you could technically write code in Notepad or TextEdit, professional developers use specialized code editors. These are programs designed specifically for writing code, with features that make programming faster and less error-prone.

Visual Studio Code (VS Code) is the most popular code editor in the world, used by millions of developers. It's free, powerful, and works on Windows, macOS, and Linux.

Main Content

What is a Code Editor?

┌─────────────────────────────────────────────────────────────┐
│                     CODE EDITOR                              │
│                                                              │
│  A specialized text editor designed for writing code,       │
│  with features that help programmers work efficiently.      │
│                                                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │  Regular Text Editor (Notepad)                      │    │
│  │  - Plain text only                                  │    │
│  │  - No code highlighting                             │    │
│  │  - No error detection                               │    │
│  │  - No autocomplete                                  │    │
│  └─────────────────────────────────────────────────────┘    │
│                           vs                                 │
│  ┌─────────────────────────────────────────────────────┐    │
│  │  Code Editor (VS Code)                              │    │
│  │  + Syntax highlighting (colors for code)            │    │
│  │  + Error detection as you type                      │    │
│  │  + Autocomplete suggestions                         │    │
│  │  + File explorer                                    │    │
│  │  + Integrated terminal                              │    │
│  │  + Extensions for extra features                    │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘

Why VS Code?

Feature Benefit
Free and open source No cost, transparent development
Cross-platform Works on Windows, macOS, Linux
Lightweight but powerful Fast to open, packed with features
Huge extension marketplace Add any feature you need
Excellent TypeScript support Built by Microsoft, like TypeScript
Integrated terminal Run commands without leaving the editor
Git integration Version control built-in
Active community Millions of users, extensive resources

Installation Guide

For Windows

Step 1: Download VS Code

  1. Open your browser and go to https://code.visualstudio.com/
  2. Click the blue "Download for Windows" button
  3. The download will start automatically (a .exe file)

Step 2: Run the Installer

  1. Find the downloaded file and double-click it
  2. Accept the license agreement
  3. Choose the installation location (keep default)
  4. On "Select Additional Tasks", check these options:
    • Add "Open with Code" action to Windows Explorer file context menu
    • Add "Open with Code" action to Windows Explorer directory context menu
    • Register Code as an editor for supported file types
    • Add to PATH (this is important!)
  5. Click "Install"
  6. When finished, check "Launch Visual Studio Code" and click "Finish"

For macOS

Step 1: Download VS Code

  1. Go to https://code.visualstudio.com/
  2. Click "Download for macOS"
  3. A .zip file will download

Step 2: Install VS Code

  1. Open your Downloads folder
  2. Double-click the .zip file to extract it
  3. Drag "Visual Studio Code" to your Applications folder
  4. Open VS Code from Applications (or Spotlight: Cmd + Space, type "Visual Studio Code")

Step 3: Add to PATH (Important!)

  1. Open VS Code
  2. Press Cmd + Shift + P to open the Command Palette
  3. Type "shell command" and select "Shell Command: Install 'code' command in PATH"
  4. You can now open VS Code from terminal by typing code

For Linux (Ubuntu/Debian)

Option A: Using snap

sudo snap install --classic code

Option B: Using apt

# Install dependencies
sudo apt install software-properties-common apt-transport-https wget

# Import Microsoft GPG key
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

# Add the repository
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

# Install VS Code
sudo apt update
sudo apt install code

The VS Code Interface

When you first open VS Code, you'll see something like this:

┌─────────────────────────────────────────────────────────────────────┐
│  File  Edit  Selection  View  Go  Run  Terminal  Help               │
├────────┬────────────────────────────────────────────────────────────┤
│        │                                                            │
│   A    │                        B                                   │
│   C    │                                                            │
│   T    │            Welcome Tab / Your Files                        │
│   I    │                                                            │
│   V    │                                                            │
│   I    │                                                            │
│   T    │                                                            │
│   Y    │                                                            │
│        │                                                            │
│   B    ├────────────────────────────────────────────────────────────┤
│   A    │                        C                                   │
│   R    │               Panel (Terminal, Problems, etc.)             │
│        │                                                            │
├────────┴────────────────────────────────────────────────────────────┤
│  D                        Status Bar                                │
└─────────────────────────────────────────────────────────────────────┘

Let's understand each part:

A. Activity Bar (Left Side)

The vertical bar on the far left with icons:

Icon Name Purpose
📁 Explorer View and manage files
🔍 Search Find text across files
🌿 Source Control Git integration
🐛 Run and Debug Debug your code
🧩 Extensions Install add-ons

B. Editor Area (Center)

This is where you write code. Key features:

  • Tabs: Multiple files open at once
  • Split view: See two files side by side
  • Minimap: Overview of your code on the right

C. Panel (Bottom)

Toggle with Ctrl + ` (backtick). Contains:

  • Terminal: Run commands without leaving VS Code
  • Problems: Shows errors and warnings
  • Output: Logs from running processes
  • Debug Console: Interactive debugging

D. Status Bar (Bottom)

Shows useful information:

  • Current line and column
  • File encoding
  • Language mode
  • Git branch

Essential Keyboard Shortcuts

Learning shortcuts will make you much faster. Start with these:

File Operations

Action Windows/Linux macOS
New File Ctrl + N Cmd + N
Open File Ctrl + O Cmd + O
Save Ctrl + S Cmd + S
Save All Ctrl + K S Cmd + Option + S
Close File Ctrl + W Cmd + W
Action Windows/Linux macOS
Go to File Ctrl + P Cmd + P
Command Palette Ctrl + Shift + P Cmd + Shift + P
Toggle Sidebar Ctrl + B Cmd + B
Toggle Terminal Ctrl + ` Cmd + `

Editing

Action Windows/Linux macOS
Cut Line Ctrl + X Cmd + X
Copy Line Ctrl + C Cmd + C
Move Line Up/Down Alt + Up/Down Option + Up/Down
Duplicate Line Shift + Alt + Down Shift + Option + Down
Comment Line Ctrl + / Cmd + /
Undo Ctrl + Z Cmd + Z
Redo Ctrl + Y Cmd + Shift + Z

The Command Palette

The Command Palette (Ctrl + Shift + P or Cmd + Shift + P) is your best friend. It gives you access to ALL VS Code features. Just type what you want to do:

  • "change theme" - Change colors
  • "format document" - Auto-format code
  • "settings" - Open settings
  • "terminal" - Open terminal

Creating Your First Project

Let's create a folder for your coding projects:

Step 1: Create a Projects Folder

  1. Open VS Code
  2. Click "File" → "Open Folder" (or Ctrl + K, Ctrl + O on Windows, Cmd + O on macOS)
  3. Navigate to a location like:
    • Windows: C:\Users\YourName\Documents
    • macOS: /Users/YourName/Documents
    • Linux: /home/YourName/Documents
  4. Click "New Folder" and name it coding-projects
  5. Select the folder and click "Open"

Step 2: Create Your First File

  1. In the Explorer sidebar (left), hover over your folder name
  2. Click the "New File" icon (📄)
  3. Name it hello.txt
  4. Type some text: Hello, I'm learning to code!
  5. Save with Ctrl + S (or Cmd + S)

Step 3: Open the Integrated Terminal

  1. Press Ctrl + ` (backtick) or go to View → Terminal
  2. Notice the terminal opens at the bottom
  3. It's already in your project folder!
  4. Try typing ls (macOS/Linux) or dir (Windows) to see your file

Customizing VS Code

Changing the Color Theme

VS Code comes with many built-in themes:

  1. Press Ctrl + K Ctrl + T (or Cmd + K Cmd + T)
  2. Use arrow keys to preview themes
  3. Press Enter to select one

Popular themes:

  • Dark+ (default dark)
  • Light+ (default light)
  • One Dark Pro (install from extensions)
  • Dracula (install from extensions)

Adjusting Font Size

  1. Open Settings: Ctrl + , (or Cmd + ,)
  2. Search for "font size"
  3. Change "Editor: Font Size" to your preference (14-16 is common)

Enabling Auto Save

Tired of pressing Ctrl + S? Enable auto save:

  1. Open Settings: Ctrl + , (or Cmd + ,)
  2. Search for "auto save"
  3. Set "Files: Auto Save" to "afterDelay"

Troubleshooting

VS Code Won't Open

Windows:

  • Try running as Administrator
  • Reinstall VS Code

macOS:

  • Check System Preferences → Security & Privacy → Allow apps downloaded from App Store and identified developers
  • Try: xattr -dr com.apple.quarantine /Applications/Visual\ Studio\ Code.app

Linux:

  • Check if installed: which code
  • Try reinstalling with snap: sudo snap install --classic code

"code" Command Not Found in Terminal

Windows:

  • Reinstall VS Code with "Add to PATH" checked

macOS:

  • Open VS Code → Cmd + Shift + P → "Shell Command: Install 'code' command in PATH"

Linux:

  • Add to PATH manually: 
    echo 'export PATH="$PATH:/usr/share/code/bin"' >> ~/.bashrc
source ~/.bashrc

Extensions Not Loading

  1. Check your internet connection
  2. Try: Ctrl + Shift + P → "Developer: Reload Window"
  3. Disable firewall/VPN temporarily to test

Practice Exercise

Exercise 1: Explore the Interface

Open VS Code and complete these tasks:

  1. Open the Explorer sidebar (Ctrl + Shift + E)
  2. Open the Search sidebar (Ctrl + Shift + F)
  3. Open the Extensions sidebar (Ctrl + Shift + X)
  4. Open the integrated terminal (Ctrl + `)
  5. Open the Command Palette (Ctrl + Shift + P)

Exercise 2: File Operations

  1. Create a new folder called vs-code-practice
  2. Open it in VS Code
  3. Create three files:
    • notes.txt
    • ideas.md
    • test.js
  4. Write some text in each file
  5. Save all files (Ctrl + K S)

Exercise 3: Keyboard Shortcuts Practice

Open a text file and practice these shortcuts:

  1. Type several lines of text
  2. Use Ctrl + / to comment a line
  3. Use Alt + Up/Down to move a line
  4. Use Ctrl + D to select the next occurrence of a word
  5. Use Ctrl + Shift + K to delete a line

Exercise 4: Customize Your Editor

  1. Change the color theme to something you like
  2. Adjust the font size if needed
  3. Enable auto save
  4. Try changing the icon theme: Ctrl + Shift + P → "File Icon Theme"

Key Takeaways

  • VS Code is a free, powerful code editor used by millions of developers
  • The interface has four main areas: Activity Bar, Editor, Panel, and Status Bar
  • The Command Palette (Ctrl + Shift + P) gives access to all features
  • Learn essential keyboard shortcuts to work efficiently
  • The integrated terminal lets you run commands without leaving the editor
  • Customize the editor to match your preferences (theme, font size, auto save)
  • Add "code" to your PATH to open VS Code from the terminal

Resources

Resource Type Difficulty
VS Code Documentation Documentation Beginner
VS Code Tips and Tricks Tutorial Beginner
VS Code Keyboard Shortcuts Reference Reference Beginner
VS Code Introductory Videos Video Beginner
Awesome VS Code - GitHub Repository Intermediate