Find closing HTML tag in Sublime Text

HtmlSublimetext

Html Problem Overview


I have a very long and very nested HTML document, where I need to quickly find the closing tag. How can I do this?

Html Solutions


Solution 1 - Html

Try Emmet plug-in command Go To Matching Pair:

http://docs.emmet.io/actions/go-to-pair/

Shortcut (Mac): Shift + Control + T

Shortcut (PC): Control + Alt + J

https://github.com/sergeche/emmet-sublime#available-actions

Solution 2 - Html

There is a shortcut (Ctrl+Shift+A for Windows and Linux users, Command+Shift+A for Mac users) to select the whole block within the currently selected tag.

For example, if you pressed this while your text cursor was within the outer div tag in the code below, all the divs with class selected would be selected.

<div class='current_tag_block'>
  <div class='selected'></div>
  <div class='selected'></div>
  <div class='selected'></div>
  <div class='selected'></div>
</div>

As @frazer-kirkman mentioned in a comments you can also move your cursor to the start or to the end of the selected block by pressing either Left or Right button on a keyboard depending on your cursor's position

Solution 3 - Html

It's built in from Sublime Editor 2 at least. Just press the following and it balances the HTML-tag

Shortcut (Mac): Shift + Command + A

Shortcut (Windows): Control + Alt + A

Solution 4 - Html

Under the "Goto" menu, Control + M is Jump to Matching Bracket. Works for parentheses as well.

Solution 5 - Html

None of the above worked on Sublime Text 3 on Windows 10, Ctrl + Shift + ' with the Emmet Sublime Text 3 plugin works great and was the only working solution for me. Ctrl + Shift + T re-opens the last closed item and to my knowledge of Sublime, has done so since early builds of ST3 or late builds of ST2.

Solution 6 - Html

As said before, Control/Command + Shift + A gives you basic support for tag matching. Press it again to extend the match to the parent element. Press arrow left/right to jump to the start/end tag.

Anyway, there is no built-in highlighting of matching tags. Emmet is a popular plugin but it's overkill for this purpose and can get in the way if you don't want Emmet-like editing. Bracket Highlighter seems to be a better choice for this use case.

Solution 7 - Html

I think, you may want to try another approach with folding enabled.

In both ST2 and ST3, if you enable folding in User settings:

{
    ...(previous item)
    "fold_buttons": true,
    ...(next item, thus the comma)
}

You can see the triangle folding button at the left side of the line where the start tag is. Click it to expand/fold. If you want to copy, fold and copy, you get all block.

enter image description here

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPavel BinarView Question on Stackoverflow
Solution 1 - HtmlMikko OhtamaaView Answer on Stackoverflow
Solution 2 - HtmljeffsamaView Answer on Stackoverflow
Solution 3 - HtmlK. Kilian LindbergView Answer on Stackoverflow
Solution 4 - HtmlJeremy RossView Answer on Stackoverflow
Solution 5 - HtmlbranditoView Answer on Stackoverflow
Solution 6 - HtmlwortwartView Answer on Stackoverflow
Solution 7 - HtmlWesternGunView Answer on Stackoverflow