Is there a nice way to select / navigate between 2 ends of an input tag with nested input tags

Question

The best example I have is found in some of the react development I do, where I may have a component like

<MyComponent
   foo={bar}
   leftFooSection={<FooBar/>}
   ...
   label={'yes'} />

and I want to select everything form the starting < to the final /> inclusively.

obviously things like vat or vit work well when you have a proper closing tag, but is there anything that works for when you don't?

Currently using vi< or vi> will only select up to the inner />. I'm hoping to select all the way down to the final /> of the actual component

Answer 1

To visual-select everything inside the angle brackets, you can use the i> and a> (i< and a< will work as well) motions. Typing vi> will select everything inside the tag.

This will also work for nested structures as explained in :help i>.

If your cursor is already inside the inner angle brackets, supply a count such as v2i> to select the outer brackets. Or just leave them first with e.g. ^, $, j or whatever applies to get out.

To jump to the other end of a visual selection, o can be used.