如果说VSCode里哪个功能让人忍不住感叹“这也太爽了”，多光标编辑绝对排在前列。它告别了重复的机械操作——不用一遍遍地手动粘贴、替换、修改。

VSCode自身内置了文本处理命令。

加上第三方扩展的补充，多光标的灵活性翻倍上涨。

这篇文章带你系统性地玩转多光标，从基础操作到实战技巧，一次聊透。

内容大纲

如何添加多光标

通用的方法

按住 键不放，然后在你想要添加光标的任何地方直接点击鼠标。

没错，就这么简单。 每点一下，就多一个光标。

添加光标的快捷键

更高效的办法是用快捷键。

通过 +K,+S 打开快捷键设置页面，搜索 cursor 就能看到所有和光标相关的快捷键。

搜索 add cursor 则直接定位到添加光标的相关命令：

同一列添加光标：

• ++↓：在下一行同一列添加光标
• ++↑：在上一行同一列添加光标

添加选区

VSCode里可以同时存在多个光标，也可以同时存在多个选区。

有意思的是，大多数添加选区的命令，在添加选区的同时也会顺带添加一个光标。

所以，利用这些选区快捷键也能达到添加多光标的效果。

常用的有：

• +D：把选区扩展到下一个查找到的匹配，每次按都多一个匹配选中
• ++L：一次性选中所有查找到的匹配

注意，这两个快捷键虽然和查找有关，但使用时并不会弹出搜索框。

它们直接在当前文档中查找当前选中内容（或光标所在单词）的匹配。

VSCode的快捷键设计有个明显的对称性：既然有 +D 是添加下一个匹配，那大概率也有一个命令是添加上一个匹配。

果不其然，在快捷键表中能找到相应的绑定。

如果要查找的文本比较复杂，比如包含大小写、特殊符号等，可以先打开搜索面板（+F）。

利用搜索框提供的“大小写忽略”“全词匹配”“正则表达式”等高级选项，然后点击搜索框右边的“选中所有匹配项”按钮（或直接按 ++L）来一次性选中所有结果。

如果已经有一个选区（比如选中了多行文本），可以用 ++I 在所有选区的行尾添加光标。

这时如果想统一将光标移到行首，按下 Home 键即可。

来看一个例子：选中多行代码，用这个技巧将所有行尾添加光标，然后批量将 TypeScript 的 interface 属性改成用逗号分隔：

光标移动

多光标编辑时，鼠标定位就不太方便了——毕竟光标一多，鼠标点不准。

所以必须依赖键盘来移动光标。基础的上下左右箭头、Home、End 键自然不用说。

更常见的是单词级别的移动，或者按驼峰命名法的组件移动。

搜索 cursor right、cursor end 等可以查看所有与光标移动相关的快捷键：

单词级别的移动特别实用：

• +→：向右移动到下一个词尾
• ^++→：向右移动到单词的下一部分（驼峰拆解，词首和词尾都是停留点）

对称性再次出现：有向右的，就有向左的。

+→ 对应 +← 向左移动到上一个词首。

还有一个值得注意的规律：几乎所有和光标相关的快捷键都带 键。

所以自定义快捷键时，也推荐给光标相关操作带上 。

比如可以定义 +J 移动到上一个 git change 处，+K 移动到下一个 git change 处——既方便记忆，也方便在快捷键表中统一搜索。

有些 Mac 用户可能会觉得光标移动速度太慢，这个可以在系统设置 → 键盘中调节：

把按键重复速度调快，光标移动就会更丝滑、更跟手。

选中文本

多光标编辑时最常见的操作无非就是移动、选中、删除、插入。

仔细观察会发现一个规律：几乎所有的移动操作，加上 键就变成了对应的选中操作。

举几个例子：

• → 是向右移动一个字符，+→ 就是向右选中一个字符
• ↑ 是向上移动一行，+↑ 就是向上选中一行
• +→ 是向右移动到词尾，++→ 就是选中到词尾
• ^++→ 是向右移动到单词的下一部分，+^++→ 就是向右选中单词的一部分

有个单独值得一提的选中命令是智能选中（smart select）。

我们知道 +D 可以选中一个单词，但如果想选中一个带引号的字符串或者括号内的内容，就没那么好使了。

这时候就可以用智能选中来层层展开选择范围。

• ^++→：扩大选中范围
• ^++←：减小选中范围

最近 antfu 写了一个用双击来智能选中文本的扩展（vscode-smart-clicks）。虽然不直接属于多光标编辑，但体验上也很流畅，感兴趣的读者可以试试。

删除文本

Mac 上 +→ 相当于 End 键，+← 相当于 Home 键，fn+ 相当于 Delete（向前删除）——这个规则在大多数应用中都是通用的。

• +：向左删除到词首
• ^++：向左删除一个单词的一部分

因为删除操作本身带有方向性（Backspace 向左，Delete 向右），所以快捷键中不需要再搭配方向键。

文本处理命令

多光标编辑时，借助 VSCode 内置或第三方扩展的文本处理命令，可以快速插入、转换或删除特定文本。

