✨ Autocomplete angle bracketed components the same way braces are autocompleted

[knotbin]

Description

When a user uses angle brackets with a component, for instance typing <div>, and then presses enter, the system autocompletes that component, adding </div> on the line below the new current line and indents the new current line.

Alternatives Considered

No response

Additional Context

No response

Screenshots

[austincondiff]

This should probably only apply to html, xml, and jsx.
It should work like this…

1. User types < - no autocomplete occurs
2. User types tag name, <div - no autocomplete occurs
3. User types >, <div> - closing tag is autocomplete and is inserted directly after the opening tag. Cursor is placed in between tags. Eg. <div>|</div>
4. If user presses return, closing tag is moved to a new line, then cursor is placed on a new empty line and indented in between the other two lines. Eg…

<div>
    |
</div>

Note

Tag attributes should be ignored and not put in the closing tag. Eg. <div class="panel"></div>

[knotbin]

In addition to JSX and TSX, it should also apply to regular JS and TS files as JSX and TSX can be written inside regular JS and TS files.

[austincondiff]

@knotbin absolutely, good point! Would you be willing to take this one on?

[knotbin]

Sure @austincondiff!

[austincondiff]

You rock! Several additional considerations...

• Tags can be self closing, i.e. <div />, so we should not autocomplete when this is the case.
• Tag attributes can exist, so we should ignore these for the closing tag.
• Tag attrubutes can exist on multiple lines...

<div
    id="main"
    class="wrapper"
>
    |
</div>