VS Code Guide

01 Introduction — What is VS Code?

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It runs on Windows, macOS, and Linux, and supports hundreds of programming languages out of the box. With its rich extension ecosystem, integrated terminal, debugger, and Git support, VS Code has become the most popular developer editor worldwide.

Key features include:

• IntelliSense — smart code completions based on language semantics
• Built-in Git — stage, commit, push, pull, and resolve conflicts without leaving the editor
• Integrated Terminal — full shell access right in the editor
• Debugger — set breakpoints, inspect variables, and step through code
• Extensions — thousands of community-built plugins for languages, themes, and tools
• Remote Development — connect to WSL, containers, or SSH servers

02 Installation & First Launch Beginner

Download & Install

• Linux (Debian/Ubuntu): Download .deb from code.visualstudio.com or use sudo snap install code --classic
• Linux (Fedora): Download .rpm from code.visualstudio.com
• macOS: Download .zip from code.visualstudio.com or brew install --cask visual-studio-code
• Windows: Download the installer from code.visualstudio.com

Launch from Terminal

# Open VS Code in the current directory
code .

# Open a specific file
code index.js

# Open and wait for the window to close (useful for Git commit messages)
code --wait file.txt

# Open without a window (add to PATH during install on Windows/macOS)
code --helpCopy

First Launch Checklist

