在 HTML 中匹配标签的键盘快捷方式

37

在Visual Studio(2008)中,如果我在代码视图中想要找到匹配的HTML标记,是否有类似于CTRL+]的快捷键呢?

例如:

<table>
  <tr>
    <td>
    </td>
  </tr>
</table|>

光标位于结束table标签上,我想按下类似于CTRL+]的按键以跳转到开始的table标签。

有什么想法吗?


VS 2015支持此功能。请查看Steve Cooper的答案。 - Christian
@Christian - 我不确定它是否支持。它似乎支持在同一标记的开头<和结尾>之间跳转(即 <div>),但它不会像求助者所要求的那样在打开<div>标记和关闭</div>标记之间跳转。 - freefaller
10个回答

65

我搜索了一下,没找到直接的快捷方式。但是可以使用以下方法:

如果你想要跳转到起始匹配的HTML标签,按照以下步骤进行:

  1. 将光标放置在结束匹配的HTML标签上。
  2. 按下 Ctrl+M+M [折叠整个标签]
  3. 按下 Home 键 [将光标放置在起始标签之前]
  4. 按下 Ctrl+M+M [展开整个标签]

如果你想要跳转到结束匹配的HTML标签,按照以下步骤进行:

  1. 将光标放置在起始匹配的HTML标签上。
  2. 按下 Ctrl+M+M [折叠整个标签]
  3. 按下 End 键 [将光标放置在结束标签旁边]
  4. 按下 Ctrl+M+M [展开整个标签]

1
这似乎不是真正可以称之为快捷方式的东西。不过很聪明。 - bbill
3
聪明!对于XAML也适用。 - Kranach
1
Ctrl+]在2019年实际上是有效的。 - kub1x
1
@kub1x 不在我的VS中... Crtl+] 可以在标签内部的起始和结束位置之间移动... 但不能从起始标签移动到结束标签。 - Mick

13
在Visual Studio 2015中,现在支持使用常规括号匹配按键进行操作:
- ctrl+]可以跳转到开始标记的结束标记处。 - ctrl+shift+]可以选择开始标记和结束标记之间的所有内容。
不过这似乎很敏感,如果要选择整个标记及其内容,则需要从打开标记的<开始。

2
截至当前日期,这应该是最合适的答案。 - Christian
1
嗯...在VS2015中这对我不起作用。使用ctrl+]跳转从标签的开头<到标签本身的结尾>...它不是在打开的<div>标签和关闭的</div>标签之间跳转。 - freefaller
是的,正如我所说,它对光标的位置非常敏感,必须准确地位于小于号“<”之前。否则,它会随机跳到任何位置。 - Steve Cooper
Visual Studio Code怎么样? - Kyle Delaney
1
不确定之前的版本,但在VS2017中:当光标放置在开放标签名称或<上时,第一次按下Ctrl+]会跳转到开放标签的>,第二次按下Ctrl+]会跳转到关闭标签后的位置。第三次按下将返回到开放标签的第一个字符。沿途按住Shift进行选择/取消选择。根据个人喜好调整。太棒了! - kub1x

8

5

好的,这里是我建立的宏来执行开关操作,包括跳转到焦点:

这是演示:

enter image description here

以下是代码,请享用!

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports EnvDTE90
Imports EnvDTE90a
Imports EnvDTE100
Imports System.Diagnostics
Imports System.Windows.Forms

Public Module Module2
    Sub beginToEnd()

        'Place cursor somewhere in beginning tag, run macro, to select from beginning to End Tag

        DTE.ActiveDocument.Selection.SelectLine()
        Dim objSel As TextSelection = DTE.ActiveDocument.Selection
        Dim topPoint As TextPoint = objSel.TopPoint
        Dim lTopLine As Long = topPoint.Line
        objSel.GotoLine(lTopLine, False)
        '  DTE.ActiveDocument.Selection.StartOfLine()
        DTE.ActiveDocument.Selection.SelectLine()
        Dim line1 As String = DTE.ActiveDocument.Selection.Text()
        If InStr(line1, "</") Then

            ' MsgBox(line1)
            DTE.ExecuteCommand("Edit.ToggleOutliningExpansion")
            DTE.ActiveDocument.Selection.EndOfLine()
            DTE.ActiveDocument.Selection.StartOfLine(vsStartOfLineOptions.vsStartOfLineOptionsFirstText, True)
            objSel.GotoLine(lTopLine, False)
            DTE.ExecuteCommand("Edit.ToggleOutliningExpansion")
            DTE.ExecuteCommand("Edit.ToggleOutliningExpansion")


        Else

            DTE.ExecuteCommand("Edit.ToggleOutliningExpansion")
            DTE.ActiveDocument.Selection.EndOfLine(False)
            DTE.ExecuteCommand("Edit.ToggleOutliningExpansion")

        End If
        DTE.ActiveDocument.Selection.SelectLine()
        Dim line2 As String = DTE.ActiveDocument.Selection.Text()
        Dim objSel3 As TextSelection = DTE.ActiveDocument.Selection
        Dim topPoint3 As TextPoint = objSel3.TopPoint
        Dim lTopLine3 As Long = topPoint3.Line
        objSel.GotoLine(lTopLine3, False)
        DTE.ActiveDocument.Selection.StartOfLine(vsStartOfLineOptions.vsStartOfLineOptionsFirstText, False)


    End Sub



