VS Code 多光标编辑技巧
VS Code 的多光标编辑功能可以大幅提高编码效率。
基础操作
扩展光标
- 方法1:
Ctrl + D - 选中当前单词,按多次扩展选中 - 方法2:
Ctrl + Shift + L - 选中所有相同单词
const x = 1; const y = 2; const z = 3;
let x = 1; let y = 2; let z = 3;
|
快速选中相同单词
console.log("Hello"); console.log("World"); console.log("Test");
|
高级多光标操作
删除行
Shift + Alt + Up/Down - 复制当前行到上方/下方Shift + Alt + Down - 删除当前行并插入到下方
选中行范围
选中单词
Ctrl + Shift + Right/Left - 选中单词
插入光标
Alt + Click - 在任意位置点击插入光标Ctrl + Alt + Up/Down - 垂直方向添加光标Ctrl + J - 合并光标
匹配光标
Ctrl + Shift + K - 选中匹配的括号
实战案例
案例1: 批量修改代码
const x = 1; const y = 2; const z = 3;
console.log(x); console.log(y); console.log(z);
|
案例2: 格式化代码
function add(a, b) { return a + b; }
|
案例3: 重构变量名
const userName = "张三"; const userEmail = "zhangsan@example.com";
const user = "张三"; const user = "zhangsan@example.com";
|
案例4: 批量注释
const a = 1; const b = 2; const c = 3;
|
配置快捷键
自定义多光标快捷键
{ "editor.multiCursorModifier": "ctrlCmd", "editor.multiCursorPaste": "spread" }
|
推荐配置
{ "editor.multiCursorPaste": "spread",
"editor.search.multiCursorSelection": "active",
"editor.quickSuggestions": { "other": true, "comments": false, "strings": true } }
|
多光标插件
推荐插件
- Cursorless - 增强的光标操作
- Multi-Cursor Search - 多光标搜索
- Text Actions - 文本操作增强
Cursorless 用法
Ctrl + Shift + P → “Cursorless” 命令- 使用手势控制光标操作
常见快捷键总结
| 快捷键 | 功能 |
|---|
Ctrl + D | 选中下一个相同单词 |
Ctrl + Shift + L | 选中所有相同单词 |
Alt + Click | 插入光标 |
Ctrl + Alt + Up/Down | 垂直添加光标 |
Ctrl + J | 合并光标 |
Shift + Alt + Up/Down | 复制/删除行 |
Ctrl + L | 选中行 |
Ctrl + K Ctrl + D | 快速选中下一个 |
进阶技巧
智能选择
选中块
批量替换
最佳实践
- 适度使用:避免过度使用影响可读性
- 注意范围:确保在合适范围内使用
- 配合撤销:Ctrl + Z 快速撤销误操作
多光标编辑是提升开发效率的利器,多加练习!