K
K12worX Education501(c)(3) Public Charity
Jamboree

Installing Visual Studio Code

Visual Studio Code (VS Code) is a free, powerful code editor made by Microsoft. It's the most popular code editor for web development and has excellent support for JavaScript, TypeScript, and React.

What You're Installing

Visual Studio Code - A modern code editor with:

  • Syntax highlighting (colors your code for readability)
  • IntelliSense (smart code completion)
  • Built-in terminal
  • Extensions (add extra features)

Why VS Code?

  • Free and open source
  • Lightweight but powerful
  • Great for beginners and professionals
  • Excellent TypeScript support (our codebase uses TypeScript)
  • Huge extension marketplace

Installation Steps

For Mac

  1. Visit the VS Code website

  2. Download for Mac

    • Click the big blue "Download for Mac" button
    • Downloads a .zip file

  3. Install

    • Open the downloaded .zip file
    • Drag "Visual Studio Code" to your Applications folder
    • Open VS Code from Applications

  4. Launch from terminal (optional but recommended)

    # Open VS Code
code --version

    If that doesn't work:

    • Open VS Code
    • Press Cmd + Shift + P
    • Type "shell command"
    • Click "Shell Command: Install 'code' command in PATH"
    • Restart your terminal

For Windows

  1. Visit the VS Code website

  2. Download for Windows

    • Click the big blue "Download for Windows" button
    • Downloads a .exe installer

  3. Run the installer

    • Open the downloaded file
    • Accept the license agreement
    • Important: Check these boxes during installation:
      • ☑ Add "Open with Code" action to context menu
      • ☑ Add to PATH (important!)
    • Click "Next" and "Install"

  4. Launch VS Code

    • Find VS Code in Start Menu
    • Or type code in Command Prompt

First-Time Setup

1. Open VS Code

You should see a welcome screen with a clean, modern interface.

2. Take a Quick Tour

  • Left Sidebar: File explorer, search, source control, extensions
  • Center: Code editor (where you'll write code)
  • Bottom: Terminal (command line within VS Code)

3. Install Essential Extensions

Extensions add extra features to VS Code. Let's install the ones you'll need:

  1. Click the Extensions icon (four squares on left sidebar)

    • Or press Cmd + Shift + X (Mac) / Ctrl + Shift + X (Windows)

  2. Search and install these extensions:

    a) ESLint

    • Search: "ESLint"
    • Publisher: Microsoft
    • Click "Install"
    • What it does: Highlights code quality issues and errors

    b) Prettier - Code Formatter

    • Search: "Prettier"
    • Publisher: Prettier
    • Click "Install"
    • What it does: Automatically formats your code to look clean

    c) Tailwind CSS IntelliSense

    • Search: "Tailwind CSS IntelliSense"
    • Publisher: Tailwind Labs
    • Click "Install"
    • What it does: Autocompletes Tailwind CSS class names

    d) ES7+ React/Redux/React-Native snippets

    • Search: "ES7+ React"
    • Publisher: dsznajder
    • Click "Install"
    • What it does: Provides shortcuts for React code

4. Configure Settings (Optional)

Make VS Code more comfortable:

  1. Open Settings

    • Mac: Cmd + ,
    • Windows: Ctrl + ,

  2. Recommended settings to change:

    • Search "Format On Save" → Check the box
    • Search "Tab Size" → Set to 2
    • Search "Word Wrap" → Set to on

Understanding the Interface

Key Areas

┌─────────────────────────────────────────────────┐
│ Menu Bar (File, Edit, View, etc.)              │
├───────┬─────────────────────────────────────────┤
│       │                                         │
│       │                                         │
│ Side  │       Code Editor                       │
│ Bar   │       (Your code goes here)             │
│       │                                         │
│       │                                         │
├───────┴─────────────────────────────────────────┤
│ Terminal (Command line within VS Code)         │
└─────────────────────────────────────────────────┘

Useful Keyboard Shortcuts

Everyone should know:

  • Cmd/Ctrl + S - Save file (use this ALL THE TIME!)
  • Cmd/Ctrl + P - Quick file search
  • Cmd/Ctrl + Shift + P - Command palette (do anything!)
  • Cmd/Ctrl + ` - Toggle terminal

Time savers:

  • Cmd/Ctrl + / - Comment/uncomment line
  • Cmd/Ctrl + D - Select next occurrence
  • Alt/Option + Up/Down - Move line up/down

Don't worry about memorizing these now. You'll learn them naturally over time!

Testing Your Setup

Let's make sure everything works:

1. Open Terminal in VS Code

  • Press Cmd/Ctrl + ` or go to View → Terminal

2. Verify Node.js works

node --version
npm --version

Both should show version numbers (from previous installation).

3. Create a Test File

  1. Click File → New File
  2. Type: console.log('Hello from VS Code!')
  3. Save as test.js (File → Save As)
  4. In the terminal, run: 
    node test.js
  5. You should see: Hello from VS Code!

If this works, everything is set up correctly! ✅

Customizing Your Experience

Themes (Optional)

Don't like the default colors?

  1. Press Cmd/Ctrl + K, then Cmd/Ctrl + T
  2. Browse built-in themes
  3. Or install themes from Extensions marketplace

Popular themes:

  • "One Dark Pro"
  • "Dracula Official"
  • "GitHub Theme"

Font Size

Eyes straining?

  1. Settings → Search "Font Size"
  2. Increase to 14 or 16

Common Issues

Extensions not working

Solution: Reload VS Code

  1. Press Cmd/Ctrl + Shift + P
  2. Type "Reload Window"
  3. Press Enter

Terminal not opening

Solution: Check View menu

  1. Go to View → Terminal
  2. Or try Cmd/Ctrl + ` again

Code command not found (Mac)

Solution: Install shell command

  1. Press Cmd + Shift + P
  2. Type "shell command"
  3. Click "Install 'code' command in PATH"

Tips for Beginners

1. Use the Integrated Terminal

Don't switch between VS Code and a separate terminal. Use the built-in one!

2. Learn One Shortcut Per Week

Don't try to memorize all shortcuts. Learn gradually.

3. Explore Extensions

There are extensions for almost everything. If you think "I wish VS Code could do X", search for an extension!

4. Use IntelliSense

When typing code, VS Code will show suggestions. Press Tab or Enter to accept them. This saves tons of time!

What's Next?

VS Code is installed! Now let's install Git for version control.

Next: Installing Git →

External Resources

Want to learn more about VS Code?