End Module

不再支持开箱即用。这需要使用 dev labs Visual Studio 扩展 https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.MacrosforVisualStudio - Mick

3
在Visual Studio 2012中,在“源”视图中,文档窗口底部有一个DOM的面包屑样式描述。您可以单击任何位置以进行选择。
这不是键盘快捷键,但它提供了您要查找的选择行为,并且您不再需要通过目测匹配标记。
(编辑)如果将鼠标悬停在面包屑上,您将看到一个下拉箭头。单击向下箭头,然后单击“选择标记内容”。然后,您只需向上或向下滚动,直到找到未高亮显示的文本即可。

如果你将鼠标悬停在面包屑上方,你会看到一个下拉箭头。点击箭头,你会看到一个选项"选择标签内容"。然后你可以向上或向下滚动,直到找到没有被突出显示的文本。 - Danimal111
是的,@DanB,这个功能在VS 2012中是可用的,但不知为何在vs 2015中却没有了,他们为什么要取消它?或者在VS中是否有一个选项可以像窗口一样显示它。我似乎找不到它。 - Costas Aletrari

2
当你使用XML编辑器(右键点击 -> 打开方式... -> XML编辑器)打开HTML文件时,这个方法是完全有效的。

2
哈哈,这太有趣了...现在我只需要在XML视图中设置HTML的智能感知。 - nikib3ro
1
是的,这应该是HTML文档的默认行为。也许它可以在XHTML文档中工作。如果默认情况下不起作用,您可以像这样向xml文档添加模式文件:http://msdn.microsoft.com/en-us/library/asct4hkz%28VS.71%29.aspx。这里是xhtml的模式:http://www.w3.org/TR/xhtml1-schema/#schemas。此外,您还可以按照此处的说明将xml模式添加到模式缓存中:http://msdn.microsoft.com/en-us/library/ms255816.aspx。希望这可以帮助您使用intellisense。 - Jorge Vargas
是的 - 我已经知道如何为某些类型添加智能感知 - 只是我可能不会做所有这些工作,只是让键盘快捷键起作用。如果我开始做任何事情 - 它可能是 AddIn 的编码,如果这不受支持的话。 - nikib3ro
就像我的一位老师所说的那样:嗯,你总是可以编程的 :P - Jorge Vargas

1
我正在使用Windows 10中的Visual Studio Code,当前版本为1.34.0。为了跳转到匹配的HTML标记,我通过“文件”->“首选项”->“键盘快捷方式”进行设置。搜索“匹配标签:跳转到匹配标签”..当你将鼠标悬停在它上面时会显示一个+,然后我设置了按键绑定Shift + ] ..只要这个按键没有用于其他功能,你可以设置自己的按键绑定。所以现在我能够跳转到闭合的HTML标记。希望能帮到你。

1
  • 解决方案对我有用:

按下ctrl+shift+p,这将打开命令面板,然后在搜索栏中写入emmet:go to matching pair

点击设置图标并设置您的快捷键(如果需要)。我使用ctrl+shift+/并按回车键。 它绝对有效。


0

不,你不能在Visual Studio 2010中这样做,无论是当前版本还是旧版本。也许下一个版本会有这个功能。


很好,你指出了这一点,否则人们可能会认为你在谈论未来。 - vidstige
3
你应该说明版本号,而不是使用“当前版本”。现在VS 2012已经发布,“当前版本”代表的含义与你原来想表达的不同。我们不得不查看消息日期才能弄清楚这一点。 - Tony_Henrich

0

使用这个简单的扩展程序VSCode Highlight Matching Tag,可以轻松实现跳转到匹配标签的功能。

安装后,您可以使用命令面板(Win/Linux:Ctrl+Shift+P;Mac:Cmd+Shift+P)并搜索命令名称:Jump to matching tag。或为该命令配置键盘快捷方式。以下是我个人使用shift+5作为示例:

  {
    "key": "shift+5",
    "command": "highlight-matching-tag.jumpToMatchingTag",
    "when": "editorLangId == html"
  }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接