0

0

VSCode怎么竖向选多个_VSCode多列选择与块编辑操作技巧教程

爱谁谁

爱谁谁

发布时间:2025-08-30 10:08:01

|

601人浏览过

|

来源于php中文网

原创

VSCode中实现多列选择主要通过快捷键与鼠标配合或纯键盘操作。1. 按Alt(Option)键点击可创建多光标,适用于不规则位置同步编辑;2. Shift+Alt(Shift+Option)拖拽实现矩形选择,适合垂直对齐的块编辑;3. Ctrl+Alt+方向键(Cmd+Option+方向键)可在多行间快速添加光标;4. Ctrl/Cmd+D逐个选中匹配项,Ctrl/Cmd+Shift+L全选所有匹配项,便于批量修改;5. 复杂场景可结合正则表达式查找替换,处理非规则文本。这些功能广泛应用于批量注释、数据格式化、代码重构等,显著提升编辑效率。

vscode怎么竖向选多个_vscode多列选择与块编辑操作技巧教程

在VSCode里进行竖向多列选择,主要依靠键盘修饰键和鼠标的配合,或者纯键盘操作来实现。最直接的方法是按住

Alt
键(macOS上是
Option
键)然后用鼠标点击你想要放置光标的多个位置。这样你就能在不同的行创建多个独立的光标,进行同步编辑。如果你想进行一个矩形区域的选择,也就是所谓的“块编辑”,可以按住
Shift + Alt
键(macOS上是
Shift + Option
键)然后用鼠标拖动,或者用方向键进行扩展。

解决方案

VSCode提供了几种高效的方法来实现多列选择和块编辑,它们各自适用于不同的场景。理解这些操作对于提升代码编辑效率至关重要,我个人在处理大量重复性文本时,简直离不开这些功能。

  1. 任意位置多光标(Multi-Cursor)选择

    • 操作:按住
      Alt
      键(Windows/Linux)或
      Option
      键(macOS),然后用鼠标在代码的任意位置点击。每次点击都会增加一个独立的光标。
    • 用途:当你需要同时修改不规则分布的多个点时,比如在几行代码的末尾统一添加分号,或者修改几个零散出现的变量名。
    • 示例
      const user = "Alice";
      let age = 30;
      var city = "New York";
      // 假设我想在每个赋值语句后都加上一个注释
      // 我会按住Alt/Option,分别点击 "Alice"; "30;" "New York;" 的后面
      // 然后输入 "// Comment"
  2. 矩形选择/块编辑(Column/Block Selection)

    • 操作:按住

      Shift + Alt
      键(Windows/Linux)或
      Shift + Option
      键(macOS),然后用鼠标拖动以选择一个矩形区域。或者,你也可以先放置一个光标,然后按住
      Shift + Alt
      键(Windows/Linux)或
      Shift + Option
      键(macOS)配合上下左右方向键来扩展选择区域。

    • 用途:当你需要对一个垂直对齐的代码块进行批量操作时,比如在多行变量声明前统一添加

      const
      ,或者删除一个数据列。

    • 示例

      // 原始代码
      id: 1,
      name: "Alice",
      email: "alice@example.com",
      
      // 假设我想在每个字段前都加上一个 'user.' 前缀
      // 我会按住Shift + Alt/Option,从 'id' 的 'i' 前开始向下拖动到 'email' 的 'e' 前
      // 然后输入 'user.'
      // 结果:
      user.id: 1,
      user.name: "Alice",
      user.email: "alice@example.com",
  3. 通过键盘添加光标

    • 操作:将光标放置在某一行,然后按
      Ctrl + Alt + Down
      (Windows/Linux)或
      Cmd + Option + Down
      (macOS)来在当前光标下方添加一个新光标。向上添加则是
      Ctrl + Alt + Up
      (Windows/Linux)或
      Cmd + Option + Up
      (macOS)。
    • 用途:当你需要快速在相邻的多行上创建光标,进行垂直对齐的编辑时,这比鼠标拖动更精确,尤其是在代码较长时。
    • 示例
      def func_a():
          pass
      def func_b():
          pass
      def func_c():
          pass
      # 假设我想在每个函数定义后面都加上一个 docstring 的起始引号
      # 我会把光标放在 func_a() 的括号后面
      # 然后按 Cmd/Ctrl + Alt + Down 两次
      # 这样三个光标就都创建好了,然后输入 '"""'

这些操作是我日常编码中不可或缺的利器,尤其是处理日志文件、CSV数据或者需要对API返回的JSON进行快速格式化时,效率提升简直是指数级的。

