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

Question

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

ala*_*moo 48 visual-studio-code

假设我有以下代码

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

如何.footer从div元素更改为footer元素？

也就是说,如果我有光标,div我正在寻找一个选择元素的开始和结束标签的键盘快捷键.我相信我之前在Sublime中使用过emmet来做这件事,但我似乎无法在Code中找到类似的功能.(理想情况下,这也适用于JSX文件...)

Answer 1

Jun*_*Han 59

要重命名配对标签吗？如果是,则有一种更简单的方法:您只需要安装自动重命名标记扩展.重命名一个HTML标记时,它将自动重命名配对的HTML标记.

这应该是标准行为. (21认同)
不再需要自动删除标签。现在，这是 VS Code 中内置的功能 https://code.visualstudio.com/updates/v1_41#_html-rename-tags (4认同)
请注意：此扩展程序无法正常运行，通常会导致CPU瘫痪。这应该内置在vscode中。 (2认同)

Answer 2

Mar*_*ark 49

V1.41 正在添加此功能，请参阅 https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-rename-tags

HTML 重命名标签

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

F2 当光标位于其中一个标签上时，您会得到一个带有光标的小输入框，用于输入新的标签名称，开始/结束标签将被替换为您输入的任何内容。

请参阅https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#html-mirror-cursor-off-by-default

同样感兴趣的可能是刚刚在 v1.41 中添加的“镜像标签”功能（https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-mirror-光标）：

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

当您编辑 HTML 标签时，VS Code 现在会添加一个“镜像光标”。此行为由设置控制html.mirrorCursorOnMatchingTag，默认情况下该设置处于启用状态。

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

HTML 镜像光标默认关闭

我们已将镜像光标设为可选功能。在即将到来的迭代中，我们将继续改进其实现，以使此功能更易于理解并适用于更多语言。您仍然可以通过打开来使用此功能 html.mirrorCursorOnMatchingTag。

感谢 JerryGoyal 在下面的回答（我已经投了赞成票） - 我继续这个正在进行的回答。

因为我已经跟踪了半年多了，v1.44 再次将其重命名。从同步区域：

同步区域

我们改进了去年 11 月推出的镜像光标功能，并使用了一个名为“同步区域”的新实现。目前此功能可用于 HTML，您可以通过以下方式之一进行试用：

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

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

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

我们期待提供一种 API，使这种重命名类型体验可用于其他语言，例如 JSX、XML，甚至 TypeScript 中的局部变量。

正如最后一部分所指出的，它可以在 html 中开箱即用，但其他语言需要自己实现。根据我的测试，截至 2020 年 6 月，它仍然无法在嵌入 html 标签的 jsx 文件中使用。

您必须在设置中启用它，默认情况下它是关闭的。

Answer 3

Chr*_*ris 16

您可以使用Emmet Update Tag在没有扩展名的情况下执行此操作

将光标放在开始标记中
按CTRL + SHIFT + P打开命令选项板
通过键入诸如"em up t"之类的内容搜索"Emmet:Update Tag",和/或在列表中找到它
按enter键选择"Emmet:Update Tag"
输入新标签
按enter键

开始和结束标记更新为新标记.

即使这有效，这也是非常乏味的......应该更简单。 (3认同)

Answer 4

Jer*_*yal 12

2021 年 3 月更新：

不需要扩展，这现在已经被编入了 VSCode。

"editor.linkedEditing": true

Run Code Online (Sandbox Code Playgroud)

在此处阅读更多信息：https : //code.visualstudio.com/Docs/languages/html#_auto-update-tags

它已被弃用，现在称为 `Linked Editing` -> `"editor.linkedEditing": true` (2认同)
对于 jsx、tsx 文件，您需要使用“自动重命名标记”分机。 (2认同)

Answer 5

tat*_*ata 8

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

Answer 6

SIL*_*ENT 8

在Windows上按CTRL + D. 正如@tataata,Mac OS上的CMD + D所提到的那样.不限于标记重命名.很有用.

这绝对不是重命名.这只是多项选择.这意味着,如果你有一个`div`并且在里面你有一个句子例如"有些人很惊人"然后你不会重命名结束div但是"div"来自"个人"... ,如果你有多个/嵌套元素是相同的,那就说3嵌套div.您尝试重命名第一个或第二个,它将无法正常工作. (9认同)
这应该是答案。 (2认同)

归档时间：	9 年，5 月前
查看次数：	16869 次
最近记录：	7 年前