Do not self-close component JSX tag on auto completion

When trying to autocomplete components in JSX, it self-closes the tag and puts my cursor after the tag.

E.g. when autocompleting

<CustomComp|

I get:

<CustomComponent />|

This is not helpful, because it takes me more steps to go back and be able to add attributes to it. And this is especially bad when I want to add children to the component, because I would have to manually remove the self-closing bit and do some other slow steps.

How can I get this result instead?

<CustomComponent|
4 comments
Comment actions Permalink

You can type

CustomComponent

and hit Tab - it will expand to

<CustomComponent></CustomComponent>
0
Comment actions Permalink

Unfortunately that is not auto-completion. I would have to write out the full name of the component myself for that.

0
Comment actions Permalink

There is not way to switch to non-self-closing tag when completing it; if you miss this option, please feel free to file a feature request to youtrack, https://youtrack.jetbrains.com/issues/WEB

Note that you can generate a closing tag using Expand empty tag intention available on Alt+Enter:

0

Please sign in to leave a comment.