VSCode多光标选择,除了修改变量名,还能做什么?

很多初学者可能觉得多光标就是用来批量改个变量名,但实际上它的应用远不止于此。我个人觉得,一旦你掌握了多光标的精髓,你会发现它能解决许多看似繁琐的文本操作问题,而且比传统的查找替换更直观。

  • 批量添加/删除注释:选中多行,然后使用多光标在行首或行尾添加
    //
    /* ... */
    ,或者删除已有的注释符号。这对于快速调试或者暂时禁用部分代码非常方便。比如,你有一段旧代码,想暂时注释掉,但又不想删除,多光标就能帮你快速完成。
  • 数据格式化与转换:假设你从某个地方复制了一堆没有引号的字符串列表,你想把它们变成一个JavaScript数组。
    apple
    banana
    orange

    你可以用多光标在每行开头输入

    '
    ,在每行末尾输入
    ',
    ,瞬间就能得到:

    知识吐司
    知识吐司

    专注K12教育的AI知识漫画生成工具

    下载
    'apple',
    'banana',
    'orange',

    再稍微调整一下,就能变成一个合法的数组。

  • 生成重复代码结构:在编写HTML、CSS或任何结构化文本时,多光标能帮你快速生成重复的标签或属性。比如,你想创建一系列带有相同类名的
    div
    元素:

    你可以在一行写好

    ,然后复制粘贴,再用多光标在每个
    div
    之间添加内容。或者,如果你已经有了内容列表,可以先创建多行光标,然后输入

  • 快速重构代码片段:当你想把某个函数调用的参数顺序调整一下,或者在多个相似的函数调用中插入一个新的参数时,多光标就能派上用场。它允许你同时在多个位置进行精细的插入、删除或替换操作,而不是机械地重复复制粘贴。
  • 我经常用它来处理CSV数据,比如我有一个几百行的CSV文件,需要把某一列的数据用引号括起来,或者在某一列前加一个固定的前缀。用多光标配合块选择,几秒钟就能搞定,比写脚本或者用Excel处理快多了。

    当多光标选择不够用时:VSCode块编辑的进阶技巧

    多光标选择固然强大,但它也有局限性,尤其是在处理不规则文本时。当你的目标文本不在一个完美的矩形区域内,或者需要根据某种模式进行选择和编辑时,单纯的多光标可能就力不从心了。这时候,我们需要更强大的工具,比如正则表达式查找替换,或者结合其他VSCode功能。

    我遇到过最头疼的情况就是,想批量修改一些代码,但这些代码的长度不一,或者中间夹杂着一些无关的字符,导致矩形选择无法精确覆盖。比如,我想把所有

    foo.bar()
    改成
    foo.baz()
    ,但有些是
    foo.bar(param1)
    ,有些是
    foo.bar()
    ,还有些是
    obj.foo.bar()
    。这时候,多光标的鼠标点击或矩形选择就显得笨拙了。

    • 查找替换与正则表达式:这是解决不规则文本块编辑的终极武器。VSCode的查找替换功能(
      Ctrl/Cmd + H
      )支持正则表达式。
      • 示例:假设你想把所有
        console.log("some text")
        中的
        "some text"
        替换成
        'new text'
        • 查找:
          console\.log\("(.*?)"\)
        • 替换:
          console.log('new text')
        • 这里
          (.*?)
          是一个捕获组,匹配任意字符(非贪婪),你可以根据需要更精确地定义匹配模式。
      • 捕获组的应用:如果你想交换两个参数的顺序,比如把
        func(arg1, arg2)
        变成
        func(arg2, arg1)
        • 查找:
          func\((.*?), (.*?)\)
        • 替换:
          func($2, $1)
          $1
          $2
          分别代表第一个和第二个捕获组的内容。这种方法比手动多光标编辑要高效和安全得多。
    • Ctrl/Cmd + D
      选择下一个匹配项
      :这个快捷键和多光标有点像,但它更侧重于选择文本内容。当你选中一个单词,然后连续按
      Ctrl/Cmd + D
      ,VSCode会依次选中文档中该单词的下一个匹配项,并为每个匹配项添加一个光标。这对于全局性的变量重命名或者统一修改某个特定字符串非常有用。如果所有匹配项都被选中了,你可以用
      Ctrl/Cmd + Shift + L
      一次性选中所有匹配项。
    • 结合命令面板与扩展:VSCode的命令面板(
      Ctrl/Cmd + Shift + P
      )里有很多强大的文本处理命令。有时候,一些特定的文本转换任务,可能需要安装特定的扩展来完成,比如一些CSV或JSON处理的扩展,它们能提供更高级的块操作功能。

    我发现,很多时候,与其费劲地尝试用多光标去“框”出那些不规则的文本,不如直接切换到正则表达式的思维模式。它虽然学习曲线稍陡,但一旦掌握,处理复杂文本的效率会有一个质的飞跃。

    提升效率:VSCode多光标与块编辑的快捷键与最佳实践

    掌握了基本操作,下一步就是如何更高效地利用这些功能,并避免一些常见的“坑”。我个人觉得,熟练运用快捷键是提升效率的关键,同时也要清楚这些工具的适用场景。

    • 核心快捷键回顾与组合

      • Alt/Option + Click
        :自由多光标。这是最基础也最灵活的。
      • Shift + Alt/Option + Drag
        :矩形选择。适合规整的数据列。
      • Ctrl + Alt + Up/Down
        Cmd + Option + Up/Down
        :垂直添加光标。当你需要精确控制光标位置,或者处理较长的代码块时,这个比鼠标拖动更稳。
      • Ctrl/Cmd + D
        :选择当前选中内容的下一个匹配项并添加光标。非常适合快速重命名或修改重复出现的单词。
      • Ctrl/Cmd + Shift + L
        :选中所有匹配项并添加光标。当你确定要修改文档中所有某个字符串时,这是最快的。
    • 最佳实践建议

      • 先观察,再操作:在进行多光标编辑前,先快速浏览一下你想要修改的区域,确保你的选择策略是正确的。有时候,看起来是规整的块,实际上可能因为某一行有额外的空格或字符而导致选择不准确。
      • 从小范围开始:如果你不确定如何进行复杂的块编辑,可以先从一小段代码或几行文本开始尝试,验证你的操作是否符合预期,然后再扩展到更大的范围。
      • 善用撤销(
        Ctrl/Cmd + Z
        :多光标操作一旦失误,可能会导致大面积的错误。不要怕,
        Ctrl/Cmd + Z
        永远是你的好朋友。大胆尝试,错了就撤销。
      • 结合搜索功能:在某些情况下,你可以先用
        Ctrl/Cmd + F
        搜索到你想要修改的模式,然后利用
        Ctrl/Cmd + D
        Ctrl/Cmd + Shift + L
        来批量选择。这种组合拳往往比单纯的鼠标点击更高效。
      • 正则表达式是备用方案:当多光标操作无法优雅地解决问题时,不要硬撑。立刻考虑使用正则表达式进行查找替换。虽然可能需要一点学习,但它能解决多光标无法处理的复杂模式匹配和替换问题。
      • 理解工具的局限性:多光标和块编辑主要用于文本的同步修改。它不适合进行复杂的逻辑判断、条件替换或者基于上下文的修改。对于这些高级需求,你可能需要编写脚本或者使用更专业的文本处理工具。

    我个人在使用这些功能时,经常会在

    Ctrl/Cmd + D
    Shift + Alt/Option + Drag
    之间切换。如果目标是完全相同的字符串,
    Ctrl/Cmd + D
    几乎是首选;如果是垂直对齐的文本块,矩形选择就非常高效。关键在于根据实际情况灵活选择,而不是拘泥于某一种方法。练习得越多,你就能越快地做出正确的判断。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    js获取数组长度的方法
    js获取数组长度的方法

    在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

    559

    2023.06.20

    js刷新当前页面
    js刷新当前页面

    js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

    437

    2023.07.04

    js四舍五入
    js四舍五入

    js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

    776

    2023.07.04

    js删除节点的方法
    js删除节点的方法

    js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

    479

    2023.09.01

    JavaScript转义字符
    JavaScript转义字符

    JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

    554

    2023.09.04

    js生成随机数的方法
    js生成随机数的方法

    js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

    1091

    2023.09.04

    如何启用JavaScript
    如何启用JavaScript

    JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

    659

    2023.09.12

    Js中Symbol类详解
    Js中Symbol类详解

    javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

    554

    2023.09.20

    c++ 根号
    c++ 根号

    本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

    70

    2026.01.23

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    go语言零基础开发内容管理系统
    go语言零基础开发内容管理系统

    共34课时 | 2.6万人学习

    第二十三期_前端开发
    第二十三期_前端开发

    共98课时 | 7.5万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号