VS Code Installation and Configuration

Setting up your primary development environment for web development

Why Visual Studio Code?

A modern developer's code editor is the equivalent of a master craftsperson's workbench—it's where you'll spend countless hours creating, refining, and debugging your code. Visual Studio Code (VS Code) has emerged as the editor of choice for many developers due to its powerful balance of features, performance, and customizability.

graph TD A[VS Code Benefits] --> B[Performance & Lightweight] A --> C[Multi-language Support] A --> D[Rich Extension Ecosystem] A --> E[Integrated Terminal] A --> F[IntelliSense] A --> G[Debugging Tools] A --> H[Git Integration] B --> B1[Fast startup] B --> B2[Responsive editing] C --> C1[Support for all major languages] C --> C2[Customizable per language] D --> D1[Thousands of extensions] D --> D2[Community-driven improvement] E --> E1[Multiple terminals] E --> E2[Shell integration] F --> F1[Smart code completion] F --> F2[Syntax highlighting] G --> G1[Breakpoints] G --> G2[Variable inspection] H --> H1[Source control panel] H --> H2[Inline blame/history]

VS Code offers a range of advantages compared to other code editors and IDEs:

In a 2022 Stack Overflow Developer Survey, VS Code was the preferred development environment for 74.48% of professional developers, making it the most popular code editor by a significant margin.

Installation Across Different Operating Systems

Let's go through the installation process for each major operating system:

Windows Installation

There are several ways to install VS Code on Windows:

  1. Direct Download:
  2. Using Chocolatey Package Manager: 
    choco install vscode -y
  3. Using Windows Package Manager (winget): 
    winget install Microsoft.VisualStudioCode

Installation Options: During installation, I recommend selecting these options:

macOS Installation

For macOS, you have two primary installation methods:

  1. Direct Download:
    • Visit https://code.visualstudio.com
    • Click the download button for Mac
    • Open the downloaded .zip file
    • Drag Visual Studio Code.app to the Applications folder
  2. Using Homebrew: 
    brew install --cask visual-studio-code

Installation Tip: After installation, add VS Code to your dock for quick access. You can also add the code command to your PATH by opening VS Code, pressing Cmd+Shift+P, typing "shell command," and selecting "Install 'code' command in PATH."

Linux Installation (Ubuntu/Debian)

On Ubuntu and other Debian-based distributions:

  1. Using Software Center:
    • Search for "Visual Studio Code" in Ubuntu Software
    • Click Install
  2. Using APT (recommended): 
    
# First, update the package index and install dependencies
sudo apt update
sudo apt install software-properties-common apt-transport-https wget -y

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

# Add the VS Code 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 -y
  3. Using Snap: 
    sudo snap install --classic code

Verification and Updates

After installation, verify VS Code is working correctly by launching it and checking the version:

  1. Open VS Code from your applications menu or dock
  2. Click on Help > About (or Code > About Visual Studio Code on macOS)
  3. Confirm you're running the latest version

VS Code will automatically check for updates, but you can manually check by clicking on the gear icon in the bottom left and selecting "Check for Updates."

Customizing the Visual Appearance

One of VS Code's strengths is its customizability. Let's start with visual appearance, which affects both aesthetics and readability.

Color Themes

VS Code comes with several built-in themes, and thousands more are available through extensions:

  1. Click the gear icon in the bottom left or press Ctrl+, (or Cmd+, on macOS) to open Settings
  2. Select "Color Theme" or search for "theme" in the settings search bar
  3. Browse through available themes or click "Install Additional Color Themes"

Popular Themes:

Theme Tip: Choose a theme that reduces eye strain during long coding sessions. Dark themes are often preferred for reducing glare, but this is personal preference. Some developers switch between light themes during the day and dark themes at night.

Icon Themes

Icon themes change how files and folders appear in the explorer:

  1. Open Settings as above
  2. Search for "icon theme"
  3. Select a theme or install additional ones

Recommended Icon Themes:

Font Customization

Choosing the right programming font significantly impacts readability and coding comfort:

  1. First, install a programming font on your system
  2. Open Settings in VS Code
  3. Search for "font" and modify "Editor: Font Family"
  4. Adjust "Editor: Font Size" to your preference

Recommended Programming Fonts:

Programming Ligatures: Many modern coding fonts support ligatures, which combine multiple characters into a single glyph. For example, != becomes a single, more readable symbol. To enable ligatures in VS Code:


// Add to settings.json
"editor.fontLigatures": true

Layout Customization

Adjust the VS Code layout to match your workflow:

Real-world Example: Many developers use a dual monitor setup with VS Code in full screen on their main display, and documentation or browser on the secondary display. For single monitor setups, splitting the editor and toggling the sidebar as needed maximizes screen space.

Essential VS Code Features for Productivity

Let's explore the key features that make VS Code exceptionally powerful:

IntelliSense

IntelliSense provides intelligent code completion based on language semantics and variable analysis:

