在 Visual Studio Code 中选择匹配的元素/重命名 HTML 标签 [英] Select matching element/rename HTML tag in Visual Studio Code

问题描述

假设我有以下代码

 
<div>Foo</div>

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

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

解决方案

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

同样令人感兴趣的可能是刚刚在 v1.41 中添加的镜像标签"功能(

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

<块引用>

VS Code 现在在您编辑 HTML 标签时添加了镜像光标".此行为由设置控制html.mirrorCursorOnMatchingTag，默认开启.

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

<块引用>

HTML 镜像光标默认关闭

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

<小时>

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

因为我已经跟踪了半年多了，v1.44 再次重命名了它.来自

<块引用>

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

我们期待提供可以实现这一目标的 API重命名类型体验可用于其他语言，例如 JSX，XML，甚至是 TypeScript 中的局部变量.

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

您必须在设置中启用它，它默认关闭.

Let's say I've got the following code

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

How can I change .footer from a div element to a footer element?

That is, if I have the cursor in div I'm looking for a keyboard shortcut that selects the opening and closing tags of an element. I believe I've used emmet to do this before in Sublime, but I can't seem to find similar functionality in Code. (Ideally this would work in JSX files too...)

解决方案

V1.41 is adding this functionality, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-rename-tags

HTML rename tags

You can now use F2 to rename the opening/closing tag pairs in HTML.

F2 when the cursor is over one of the tags and you will get a little input box with the cursor to input the new tag name and the start/end tags will be replaced with whatever you type upon .

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

Also of interest might be the "mirror tags" functionality just added in v1.41 as well (https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-mirror-cursor):

Clicking inside a tag will create another cursor in the matching start or end tag.

VS Code now adds a "mirror cursor" when you are editing HTML tags. This behavior is controlled by the setting html.mirrorCursorOnMatchingTag, which is on by default.

---------- v1.42 is changing the default status of the mirror cursor:

HTML Mirror Cursor off by default

We have made Mirror Cursor an opt-in feature. In the upcoming iteration, we'll continue to improve its implementation to make this feature more easily understandable and available to more languages. You can still use this feature by turning on html.mirrorCursorOnMatchingTag.

---

Thanks to JerryGoyal's answer below (I have upvoted it) - I have continued with this ongoing answer.

Because I have been tracking this for over half a year now, v1.44 has renamed this once again. From Synced Regions:

Synced Regions

We have improved the mirror cursor feature introduced last November with a new implementation called Synced Regions. Currently this feature is available for HTML and you can try it out by one of the following ways:

Running the command On Type Rename Symbol on an HTML tag (bound to Ctrl+Shift+F2 by default).

Turning on the editor.renameOnType setting and move the cursor to an HTML tag.

The red regions are Synced Regions. As their name suggests, any change in one region will be synced to other regions. You can exit this mode by either moving your cursor out of the regions or pressing ESC. Additionally, typing or pasting any content leading with a whitespace in any region exits this mode.

We look forward to providing an API that could make this rename-on-type experience available to other languages such as JSX, XML, or even local variables in TypeScript.

As that last part notes, it works in html out of the box but other languages need to implement themselves. As of June 2020 by my testing it still does not work in jsx files on embedded html tags.

You must enable this in your settings, it is off by default.

这篇关于在 Visual Studio Code 中选择匹配的元素/重命名 HTML 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！