Is there a way to display an HTML tag tree to quickly select blocks of code?

This is a feature I really like in Dreamweaver, and is basically the only reason why I still use it from time to time.

DW has two different versions. When you click a tag, it selects all code within the tag, and the opening and closing tags themselves. This is very useful because I have to swap blocks of code around quite often.


Does this exist somewhere that I’m not seeing? Or is there a package I can use?


I don’t know of any HTML packages (they may exist, I just don’t use HTML), but Tree-sitter has a close approximation built in. In the command prompt, run Editor: Select Larger Syntax Node (you should see a default shortcut for it too), and it will select the grammar node of the most recent cursor. Repeated use will select higher nodes, until it selects the entire document. For HTML, these nodes will mostly correspond to the tags. Note strings and other “structures” also count as nodes, so doing this inside a tag wll probably select it’s attibutes and such first.

I recall telling you before to disable Tree-sitter though; note the above only works with Tree-sitter. The TextMate grammar has no concept of nodes… Actually, it kind of does, but I believe the HTML grammar was written in a way that makes it flat on all but a select few tags.