Multi-cursor Editing Techniques in VS Code

Published: September 25, 2024 | Reading time: 10 minutes

Essential Multi-cursor Shortcuts

Master these techniques to edit multiple locations simultaneously:

Core Shortcuts

Alt+Click - Add cursor at click position
Ctrl+D - Select next occurrence
Ctrl+Shift+L - Select all occurrences
Ctrl+Alt+Up/Down - Add cursor above/below
Shift+Alt+Drag - Column selection

Understanding Multi-cursor Editing

Multi-cursor editing allows you to:

Edit multiple locations - Type simultaneously at different positions
Bulk operations - Apply changes to multiple similar elements
Column editing - Edit rectangular blocks of text
Pattern-based editing - Select and modify repeated patterns

Basic Multi-cursor Techniques

1. Adding Cursors with Alt+Click

The most intuitive way to add multiple cursors:

Alt+Click Example

// Before: Click on each "name" to add cursors
const firstName = "John";
const lastName = "Doe";
const email = "john@example.com";

// After: All cursors positioned, type to edit simultaneously
const firstName = "Jane";    // â† Cursor here
const lastName = "Smith";    // â† Cursor here  
const email = "jane@example.com";  // â† Cursor here

2. Selecting Next Occurrence (Ctrl+D)

Gradually select similar text patterns:

Ctrl+D Workflow

// Step 1: Select "user" (first occurrence)
const user = { name: "John", age: 30 };
const admin = { name: "Jane", age: 25 };
const guest = { name: "Bob", age: 35 };

// Step 2: Press Ctrl+D to select next "user"
const user = { name: "John", age: 30 };  // â† Selected
const admin = { name: "Jane", age: 25 };
const guest = { name: "Bob", age: 35 };

// Step 3: Press Ctrl+D again to select "guest"
const user = { name: "John", age: 30 };  // â† Selected
const admin = { name: "Jane", age: 25 };
const guest = { name: "Bob", age: 35 };  // â† Selected

3. Select All Occurrences (Ctrl+Shift+L)

Instantly select all instances of the current word:

Select All Example

// Select "console" and press Ctrl+Shift+L
console.log("Debug message 1");
console.log("Debug message 2");
console.log("Debug message 3");

// All "console" instances selected simultaneously
console.log("Debug message 1");  // â† All selected
console.log("Debug message 2");  // â† All selected
console.log("Debug message 3");  // â† All selected

Advanced Multi-cursor Techniques

4. Column Selection (Shift+Alt+Drag)

Select rectangular blocks of text for column editing:

Column Selection Example

// Before: Select column of variable names
const firstName = "John";
const lastName = "Doe";
const email = "john@example.com";
const phone = "123-456-7890";

// After: Column selection allows editing variable names
const firstName = "John";     // â† Selected column
const lastName = "Doe";       // â† Selected column
const email = "john@example.com";  // â† Selected column
const phone = "123-456-7890"; // â† Selected column

// Type to replace all variable names simultaneously

5. Adding Cursors Above/Below (Ctrl+Alt+Up/Down)

Add cursors at the same column position:

Vertical Cursor Addition

// Position cursor at start of first line
function processData() {
    const result = [];
    const items = getItems();
    const processed = items.map(item => {
        return transform(item);
    });
    return result;
}

// Press Ctrl+Alt+Down multiple times to add cursors
function processData() {        // â† Cursor here
    const result = [];         // â† Cursor here
    const items = getItems();  // â† Cursor here
    const processed = items.map(item => {  // â† Cursor here
        return transform(item);
    });
    return result;
}

Practical Use Cases

HTML/JSX Element Editing

React Component Refactoring

// Before: Select all "className" attributes

    Product Name
    Product description
    


// After: Multi-cursor editing to change all to "class"

    Product Name
    Product description

CSS Property Editing

CSS Bulk Editing

// Before: Select all margin properties
.header { margin: 20px; }
.content { margin: 15px; }
.footer { margin: 10px; }

// After: Change all margins to padding
.header { padding: 20px; }
.content { padding: 15px; }
.footer { padding: 10px; }

JSON/Configuration Editing

Config File Updates

// Before: Select all "localhost" values
{
  "api": "http://localhost:3000",
  "db": "http://localhost:5432",
  "cache": "http://localhost:6379"
}

// After: Change all to production URLs
{
  "api": "https://api.example.com",
  "db": "https://db.example.com",
  "cache": "https://cache.example.com"
}

Advanced Selection Techniques

6. Expand Selection (Shift+Alt+Right)

Gradually expand selection to larger contexts:

Selection Expansion

// Step 1: Select "name"
const user = { name: "John", age: 30 };

// Step 2: Shift+Alt+Right expands to "name:"
const user = { name: "John", age: 30 };

// Step 3: Shift+Alt+Right expands to "name: "John""
const user = { name: "John", age: 30 };

// Step 4: Shift+Alt+Right expands to entire object
const user = { name: "John", age: 30 };

7. Smart Selection with Regex

Use regex patterns for complex selections:

Regex Selection

// Find all console.log statements
console\.log\(.*?\);

// Find all function declarations
function\s+\w+\s*\(

// Find all import statements
import\s+.*\s+from\s+['"].*['"];

Multi-cursor with Find and Replace

8. Find All and Replace

Bulk Find/Replace

// Use Ctrl+Shift+F to find in all files
// Pattern: const (\w+) = require\(['"]([^'"]+)['"]\);
// Replace: import $1 from '$2';

// Before
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

// After
import express from 'express';
import mongoose from 'mongoose';
import cors from 'cors';

Tips and Best Practices

Efficiency Tips

Selection Tips

Use Ctrl+D for gradual selection
Use Ctrl+Shift+L for instant selection
Combine with regex for complex patterns
Use column selection for structured data

Editing Tips

Type slowly with multiple cursors
Use undo (Ctrl+Z) to revert multi-cursor changes
Test on small sections first
Save before bulk operations

Common Mistakes to Avoid

Avoid These Mistakes

- Don't select too many cursors at once
- Don't forget to save before bulk operations
- Don't use multi-cursor for complex refactoring
- Don't ignore context when selecting patterns

- Start with small, controlled selections
- Use version control for safety
- Test changes incrementally
- Consider the impact of bulk changes

Extension Recommendations

Multi-cursor Extensions

Helpful Extensions

// Multi-cursor enhancing extensions
- Multi-cursor Improved
- Select By
- Text Power Tools
- Regex Previewer
- Bracket Pair Colorizer

Summary

Mastering multi-cursor editing will dramatically improve your productivity:

Basic techniques: Alt+Click, Ctrl+D, Ctrl+Shift+L
Advanced techniques: Column selection, vertical cursors
Practical applications: HTML, CSS, JSON editing
Best practices: Start small, test incrementally, use version control

Need More Help?

Want to master advanced multi-cursor techniques or need help with specific editing scenarios? Our productivity experts can help you optimize your editing workflow.

Get Editing Help