Fatal编程技术网
  • visual-studio-code/
  • Visual studio code 在Visual Studio代码中选择匹配元素/重命名HTML标记

Visual studio code 在Visual Studio代码中选择匹配元素/重命名HTML标记

visual-studio-code

Visual studio code 在Visual Studio代码中选择匹配元素/重命名HTML标记,visual-studio-code,Visual Studio Code,假设我有以下代码 <div class="footer"> <div>Foo</div> </div> 福 如何将.footer从div元素更改为footer元素 也就是说，如果光标位于div中，我将寻找一个键盘快捷键，用于选择元素的开始和结束标记。我相信我以前在Sublime中使用过emmet，但在代码中似乎找不到类似的功能。（理想情况下，这也适用于JSX文件…我正在使用标记重命名。按标记上的

假设我有以下代码

    <div class="footer">
      <div>Foo</div>
    </div>


福
如何将
.footer
从
div
元素更改为
footer
元素

也就是说，如果光标位于
div
中，我将寻找一个键盘快捷键，用于选择元素的开始和结束标记。我相信我以前在Sublime中使用过emmet，但在代码中似乎找不到类似的功能。（理想情况下，这也适用于JSX文件…

我正在使用标记重命名。按标记上的F2键，它将重命名开始和结束标记

我正在使用标记重命名。按标记上的F2键，它将重命名开始和结束标记

是否要重命名成对的标记？如果是，有一种更简单的方法：只需安装扩展。重命名一个HTML标记时，它将自动重命名成对的HTML标记

是否要重命名成对的标记？如果是，有一种更简单的方法：只需安装扩展。重命名一个HTML标记时，它将自动重命名成对的HTML标记

您可以使用快捷键
cmd+D
（Mac OS）将下一个匹配元素添加到选择中，然后可以同时编辑打开和关闭标记

您可以使用快捷键
cmd+D
（Mac OS）将下一个匹配元素添加到选择中，然后可以同时编辑打开和关闭标记

在windows上按住CTRL+D组合键。正如@tataata所提到的，Mac OS上的CMD+D。不限于标记重命名。非常有用。

windows上的CTRL+D。正如@tataata所提到的，Mac OS上的CMD+D。不限于标记重命名。非常有用。

您可以使用Emmet Update Tag进行此操作，无需扩展

  • 将光标放在开始标记中
  • 按CTRL+SHIFT+P打开命令选项板
  • 通过键入诸如“em up t”之类的内容搜索“Emmet:Update Tag”，并/或在列表中找到它
  • 按enter键选择“Emmet:更新标签”
  • 输入新标签
  • 按回车键
    • 开始和结束标记将更新为新标记。

    您可以使用Emmet Update tag进行此操作，无需扩展

  • 将光标放在开始标记中
  • 按CTRL+SHIFT+P打开命令选项板
  • 通过键入诸如“em up t”之类的内容搜索“Emmet:Update Tag”，并/或在列表中找到它
  • 按enter键选择“Emmet:更新标签”
  • 输入新标签
  • 按回车键
    • 开始和结束标记将更新为新标记。

    V1.41正在添加此功能，请参阅

    HTML重命名标记

    现在可以使用F2重命名HTML中的开始/结束标记对

    当光标位于其中一个标记上时，您将得到一个带有光标的小输入框，用于输入新的标记名称，并且开始/结束标记将替换为您键入的任何标记

    看

    另外，v1.41中刚刚添加的“镜像标签”功能也很有趣（）：

    在标记内单击将在匹配的开始或结束标记中创建另一个光标

    VS代码现在在编辑HTML标记时添加了一个“镜像光标”。 此行为由设置控制 
    html.mirrorCursoronMachingtag
    ，默认情况下处于启用状态

    ----------v1.42正在更改镜像光标的默认状态：

    默认情况下关闭HTML镜像光标

    我们已经使镜像光标成为一个可选功能。在即将到来的 在迭代中，我们将继续改进它的实现，以实现这一点 功能更易于理解，可供更多语言使用。 通过启用，您仍然可以使用此功能 
    html.mirrorCursoronMachingtag

    感谢JerryGoyal下面的回答（我投了更高的票）——我继续回答这个问题

    因为我已经跟踪它半年多了，v1.44再次将其重命名。发件人：

    同步区域

    我们改进了去年11月引入的镜像光标功能 使用名为Synced Regions的新实现。目前这个 该功能可用于HTML，您可以通过 以下方法：

    在HTML标记（绑定到）上运行命令
    On Type Rename Symbol
    默认情况下，Ctrl+Shift+F2）

    打开
    editor.renameOnType
    设置并将光标移动到HTML标记

    红色区域是同步区域。顾名思义，任何变化 在一个区域中，将同步到其他区域。您可以退出此模式 将光标移出区域或按
    ESC
    。 此外，键入或粘贴任何以空格开头的内容 在任何区域中，都会退出此模式

    我们期待着提供一个API来实现这一点 对其他语言（如JSX）可用的类型经验进行重命名， XML，甚至TypeScript中的局部变量

    正如最后一部分所指出的，它在html开箱即用中工作，但其他语言需要自己实现。截至2020年6月，通过我的测试，它在嵌入html标记的jsx文件中仍然不起作用

    您必须在您的设置中启用此功能，默认情况下此功能处于关闭状态

    V1.41正在添加此功能，请参阅

    HTML重命名标记

    现在可以使用F2重命名HTML中的开始/结束标记对

    当光标位于其中一个标记上时，您将得到一个带有光标的小输入框，用于输入新的标记名称，并且开始/结束标记将替换为您键入的任何标记

    看

    另外，v1.41中刚刚添加的“镜像标签”功能也很有趣（）：

    在标记内单击将在匹配的标记中创建另一个光标 
    "editor.linkedEditing": true