visual-studio-code - 在 Visual Studio Code 中选择匹配元素/重命名 HTML 标记

Question

假设我有以下代码

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

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

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

Answer 1

V1.41正在添加此功能，请参阅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 当光标位于其中一个标签上时，您将看到一个带有光标的小输入框，用于输入新标签名称，并且开始/结束标签将被替换为您输入的任何内容上。

参见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-cursor ):

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

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正在更改镜像光标的默认状态:

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.

<小时/>

感谢下面 JerryGoyal 的回答(我已投票) - 我继续这个正在进行的回答。

因为我已经跟踪它半年多了，v1.44 再次重命名了它。来自 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).

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

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.

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

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