Advanced Editing Features
Learning Objectives
- Master multi-cursor editing for ultra-fast code manipulation
- Use Emmet for rapid HTML/CSS generation
- Leverage IntelliSense and code actions effectively
- Implement refactoring techniques
- Use advanced selection and text transformation
- Automate repetitive editing tasks
Multi-Cursor Power
Creating Multiple Cursors
Methods:
Alt+Click → Add cursor at click position
Ctrl+Alt+↑/↓ → Add cursor above/below
Ctrl+D → Select next occurrence
Ctrl+Shift+L → Select all occurrences
Alt+Shift+I → Insert cursor at end of each selected line
Alt+Shift+Drag → Column selection
Practical Multi-Cursor Examples
Example 1: Add semicolons to multiple lines
// Before:
const name = "John"
const age = 30
const city = "NYC"
// Steps:
// 1. Select all three lines
// 2. Alt+Shift+I (cursor at end of each line)
// 3. Type ;
// After:
const name = "John";
const age = 30;
const city = "NYC";
Example 2: Convert array to object properties
// Before:
['name', 'email', 'phone', 'address']
// Steps:
// 1. Select 'name'
// 2. Ctrl+D three times (selects all words)
// 3. Ctrl+→ to move cursors after words
// 4. Type : "",
// After:
[name: "", email: "", phone: "", address: ""]
Example 3: Wrap multiple lines in quotes
// Before:
apple
banana
cherry
// Steps:
// 1. Alt+Shift+I (cursor at end of each line)
// 2. Type "
// 3. Home key (move to start)
// 4. Type "
// After:
"apple"
"banana"
"cherry"
Column Selection
Box/rectangle selection:
Alt+Shift+Drag (Windows/Linux)
Option+Shift+Drag (Mac)
Or: Ctrl+Alt+↑/↓
Use case:
# Before:
def func1():
def func2():
def func3():
# Add 'pass' to all:
# 1. Column select after ':'
# 2. Type ' pass'
# After:
def func1(): pass
def func2(): pass
def func3(): pass
Emmet
HTML Emmet
Shortcuts:
<!-- Type: div.container>ul>li*3>a -->
<!-- Press Tab -->
<div class="container">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Common Patterns:
! → HTML boilerplate
div.class#id → <div class="class" id="id"></div>
ul>li*5 → List with 5 items
table>tr*3>td*4 → 3x4 table
.item$*3 → <div class="item1/2/3"></div>
lorem → Lorem ipsum text
CSS Emmet
/* Type: m10 → margin: 10px; */
/* Type: p10-20 → padding: 10px 20px; */
/* Type: dF → display: flex; */
/* Type: jcC → justify-content: center; */
/* Type: fz16 → font-size: 16px; */
Custom Emmet
settings.json:
{
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true
}
IntelliSense Mastery
Trigger IntelliSense
Ctrl+Space → Trigger suggestions
Ctrl+Shift+Space → Trigger parameter hints
Ctrl+. → Quick fix / code actions
IntelliSense Features
1. Auto-completion:
// Type: "arr" → Suggests: Array, ArrayBuffer, etc.
// Type: "cons" → Suggests: console, const, constructor
2. Parameter info:
function greet(name: string, age: number) { }
greet( // Ctrl+Shift+Space shows parameters
3. Quick info:
// Hover over any symbol → Shows type, documentation
Code Actions
Trigger: Ctrl+. on any code
Examples:
// Lightbulb appears when code actions available
// 1. Import missing module
// 2. Implement interface
// 3. Add missing function
// 4. Convert to arrow function
// 5. Extract to function/variable
Refactoring
Built-in Refactorings
Extract to Function:
// Before:
function processUser() {
const fullName = user.firstName + " " + user.lastName;
console.log(fullName);
}
// 1. Select: user.firstName + " " + user.lastName
// 2. Ctrl+Shift+R → "Extract to function"
// 3. Name: getFullName
// After:
function getFullName(user) {
return user.firstName + " " + user.lastName;
}
function processUser() {
const fullName = getFullName(user);
console.log(fullName);
}
Rename Symbol: F2
// Renames ALL occurrences across ALL files
const userName = "John";
console.log(userName);
// F2 on userName → Rename to: currentUser
// Updates everywhere automatically
Extract to Constant:
// Before:
if (age > 18) { }
if (age > 18) { }
// 1. Select "18"
// 2. Ctrl+Shift+R → "Extract to constant"
// After:
const MINIMUM_AGE = 18;
if (age > MINIMUM_AGE) { }
if (age > MINIMUM_AGE) { }
Language-Specific Refactoring
TypeScript:
- Convert to template string
- Add/remove braces
- Convert import
- Infer function return type
- Generate 'get' and 'set' accessors
Python:
- Extract method
- Extract variable
- Sort imports
- Remove unused imports
Advanced Selection
Smart Selection (Expand/Shrink)
Shift+Alt+→ → Expand selection
Shift+Alt+← → Shrink selection
Example:
console.log(user.profile.email);
// Start cursor on 'email'
// Shift+Alt+→ once: selects 'email'
// Again: 'user.profile.email'
// Again: '(user.profile.email)'
// Again: 'console.log(user.profile.email)'
Select All Occurrences
Ctrl+F2 → Select all occurrences of current word
Use case:
// Rename variable instantly
const userName = "John";
const greeting = `Hello ${userName}`;
console.log(userName);
// 1. Cursor on userName
// 2. Ctrl+F2
// 3. Type new name: currentUser
// All occurrences renamed!
Line Selection
Ctrl+L → Select current line
Ctrl+Shift+L → Select all lines with current selection
Text Transformation
Case Transformation
Transform to Uppercase → Ctrl+K Ctrl+U
Transform to Lowercase → Ctrl+K Ctrl+L
Transform to Title Case → Install "Change Case" extension
Join Lines
Ctrl+J → Join selected lines
Example:
// Before:
const name =
"John";
// Select both lines, Ctrl+J
// After:
const name = "John";
Sort Lines
Ctrl+Shift+P → "Sort Lines Ascending"
Ctrl+Shift+P → "Sort Lines Descending"
Example:
zebra
apple
banana
→ Sort Ascending →
apple
banana
zebra
Trim Trailing Whitespace
{
"files.trimTrailingWhitespace": true // Auto-trim on save
}
Or manually:
Ctrl+Shift+P → "Trim Trailing Whitespace"
Code Folding
Fold/Unfold
Ctrl+Shift+[ → Fold region
Ctrl+Shift+] → Unfold region
Ctrl+K Ctrl+0 → Fold all
Ctrl+K Ctrl+J → Unfold all
Ctrl+K Ctrl+[1-7] → Fold level 1-7
Fold Regions
Custom folding:
// #region Database Functions
function connect() { }
function query() { }
function disconnect() { }
// #endregion
// Folded shows: "Database Functions..."
Language-specific:
# region Data Processing
def process(): pass
# endregion
Format Document
Auto-Format
Shift+Alt+F → Format entire document
Ctrl+K Ctrl+F → Format selection
Format on Save:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
}
}
Organize Imports
Shift+Alt+O → Organize imports (remove unused, sort)
Auto-organize on save:
{
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
}
}
Advanced Find & Replace
Regex Find & Replace
Example: Convert to template literals
// Find (regex):
console\.log\("(.+)" \+ (.+) \+ "(.+)"\)
// Replace:
console.log(`$1${$2}$3`)
// Before:
console.log("User: " + userName + " logged in")
// After:
console.log(`User: ${userName} logged in`)
Multi-File Find & Replace
Ctrl+Shift+H → Find & Replace in files
Options:
- Match case (Alt+C)
- Whole word (Alt+W)
- Regex (Alt+R)
- Files to include
- Files to exclude
Example:
Find: oldFunctionName
Replace: newFunctionName
Files to include: **/*.ts
Click "Replace All" → Updates across entire project
Productivity Tricks
Duplicate Line
Shift+Alt+↓ → Duplicate line down
Shift+Alt+↑ → Duplicate line up
Move Line
Alt+↑ → Move line up
Alt+↓ → Move line down
Delete Line
Ctrl+Shift+K → Delete line
Insert Line
Ctrl+Enter → Insert line below
Ctrl+Shift+Enter → Insert line above
Comment Toggle
Ctrl+/ → Toggle line comment
Shift+Alt+A → Toggle block comment
Bracket Matching
Ctrl+Shift+\ → Jump to matching bracket
Pro Tips
Tip 1: Record Macros (Experimental)
Install "Macros" extension:
1. Record action sequence
2. Assign keyboard shortcut
3. Replay anytime
Tip 2: Snippets for Common Patterns
Create snippet:
// User snippets
{
"Try-Catch": {
"prefix": "tryc",
"body": [
"try {",
" $1",
"} catch (error) {",
" console.error('$2:', error);",
" $3",
"}"
]
}
}
Tip 3: Zen Mode for Focus
Ctrl+K Z → Toggle Zen Mode
Fullscreen, no distractions, just code.
Tip 4: Sticky Scroll
{
"editor.stickyScroll.enabled": true
}
Shows current function/class at top while scrolling.
Tip 5: Linked Editing
{
"editor.linkedEditing": true
}
Edit HTML opening tag → closing tag updates automatically!
Common Pitfalls
Pitfall 1: Accidental Multi-Cursor
Problem: Cursors everywhere, don't know how to escape
Solution: Esc key clears all cursors
Pitfall 2: Emmet Not Working
Problem: Tab doesn't expand Emmet Solution:
{
"emmet.triggerExpansionOnTab": true
}
Pitfall 3: Wrong Formatter
Problem: Format on save uses wrong formatter Solution: Set per language
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Pitfall 4: Find & Replace Too Broad
Problem: Replaced wrong occurrences Solution:
- Use "Match whole word" (Alt+W)
- Preview before "Replace All"
- Use "Files to include" filter
Assessment
Master Advanced Editing:
-
Multi-Cursor Challenge:
- Convert array to object in 30 seconds
- Add quotes to 20 words simultaneously
-
Emmet Challenge:
- Create complex HTML structure with one line
- Generate CSS properties with shortcuts
-
Refactoring Challenge:
- Extract 5 functions from monolithic code
- Rename variables across 10 files
-
Find & Replace Challenge:
- Convert 50 console.log to template literals
- Regex replace across project
Success Criteria:
- Comfortable with multi-cursor
- Emmet muscle memory
- Refactoring workflows mastered
- 5x faster editing
Resources
Time: 3-4 hours Difficulty: Intermediate to Advanced Completion: Congratulations! You've mastered VS Code!