IntelliSense is like having a coding assistant that remembers all API details for you, significantly speeding up development and reducing errors.

Integrated Terminal

The integrated terminal lets you run commands without leaving the editor:

Productivity Tip: Use terminal profiles to quickly switch between different environments. For example, you might have a profile for Node.js work, another for Python, and a third for a specific project's Docker container.

Git Integration

VS Code has excellent built-in Git support:

This integration makes version control a natural part of your workflow rather than a separate task.

Multi-cursor Editing

Edit multiple locations simultaneously:

Real-world Example: Imagine needing to refactor a variable name across several places, or add the same property to multiple CSS selectors. Multi-cursor editing makes these tasks trivial.

Search and Replace

Powerful search capabilities:

Productivity Tip: Use search and replace with regular expressions for complex transformations. For instance, swapping the order of function parameters or converting between different syntax formats.

Split Editors and Workspace Management

Optimize your workspace layout:

Common Use Case: Keep related files visible simultaneously, such as a component file alongside its styles, or test code alongside implementation.

Keyboard Shortcuts Mastery

Learning keyboard shortcuts is one of the fastest ways to boost your productivity. Here are the most essential ones:

Editor Navigation

Action Windows/Linux macOS
Quick Open, Go to File Ctrl+P Cmd+P
Command Palette Ctrl+Shift+P Cmd+Shift+P
Go to Symbol Ctrl+Shift+O Cmd+Shift+O
Go to Line Ctrl+G Cmd+G
Go to Definition F12 F12
Go Back Alt+Left Ctrl+Minus

Editing

Action Windows/Linux macOS
Copy Line (no selection) Ctrl+C Cmd+C
Move Line Up/Down Alt+Up/Down Option+Up/Down
Copy Line Up/Down Shift+Alt+Up/Down Shift+Option+Up/Down
Delete Line Ctrl+Shift+K Cmd+Shift+K
Insert Line Below/Above Ctrl+Enter / Ctrl+Shift+Enter Cmd+Enter / Cmd+Shift+Enter
Select Word/Expand Selection Ctrl+D / Shift+Alt+Right Cmd+D / Shift+Option+Right

Interface Control

Action Windows/Linux macOS
Toggle Sidebar Ctrl+B Cmd+B
Toggle Terminal Ctrl+` Cmd+`
Zen Mode Ctrl+K Z Cmd+K Z
New Window Ctrl+Shift+N Cmd+Shift+N
Close Window Alt+F4 Cmd+W

Customizing Keyboard Shortcuts

Create your own shortcuts or modify existing ones:

  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
  2. Type "keyboard shortcuts" and select "Preferences: Open Keyboard Shortcuts"
  3. Search for a command or click the + icon to add a new shortcut

Productivity Tip: Consider creating custom shortcuts for your most frequent actions. For example, if you often need to format documents, assign an easy-to-remember shortcut for the "Format Document" command.

Practice Activities

Activity 1: Editor Customization

Take time to personalize your VS Code environment:

  1. Install and test at least 3 different color themes
  2. Choose an icon theme that makes sense to you
  3. Install a programming font with ligatures (JetBrains Mono, Fira Code, etc.)
  4. Configure your editor settings (font size, line height, word wrap, etc.)
  5. Take a screenshot of your customized environment to compare with classmates

Activity 2: Keyboard Shortcut Challenge

Master essential keyboard shortcuts:

  1. Open the keyboard shortcuts reference (Help > Keyboard Shortcut Reference)
  2. Create a cheat sheet with the 10 shortcuts you think you'll use most often
  3. Practice the following operations using only keyboard shortcuts:
    • Create a new file
    • Open the terminal
    • Split the editor
    • Navigate between files
    • Find and replace text
    • Move and duplicate lines
    • Add multiple cursors
    • Format a document

Activity 3: Productivity Features Exploration

Experiment with VS Code's productivity features:

  1. Create a simple HTML file and use Emmet abbreviations to quickly generate structure (html:5, ul>li*5, etc.)
  2. Practice multi-cursor editing to make identical changes in multiple places
  3. Use the integrated terminal to run a simple command (like node -v or python --version)
  4. Create a sample Git repository, make changes, and use the Source Control panel to commit them
  5. Split your editor and open different files side by side

Further Resources

Conclusion

Visual Studio Code is more than just a text editor—it's a powerful development environment that adapts to your specific needs. By customizing its appearance, learning keyboard shortcuts, and leveraging its built-in features, you'll develop a workflow that significantly enhances your productivity and coding experience.

Remember that becoming proficient with VS Code is an ongoing process. Start with the basics we've covered today, and gradually incorporate more advanced features as you grow comfortable. Many professional developers are still discovering new ways to leverage VS Code years into using it.

In our next lecture, we'll explore essential VS Code extensions that further enhance its capabilities for specific development tasks and languages. We'll focus on extensions that improve your experience with HTML, CSS, JavaScript, and other web technologies, as well as productivity boosters that apply to all types of development.