What are the techniques for VS Code multi-cursor editing?

VS Code Multi-cursor Editing and Advanced Selection Techniques

VS Code multi-cursor editing allows editing code at multiple positions simultaneously, greatly improving editing efficiency. Combined with advanced selection techniques, you can quickly complete complex batch editing tasks.

Multi-cursor Creation Methods

Mouse Operations

1. Alt + Click: Add cursor at click position
2. Ctrl + Alt + Up/Down Arrow: Add cursor above or below
3. Ctrl + U: Undo last cursor

Keyboard Operations

1. Ctrl + Alt + Up/Down Arrow: Add cursor
2. Ctrl + Alt + Left/Right Arrow: Expand selection left or right

Quick Selection

1. Ctrl + D: Select next occurrence of current word
2. Ctrl + Shift + L: Select all occurrences of current word
3. Ctrl + F2: Select all instances of current word

Advanced Selection Techniques

Column Selection Mode

1. Shift + Alt + Drag: Column selection
2. Ctrl + Shift + Alt + Up/Down Arrow: Column selection expand

Smart Selection

1. Shift + Alt + →: Expand selection to next syntax unit
2. Shift + Alt + ←: Shrink selection
3. Ctrl + Shift + →: Expand selection to next word
4. Ctrl + Shift + ←: Shrink selection to previous word

Quick Navigation and Selection

1. Ctrl + G: Go to specific line
2. Ctrl + T: Go to symbol
3. Ctrl + Shift + O: Go to symbol in file
4. Ctrl + P: Quick open file

Practical Scenarios

Batch Variable Renaming

javascript
// Original code
const userName = 'John';
const userAge = 25;
const userEmail = 'john@example.com';

// Operation: Double-click userName, press Ctrl + D twice, then modify
const firstName = 'John';
const firstAge = 25;
const firstEmail = 'john@example.com';

Batch Property Modification

javascript
// Original code
const obj = {
  name: 'John',
  age: 25,
  email: 'john@example.com'
};

// Operation: Select all property names, add quotes
const obj = {
  'name': 'John',
  'age': 25,
  'email': 'john@example.com'
};

Batch Comment Addition

javascript
// Select multiple lines, press Ctrl + /
// const line1 = 'code';
// const line2 = 'code';
// const line3 = 'code';

Regex Find and Replace

Using Regular Expressions

1. Ctrl + H: Open find and replace
2. Alt + R: Enable regex mode
3. Ctrl + Alt + Enter: Replace all

Regex Examples

javascript
// Find: console\.log\((.*)\)
// Replace: console.info($1)

// Replace all console.log with console.info

Using Capture Groups

javascript
// Find: (\w+)\.(\w+)\((.*)\)
// Replace: $2($1, $3)

// Convert obj.method(args) to method(obj, args)

Advanced Editing Techniques

Multi-line Editing

1. Shift + Enter: Insert new line below current line
2. Ctrl + Enter: Insert new line above current line
3. Ctrl + Shift + K: Delete current line

Code Formatting

1. Shift + Alt + F: Format entire document
2. Ctrl + K, Ctrl + F: Format selected portion

Code Movement

1. Alt + Up/Down Arrow: Move current line
2. Shift + Alt + Up/Down Arrow: Copy current line

Code Folding

1. Ctrl + K, Ctrl + 0: Fold all
2. Ctrl + K, Ctrl + J: Unfold all
3. Ctrl + K, Ctrl + [: Fold current region
4. Ctrl + K, Ctrl + ]: Unfold current region

Custom Keyboard Shortcuts

Customize shortcuts in keybindings.json:

json
[
  {
    "key": "ctrl+shift+;",
    "command": "editor.action.insertCursorAtEndOfEachLineSelected",
    "when": "editorTextFocus"
  }
]

Important Notes

• Multi-cursor editing may affect performance with many cursors
• Use Ctrl + U to undo cursor operations
• Preview before regex replacement
• Record macros for complex operations
• Use selection history wisely (Ctrl + Shift + G)