VSCode 又酷又实用的多光标编辑

VSCode 又酷又实用的多光标编辑

💡 原文中文,约7500字,阅读约需18分钟。
📝

内容提要

本文介绍 VSCode 多光标编辑技巧,包括添加与移动光标、选中和删除文本,并说明其快捷键设计哲学:光标相关快捷键含 Option/Alt,搭配 Shift 选中、搭配 Backspace 删除,且具对称性。还介绍内置文本转换命令、第三方扩展及实战示例,并提醒重命名符号、替换、Snippets 等更优选择。

🔎

延伸解读

快捷键设计哲学:Option 键与对称性

文章指出 VSCode 光标相关快捷键都包含 Option(Windows 为 Alt)键,搭配 Shift 变为选中,搭配 Backspace 变为删除,且左右对称。理解这一规律后,只需记住移动快捷键,就能推导出选中和删除操作,无需死记硬背。自定义快捷键时也应遵循此哲学,便于记忆和搜索。

多光标编辑的适用场景与替代方案

多光标适合批量修改相似文本,如替换 var 为 let、安装多个包、重构路由等。但文章提醒,重命名符号(F2)更安全,批量替换文本可用替换功能,Snippets 能快速生成代码,Code Actions On Save 可自动修复。根据场景选择合适工具,而非一味使用多光标。

文本处理命令与扩展增强灵活性

VSCode 内置文本转换命令(如 Transform to Uppercase)可快速改变选中文本的大小写风格。第三方扩展 Text Power Tools 提供更多功能,如插入数字。开发者也可编写扩展处理所有选区,实现自定义文本操作,从而在多光标编辑时批量处理。

❓

Q&A

VSCode 多光标编辑有哪些常用的添加光标方法?

按住 Option(Mac)或 Alt(Windows)键点击任意位置可添加光标;使用快捷键如 Cmd+Option+↓/↑ 在上下行同一列添加光标;通过添加选区的快捷键如 Cmd+D 或 Cmd+Shift+L 也能添加多光标。

VSCode 多光标编辑时如何快速选中所有匹配项?

使用 Cmd+Shift+L(Mac)或 Ctrl+Shift+L(Windows)可以添加选区到所有查找到的匹配项,从而选中所有相同文本。

VSCode 中光标移动和选中、删除的快捷键有什么设计规律?

光标移动快捷键通常包含 Option/Alt 键;搭配 Shift 变为选中移动区域;搭配 Backspace 变为删除移动区域;且具有对称性,如向右移动是 Option+→,向左则是 Option+←。

VSCode 内置的文本转换命令有哪些?

包括 Transform to Uppercase、Transform to Lowercase、Transform to Title Case、Transform to Snake Case 等,可通过搜索 'transform to' 找到所有命令。

除了多光标编辑,VSCode 还有哪些提高重构效率的功能?

F2 重命名符号、替换所有(跨文件或标签内)、Snippets、Code Actions On Save、auto fix 和 fix all、各种格式化扩展(如 Prettier)等。

如何用多光标编辑快速将多个 var 替换为 let?

将光标放在 var 上,按 Cmd+Shift+L 选中所有 var,然后直接输入 let 即可替换。

🏷️

标签

➡️

继续阅读