Visual Studio Code – Source Code Editor by Microsoft

Complete Guide to Visual Studio Code: The Modern Developer’s Editor

Visual Studio Code has revolutionized code editing by combining the speed of a text editor with powerful IDE features through an extensible architecture. Microsoft’s free, open-source editor has rapidly become the most popular development tool worldwide, supporting virtually every programming language through its extensive extension marketplace. From web development to data science, VS Code adapts to any workflow.

The editor’s intelligent code completion (IntelliSense), built-in Git integration, debugging capabilities, and remote development features provide a complete development environment that runs efficiently on Windows, macOS, and Linux.

Installation

# Ubuntu/Debian (official repo)
sudo apt-get install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list
sudo apt update
sudo apt install code

# Flatpak
flatpak install flathub com.visualstudio.code

# Snap
sudo snap install code --classic

# Fedora
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf install code

# Arch Linux
yay -S visual-studio-code-bin

# macOS
brew install --cask visual-studio-code

# Windows
winget install Microsoft.VisualStudioCode

Interface Overview

# Main areas:

# Activity Bar (left)
- Explorer (files)
- Search
- Source Control (Git)
- Run and Debug
- Extensions

# Side Bar
- Context-dependent panels
- File tree
- Search results
- Git status

# Editor Groups
- Split editors
- Tabs for open files
- Breadcrumbs

# Panel (bottom)
- Terminal
- Problems
- Output
- Debug Console

# Status Bar (bottom)
- Language mode
- Line/column
- Encoding
- Git branch

# Command Palette
Ctrl+Shift+P (Cmd+Shift+P on Mac)
Access all commands

Essential Shortcuts

# General
Ctrl+Shift+P    Command Palette
Ctrl+P          Quick Open file
Ctrl+,          Settings
Ctrl+`          Toggle terminal
Ctrl+B          Toggle sidebar

# Editing
Ctrl+X          Cut line
Ctrl+C          Copy line
Ctrl+Shift+K    Delete line
Alt+Up/Down     Move line
Shift+Alt+Up/Down  Copy line
Ctrl+/          Toggle comment
Ctrl+Shift+A    Block comment
Ctrl+D          Select next occurrence
Ctrl+Shift+L    Select all occurrences
Alt+Click       Add cursor
Ctrl+U          Undo cursor

# Navigation
Ctrl+G          Go to line
Ctrl+Shift+O    Go to symbol
F12             Go to definition
Alt+F12         Peek definition
Shift+F12       Find references
Ctrl+Tab        Switch tabs
Ctrl+\          Split editor

# Search
Ctrl+F          Find
Ctrl+H          Replace
Ctrl+Shift+F    Search in files
Ctrl+Shift+H    Replace in files

# View
Ctrl+0          Focus sidebar
Ctrl+1/2/3      Focus editor groups
Ctrl+Shift+E    Explorer
Ctrl+Shift+G    Source control
Ctrl+Shift+X    Extensions

Settings and Configuration

# Open settings
Ctrl+, (GUI)
# Or settings.json for JSON editing

# Common settings (settings.json)
{
    // Editor
    "editor.fontSize": 14,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    
    // Files
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    
    // Terminal
    "terminal.integrated.fontFamily": "monospace",
    "terminal.integrated.fontSize": 13,
    
    // Workbench
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "none"
}

# Workspace settings
.vscode/settings.json in project folder

# Language-specific settings
"[python]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true
},
"[javascript]": {
    "editor.tabSize": 2
}

Extensions

# Install extensions
Ctrl+Shift+X opens Extensions view
Search and click Install

# Essential extensions by category:

# Languages
Python
JavaScript/TypeScript (built-in)
Go
Rust Analyzer
C/C++
Java Extension Pack

# Formatting/Linting
Prettier
ESLint
Pylint
Black Formatter

# Git
GitLens
Git History
Git Graph

# Productivity
Live Server
Path Intellisense
Auto Rename Tag
Bracket Pair Colorizer
Todo Tree

# Themes
One Dark Pro
Dracula
Material Theme

# Remote Development
Remote - SSH
Remote - Containers
Remote - WSL

# Command line installation
code --install-extension ms-python.python
code --list-extensions

Integrated Terminal

# Open terminal
Ctrl+` (backtick)

# Multiple terminals
Ctrl+Shift+` New terminal
Click + button

# Split terminal
Ctrl+Shift+5

# Navigate terminals
Ctrl+Page Up/Down

# Rename terminal
Right-click > Rename

# Default shell settings
"terminal.integrated.defaultProfile.linux": "bash",
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.defaultProfile.osx": "zsh"

# Custom profiles
"terminal.integrated.profiles.linux": {
    "bash": {
        "path": "/bin/bash"
    },
    "zsh": {
        "path": "/bin/zsh"
    }
}

Git Integration

# Source Control view
Ctrl+Shift+G

# Stage changes
Click + next to file
Or: U to unstage

# Commit
Enter message
Ctrl+Enter to commit

# Common operations
- Stage all changes
- Commit
- Push/Pull
- Create/switch branches
- View diff
- Discard changes

# GitLens features
- Blame annotations
- Code lens
- File history
- Line history
- Compare branches

# Command palette Git
Ctrl+Shift+P
Type "Git:"
- Git: Clone
- Git: Pull
- Git: Push
- Git: Checkout to...

Debugging

# Run and Debug
Ctrl+Shift+D

# launch.json configuration
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/app.js"
        },
        {
            "type": "python",
            "request": "launch",
            "name": "Python: Current File",
            "program": "${file}"
        }
    ]
}

# Debugging features
F5          Start debugging
F9          Toggle breakpoint
F10         Step over
F11         Step into
Shift+F11   Step out
Shift+F5    Stop debugging

# Debug console
Evaluate expressions
View variables
Call stack navigation

# Breakpoint types
- Line breakpoints
- Conditional breakpoints
- Logpoints
- Function breakpoints

Remote Development

# Remote SSH
Install Remote - SSH extension
Ctrl+Shift+P > Remote-SSH: Connect to Host
Enter user@hostname

# SSH config
~/.ssh/config
Host myserver
    HostName server.example.com
    User username
    IdentityFile ~/.ssh/id_rsa

# Dev Containers
Install Dev Containers extension
.devcontainer/devcontainer.json
{
    "name": "Python Dev",
    "image": "python:3.11",
    "customizations": {
        "vscode": {
            "extensions": ["ms-python.python"]
        }
    }
}

# WSL
Install Remote - WSL extension
Click bottom-left
Select "New WSL Window"

Tasks and Automation

# tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build",
            "type": "shell",
            "command": "npm run build",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "Test",
            "type": "shell",
            "command": "npm test",
            "group": "test"
        }
    ]
}

# Run task
Ctrl+Shift+B (build)
Ctrl+Shift+P > Run Task

# Problem matchers
Match compiler errors
Navigate to source

Multi-Root Workspaces

# Create workspace
File > Add Folder to Workspace
File > Save Workspace As

# workspace.code-workspace
{
    "folders": [
        {"path": "frontend"},
        {"path": "backend"},
        {"path": "shared"}
    ],
    "settings": {
        "editor.formatOnSave": true
    }
}

Conclusion

Visual Studio Code has become the definitive code editor for modern developers, offering an unmatched combination of speed, features, and extensibility. Its support for remote development, integrated terminal, and vast extension ecosystem make it suitable for virtually any development workflow. Whether writing Python scripts, building web applications, or working with containers, VS Code provides the tools needed for productive development.