How do I select the insides of div in Visual Studio Code

Question

For example. I have

<div class="wrap>
 <div class="fu">
  bar
 </div>
</div>

How do I select with all it's contents with a shortcut key?

Notepad++ had this feature. When div contents get really long, it's annoying to scroll or collapse-select.

Answer 1

You can select it with an Emmet command, if you have your cursor somewhere inside the first tag, just use Emmet: Balance (outward) and Emmet: Balance (inward). If you are doing a lot of HTML, you can check for more Emmet commands if you simply type Emmet: in the command palette.

Because it's mentioned in the other answer:

What the "expand-region" plugin does, is somewhat supported by default, see this answer in another thread

This does not support shrinking/growing the selection around HTML-tags, but you can easily setup your shortcuts to use Emmet in HTML files and the aforementioned commands in every other file – on the same shortcut. Syntax for setting this is up looks like this (feel free to replace ctrl+up / ctrl+down to whatever you prefer):

{
    "key": "ctrl+up",
    "command": "editor.action.smartSelect.grow",
    "when": "editorTextFocus"
},
{
    "key": "ctrl+up",
    "command": "editor.emmet.action.balanceOut",
    "when": "editorTextFocus && editorLangId == html && editorHasSelection"
},
{
    "key": "ctrl+down",
    "command": "editor.action.smartSelect.shrink",
    "when": "editorTextFocus"
},
{
    "key": "ctrl-down",
    "command": "editor.emmet.action.balanceIn",
    "when": "editorTextFocus && editorLangId == html"
},

Just for clarification, the editorHasSelection part allows to expand inside strings on the first key press (e.g. for selecting/editing tag attributes).

Answer 2

As far as I know this is still not supported out of the box for HTML.

You could install extension expand-region, set it up as stated on the page and then use Ctrl+W (or any other shortcut you choose) to select the content of the element.