Reputation: 20596

Matching tag in HTML keyboard shortcut

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?

Upvotes: 38

Answers (10)

Maelstrom

Reputation: 71

In Visual Studio 2022 Shift + Alt + ] highlights everything between the tags (inclusive and from either direction). Next, just arrow right (to jump to the end tag) or left (to jump to the beginning tag). Super NOT OBVIOUS, but haven't found anything better.

Upvotes: 0

Aashish Kumar

Reputation: 1006

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.

Upvotes: 0

JuliaJ

Reputation: 97

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.

Upvotes: 0

Steve Cooper

Reputation: 21480

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.

Upvotes: 13

Royi Namir

Reputation: 148524

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

Upvotes: 5

Steve Cooper

Reputation: 21480

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.

Upvotes: 4