VS Code 跳转到匹配/结束标签

Posted 2023-02-21

【中文标题】VS Code 跳转到匹配/结束标签

【英文标题】：VS Code jump to matching/closing tag

【发布时间】：2022-01-17 19:53:03

【问题描述】：

在 Visual Studio Code 中，当光标位于 TSX 标记上时，我希望能够跳转到结束标记，因为它可能离开始标记有点远：

<MyComponent
  prop1="someValue"
  prop2=someOtherValue
>
  <OtherComponent1 />

  /* Some other code, many more lines...  */

</MyComponent>

那么当光标在<MyComponent> 的前4 行内时如何跳转到</MyComponent>，反之亦然？

我已经偶然发现了this SO question，但是 Ctrl + Shift + P --> "Emmet: Go to Matching对” 不起作用。 在 Marketplace 中搜索合适的 VS Code 扩展也没有发现任何结果。

有可能吗？

编辑： 将 <MyComponent> 更改为不再自动关闭。

【问题讨论】：

有些扩展会突出显示匹配的标签，我会朝这个方向发展并分叉以创建自己的扩展。或者只是使用/学习 VIM。

在学习VIM之前，我宁愿学习一门不需要的语言。 ????

【参考方案1】：

在示例代码中，标签 MyComponent 由于第 4 行的正斜杠而自动关闭。因此，Emmet 命令保留在此标签上，而不是像您期望的那样移动到第 8 行。

更新的代码 sn-p 没有 MyComponent 标记自动关闭：

<MyComponent
  prop1="someValue"
  prop2=someOtherValue
>
  <OtherComponent1 />

  /* Some other code, many more lines...  */

</MyComponent>

有了这个更新的例子 CTRL + SHIFT + P 然后“Emmet: Go to Matching Pair”可以正常工作。

按照您链接的帖子中的建议，您可以为命令 editor.emmet.action.matchTag 添加键绑定。

【讨论】：

不错的发现！！我想知道为什么 emmet 命令不起作用。

@ChrisC 你说得对。现在我完全困惑了！在我的生产代码中，<MyComponent> 标签不是自动关闭的，这实际上是我在我的问题中输入示例代码时犯的一个错误。 “去匹配对” emmet 从来没有为我工作过。但是现在当我在阅读您的答案后再次尝试时，它确实像一个魅力！不知道我的 VS 代码出了什么问题...也许是一些行为不端的扩展...

【参考方案2】：

使用扩展名multi-command 制作一个序列

Emmet: Balance outward Arrow Right

【讨论】：

不是我想要的——这个解决方案需要两个键绑定，一个用于结束标签，一个用于开始标签——但是一个很好的解决方法。谢谢。