VSCode内置的有下面几个（以单词 letterCase 为例）：

• Transform to Uppercase：LETTERCASE
• Transform to Lowercase：lettercase
• Transform to Title Case：LetterCase
• Transform to Snake Case：letter_case

搜索 transform to 就能找到所有文本转换命令：

举个实际例子：将一堆小驼峰的常量批量改成全大写。操作起来行云流水：

除了内置的，第三方扩展也值得推荐。

这里提一下 Text Power Tools——维护积极，功能丰富。

它的能力覆盖面很广，比如插入递增数字、大小写转换、排序去重等等。

如果能看到这里，说明你已经有折腾的欲望了，不妨去扩展市场看看它的详情页。

下面只演示一下插入数字的功能：

有能力的读者也可以自己编写 VSCode 扩展去实现更多文本处理命令。

需要注意的是，实现时必须遍历所有选区，这样才支持多光标编辑。

例如笔者开发的扩展 VSCode FE Helper 中有一个将选中单词变复数的功能，代码大致如下（注意到了遍历所有选区）：

import { TextEditor } from 'vscode';

export default async function plur(editor: TextEditor): Promise {
  const { default: pluralize } = await import('pluralize');
  editor.edit((editorBuilder) => {
    const { document, selections } = editor;
    for (const selection of selections) {
      const word = document.getText(selection);
      const pluralizedWord = pluralize(word);
      editorBuilder.replace(selection, pluralizedWord);
    }
  });
}

多光标实战示例

下面演示几个平时工作中高频使用的多光标场景。

对新手来说可能看着步骤有点多，但实际操作几遍就会觉得不过如此。

平时用的时候也不一定像演示里那么丝滑，偶尔也会按错键，但没关系——+Z是永远的后盾。

替换 var

从 StackOverflow 抄了一段 JS 代码，里面全是 var。用多光标替换成 let 快如闪电：

步骤：

1. 将光标定位到第一个 var 上
2. 按 ++L 选中所有 var
3. 直接输入 let

安装多个 node package

新开一个项目，需要安装一堆 eslint 插件。

之前的方式是跑到旧项目的 package.json 里一个个复制包名，太慢。换成多光标：

步骤：

1. 打开旧项目的 package.json，把光标定位到第一个包名上
2. 按 ++↓ 向下添加多个光标，覆盖所有要安装的包名
3. 按 ^++→ 使用 smart select 选中完整的包名，然后 +C 复制
4. 新建一个临时文件（+N），粘贴过去
5. 把光标移动到第二行行首，按 ++↓ 往下面同一列添加多光标
6. 先按 删除行首空格，再敲一个空格，整个文本就可以直接复制到终端了

重构 react router path 为枚举

原始代码：

function App() {
  return (
    
      
        } />
        } />
        } />
        } />
      
    
  );
}

重构为枚举形式：

export function App() {
  return (
    
      
        } />
        } />
        } />
        } />
      
    
  );
}

enum RoutePath {
  Settings = '/settings',
  Collection = '/collection',
  NotFound = '/notFound',
}

这个例子里用到了文本处理命令来处理大小写转换（字符串转枚举键名），步骤比较多，直接看动图演示更直观：

实现 LetterMapper 类型

在 TypeScript 类型体操中，有一个将字符串字面量所有字母转为大写的工具类型，需要手写一个 LetterMapper 映射所有小写字母到大写字母。

手工敲 26 个映射太浪费时间了，用多光标编辑能秒杀：

type LetterMapper = {
  a: 'A';
  b: 'B';
  c: 'C';
  // ... 省略
  z: 'Z';
};

具体操作看动图演示：

多光标编辑之外的选择

VSCode 之所以被称为编辑器界的“新生代王者”，在于它集成了大量提升效率的特性。

除了多光标，还有：

• F2 重命名符号：批量替换变量名，能直接用这个就别用多光标
• Snippets：曾经看到有人说花一下午手写 React 组件，结果别人一个 snippet 就搞定
• Code Actions On Save：保存时自动添加缺失的 import、格式化、lint 自动修复等
• Auto fix 和 fix all：如果用了自动保存，无法使用 Code Actions On Save，可以手动调用自动修复
• 格式化扩展：Prettier 格式化代码风格，JS/TS Import/Export Sorter 格式化 imports 顺序等等

作为一个和 VSCode 打了多年交道的老用户，也常常觉得还有很多功能没挖掘到。

折腾编辑器、折腾 shell、折腾系统，号称程序员三大乐趣。

正因为未知才有趣，每次发现新功能都会感叹“原来还能这样用”。

总结

多光标编辑是 VSCode 里一个非常实用的功能。

掌握光标的移动、选中、删除以及常用的文本处理命令，能让你在多光标编辑时更加得心应手。

VSCode 的快捷键设计有其独到的哲学——对称性、统一修饰键等。

理解它不仅能帮你更快记忆快捷键，还能在需要搜索时精准定位。

自定义快捷键或编写扩展时，也建议遵循这套哲学。

如果你觉得当前编码或重构效率不如意，不妨花点时间折腾一下编辑器，没准会有意外惊喜。

本文完。