36
votes

Is there a shortcut in Visual Studio (2008) that will allow me to jump to matching HTML tag... as CTRL+] does for matching braces when you are in code view?

Example:

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

Cursor is on closing table tag and I would like to press something like CTRL+] to jump to opening table tag.

Any ideas?

10
VS 2015 supports that. Please, see the answer from Steve Cooper.Christian
@Christian - I'm not sure it does. It appears to support jumping between the opening < and closing > of the same tag (i.e. <div>), but it doesn't jump between the opening <div> tag and closing </div> tag as requested by the OPfreefaller

10 Answers

5
votes

Ok here is the answer as macro which i've built which does it (toggle ) including go to focus :

Here is the demo :

enter image description here

And here is the code , enjoy !

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
64
votes

I search and couldn't found direct short cut. But you can use..

If you want to go starting matching HTML tag, then follow below steps.

  1. Place cursor at ending matching HTML tag.
  2. Press Ctrl+M+M [To Collapse entire tag]
  3. Press Home Key [To place cursor at before starting tag]
  4. Press Ctrl+M+M [To Expand entire tag]

If you want to go ending matching HTML tag, then follow below steps.

  1. Place cursor at starting matching HTML tag.
  2. Press Ctrl+M+M [To Collapse entire tag]
  3. Press End Key [To place cursor next to ending tag]
  4. Press Ctrl+M+M [To Expand entire tag]
13
votes

In Visual Studio 2015, this is now supported with the usual bracket matching keystrokes;

  • ctrl+] jumps from the start tag to the end tag.
  • ctrl+shift+] selects everything between the start tag and the end tag.

It seems pretty sensitive, though, and to select an entire tag and its contents you need to start right on the < that opens the tag.

8
votes

After http://www.jetbrains.com/resharper/ is installed CTRL+] for matching braces works in HTML edit mode...

3
votes

In Visual Studio 2012, in 'source' view, right at the bottom of the document window, there is a breadcrumb-trail-style description of the DOM. You can click at any point to select.

It's not a keyboard shortcut, but it does give you the selection behaviour you're looking for, and you don't need to match tags by eye any more.

(Edit) If you hover over the breadcrumb, you will see a dropdown arrow. Click the down arrow and click "Select Tag Content". Then you can just scroll up or down until you find text that is not highlighted.

2
votes

This totally works when you open a HTML file with the XML Editor (Right click -> Open With... -> XML Editor).

1
votes

I am using Visual Studio Code in Windows 10. Currently version 1.34.0. To jump to the matching html tag, I set it up through File -> Preferences -> Keyboard Shortcuts. Look for "Matching Tag: Jump to matching tag" .. There's a + when you hover it, then I set keybinding Shift + ] .. you can set your own as long as it isn't used for another function. So now I am able to jump to the closing HTML tag. Hope this helps.

1
votes
  • SOLUTION WORK FOR ME:

press ctrl+shift+p this opens command pallete , after that write emmet:go to matching pair in search bar.

Click on setting icon and set your shortcut key(if you want). I uses ctrl+shift+/ and press enter. It definitely works.

0
votes

No, you can't do that in Visual Studio 2010, not in the current version or in older ones. Maybe the next version will have this feature.

0
votes

Jump to matching tag functionality is easily achieved with this simple extension: VSCode Highlight Matching Tag

Once installed, you may use Command Palette (Win/Linux: Ctrl+Shift+P; Mac: Cmd+Shift+P) and search command name: Jump to matching tag. Or configure keyboard shortcut for that command. Here is my example of key binding for shift+5 in my case:

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