• Open the Command Palette (Ctrl+Shift+P) and try typing commands
• Toggle the Explorer sidebar (Ctrl+B)
• Open the Extensions panel (Ctrl+Shift+X) and search for a theme
• Open the Integrated Terminal (Ctrl+`)

03 Interface Overview Beginner

VS Code's interface is divided into five main areas:

Common View Commands

# Toggle Sidebar visibility
Ctrl+B

# Toggle Panel visibility
Ctrl+J

# Toggle Sidebar orientation (left/right)
# Context menu on Activity Bar → Move Sidebar Right/Left

# Zen Mode — full-screen, distraction-free editing
Ctrl+K Z

# Toggle Minimap (code overview on the right edge)
Ctrl+Shift+P → "View: Toggle Minimap"

# Split editor vertically
Ctrl+\Copy

04 Essential Keyboard Shortcuts Beginner

These shortcuts will save you the most time. Windows/Linux keys shown; macOS users replace Ctrl with Cmd and Alt with Option.

05 Command Palette Beginner

The Command Palette is the single most important feature in VS Code. Press Ctrl+Shift+P and start typing to access almost every command in the editor.

Common Palette Commands

# Toggle settings
> Preferences: Open Settings (UI)

# Install extensions
> Extensions: Install Extensions

# Change color theme
> Preferences: Color Theme

# Change file icon theme
> Preferences: File Icon Theme

# Open keyboard shortcuts
> Preferences: Open Keyboard Shortcuts

# Format document
> Format Document

# Toggle line numbers
> View: Toggle Line Numbers

# Reopen closed tab
> Workbench: Reopen Closed EditorCopy

Quick Open (Ctrl+P)

Press Ctrl+P and type part of a filename to navigate instantly. Add modifiers:

• @ — go to a symbol within the current file
• : — go to a specific line (e.g., :42)
• # — search across all files for a symbol
• > — open the Command Palette (same as Ctrl+Shift+P)

06 Integrated Terminal Beginner

The integrated terminal gives you a full shell inside VS Code. Open it with Ctrl+` (backtick).

Terminal Management

# Open a new terminal instance
Ctrl+Shift+`

# Switch between terminals
Ctrl+PageUp / Ctrl+PageDown

# Open terminal in a specific folder
# Click + dropdown → Select Default Profile → Choose folder

# Create a split terminal (side by side)
# Right-click terminal tab → Split, or Ctrl+Shift+5

# Clear terminal
# Type 'clear' in the terminal or click trash icon

# Open file links in terminal output
# Ctrl+Click on a file:line in terminal outputCopy

Default Shell

You can change the default shell via the Command Palette: Terminal: Select Default Profile. Options include:

• bash, zsh, fish (Linux/macOS)
• PowerShell, Command Prompt, Git Bash (Windows)
• WSL (Windows Subsystem for Linux)

07 Extensions Beginner

Extensions are what make VS Code infinitely customizable. Open the Extensions panel with Ctrl+Shift+X.

Essential Extensions

Extension Management Commands

# Open Extensions panel
Ctrl+Shift+X

# Install from command line
code --install-extension esbenp.prettier-vscode

# List installed extensions
code --list-extensions

# Disable all extensions (troubleshooting)
code --disable-extensionsCopy

08 Settings & Customization Intermediate

VS Code settings are stored in settings.json. You can edit them via the UI (Ctrl+,) or directly in JSON.

Open Settings

# Open Settings UI
Ctrl+,

# Open settings.json directly
Ctrl+Shift+P → "Preferences: Open Settings (JSON)"

# Open workspace settings (project-specific)
# .vscode/settings.json in your project rootCopy

Popular Settings

{
  // Editor appearance
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 24,
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,

  // Format on save
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Word wrap
  "editor.wordWrap": "on",

  // Auto save
  "files.autoSave": "onFocusChange",

  // Tab size
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // Explorer
  "explorer.compactFolders": false,
  "explorer.confirmDragAndDrop": false,

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.linux": "bash",

  // Git
  "git.enableSmartCommit": true,
  "git.autofetch": true
}Copy

Settings Layers

• User Settings — apply to every project (global)
• Workspace Settings — stored in .vscode/settings.json, shared with the team
• Folder Settings — apply to a specific folder in a multi-root workspace

09 Snippets Intermediate

Snippets let you insert repetitive code blocks quickly by typing a prefix and pressing Tab.

Built-in Snippets

VS Code comes with built-in snippets for many languages. For example, in JavaScript/TypeScript:

// Type 'log' and press Tab
console.log();

// Type 'fn' in JS/TS
function name() {

}

// Type 'for' → for loop
for (let index = 0; index < array.length; index++) {
  const element = array[index];
}

// Type 'clg' in JS
console.log()Copy

Create Your Own Snippets

// Open: Command Palette → Preferences: Configure User Snippets
// Choose a language or create a global one

{
  // Example: React functional component snippet
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "  return (",
      "    <div>$0</div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React Functional Component"
  }
}Copy

10 Debugging Intermediate

VS Code has a built-in debugger that supports Node.js, Python, Java, C++, and more via extensions.

Getting Started

# Open Run and Debug panel
Ctrl+Shift+D

# Start debugging (F5)
F5

# Toggle breakpoint (click gutter or F9)
F9

# Step over
F10

# Step into
F11

# Step out
Shift+F11

# Continue (resume execution)
F5

# Stop debugging
Shift+F5

# Restart debugging
Ctrl+Shift+F5Copy

Launch Configuration

Create a .vscode/launch.json file. Here's an example for Node.js:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229
    }
  ]
}Copy

Debug Features

• Watch — track variable expressions
• Call Stack — see the execution path
• Variables — inspect local, global, and closure variables
• Logpoints — log messages without stopping (right-click gutter → Add Logpoint)
• Conditional Breakpoints — break only when an expression is true

11 Git Integration Intermediate

VS Code has deep Git integration built in. Open the Source Control panel with Ctrl+Shift+G.

Common Git Actions

# Open Source Control panel
Ctrl+Shift+G

# Stage file changes (click + next to file)
# Stage all: hover "Changes" → click +

# Commit staged changes
# Type message in input box → Ctrl+Enter

# Pull latest
# Click ... → Pull, or run in terminal

# Push commits
# Click ... → Push, or run in terminal

# View git history for a file
# Right-click in editor → Git: View History

# Open diff view
# Click a modified file in Source Control panel

# Discard changes
# Right-click file → Discard ChangesCopy

GitLens (Recommended Extension)

GitLens supercharges the Git experience by adding:

• Inline blame annotations — see who last modified each line
• Code lens — show commit info above functions
• File history — rich timeline view
• Branch visualization — interactive rebase UI

12 Multiple Cursors & Selection Intermediate

Multi-cursor editing lets you make the same edit in multiple places simultaneously — one of VS Code's most powerful features.

Multi-Cursor Techniques

# Add cursor at next occurrence of selection
Ctrl+D

# Add cursor at every occurrence of selection
Ctrl+Shift+L

# Add cursor above/below
Ctrl+Alt+↑ / Ctrl+Alt+↓

# Add cursor at arbitrary locations
# Alt+Click to add a cursor wherever you click

# Undo last cursor action
Ctrl+U

# Select all occurrences of current word
Ctrl+Shift+L

# Cancel multi-cursor
EscCopy

Practical Workflows

• Rename a variable — select the variable, press Ctrl+Shift+L, type the new name
• Edit multiple lines — select lines, press Ctrl+Shift+L, edit all at once
• Add commas/semicolons — Alt+Shift+I to add a cursor at the end of every line in a selection
• Column selection — hold Shift+Alt and drag to select a rectangular block

13 Find & Replace Beginner

In the Current File

# Find
Ctrl+F

# Find and replace
Ctrl+H

# Toggle case sensitivity  (Aa button)
Alt+C

# Toggle whole word match  (Ab button)
Alt+W

# Toggle regex mode  (.* button)
Alt+R

# Find next / previous
Enter / Shift+Enter

# Close find widget
EscCopy

Across All Files (Search)

# Open Search (global find)
Ctrl+Shift+F

# Search and replace across files
Ctrl+Shift+H

# Include/exclude files (use glob patterns)
# In the "files to include" box: src/**/*.js
# In the "files to exclude" box: node_modules, dist

# Toggle search details
# Click the ellipsis (...) in the Search panel

# Preview search results inline
# Results show a snippet of matching linesCopy

Useful Regex Patterns

14 Emmet Intermediate

Emmet lets you write HTML and CSS at lightning speed using CSS-like abbreviations. Built into VS Code for HTML, CSS, JSX, and more.

HTML Abbreviations

// Type and press Tab

// Basic structure
!             → <!DOCTYPE html>... (full HTML5 boilerplate)

// Elements
div           → <div></div>
p             → <p></p>
a             → <a href=""></a>
img           → <img src="" alt="" />

// Nesting
nav>ul>li   → <nav><ul><li></li></ul></nav>

// Siblings
div+p+bq     → <div></div><p></p><blockquote></blockquote>

// Multiplication
ul>li*5      → <ul><li>*5</li></ul>

// IDs and classes
div#header   → <div id="header"></div>
div.container → <div class="container"></div>

// Attributes
a[href="https://example.com"] → <a href="https://example.com"></a>

// Text
p{Hello}     → <p>Hello</p>

// Numbered items
ul>li.item$*3 → <ul><li class="item1"></li>...</ul>Copy

CSS Abbreviations

// Properties
m            → margin: ;
p            → padding: ;
c            → color: #000;
bg           → background: #000;
bgc          → background-color: #000;
ff           → font-family: ;
fs           → font-size: ;
fw           → font-weight: ;
ta:c         → text-align: center;
d:f          → display: flex;
jc:c         → justify-content: center;
ai:c         → align-items: center;
bdrs         → border-radius: ;

// Vendor prefixes
// Many are handled automaticallyCopy

15 Tasks & Build Systems Advanced

Tasks let you run tools like build scripts, linters, test runners, or any shell command directly from VS Code.

Create a Task

Create a .vscode/tasks.json file:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build Project",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm test",
      "group": "test"
    },
    {
      "label": "Lint",
      "type": "shell",
      "command": "npm run lint"
    }
  ]
}Copy

Run a Task

• Ctrl+Shift+B — run the default build task
• Ctrl+Shift+P → Tasks: Run Task — pick any defined task
• Tasks output goes to the Terminal panel, with error markers parsed by problemMatcher

Problem Matchers

Problem matchers parse compiler/linter output and highlight issues inline. Built-in matchers include:

• $tsc — TypeScript compiler
• $eslint-compact — ESLint compact format
• $eslint-stylish — ESLint stylish format
• $gcc — GCC/G++
• $jshint — JSHint

16 Remote Development Advanced

With the Remote Development extension pack, VS Code can open folders on remote machines, containers, or WSL as if they were local.

Remote Options

Quick Start: SSH Remote

# Install "Remote — SSH" extension
# Open Command Palette → Remote-SSH: Connect to Host

# Or open from terminal
code --remote ssh-remote+dev.example.com /path/to/project

# Add SSH hosts to your config (~/.ssh/config)
Host dev-server
  HostName 192.168.1.100
  User ubuntu
  IdentityFile ~/.ssh/id_ed25519Copy

Quick Start: Dev Containers

# Create .devcontainer/devcontainer.json in your project
{
  "name": "Node.js Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "forwardPorts": [3000],
  "extensions": ["dbaeumer.vscode-eslint"],
  "postCreateCommand": "npm install"
}

# Open Command Palette
# → Dev Containers: Reopen in ContainerCopy

17 Keyboard Shortcuts Reference Beginner

Windows/Linux keys shown. macOS: replace Ctrl → Cmd, Alt → Option.

General

Editing

Navigation

Search & Replace

Debugging

Terminal & Panel