Menu
How do you include a space before the closing tags in self closing tags with WebStorm/IntelliJ-based products?
Default settings turns <ReactComp /> to <ReactComp/>, which is against one of the rules (jsx-space-before-closing) in the commonly used AirBNBs Javascript style guide.
301
The fact is there is no need to close self closing tags by a slash /> at the end of the tag. Although many people use it but there is no meaning of slash at the end of the start tag even though you use it is ignored by the browsers.
A self-closing tag is an element of HTML code that has evolved in the language. Typically, the self-closing tag makes use of a “/” character in order to effectively close out a beginning tag enclosed in sideways carets.
↑ The full list of valid self-closing tags in HTML5 is: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, and wbr.
The Self-Closing Tag In XML and XHTML, a self-closing tag is a shorthand notation for an opening and closing tag in one. It's used to communicate lack of content in between the opening and closing tags. So, rather than typing <p></p> (with no space at all in between), you'd be able write <p/> .
Maybe a little confusingly, the setting is under "HTML" code style and not the JS code style in IntelliJ.
Enable the setting "In empty tag" in Preferences -> Editor -> Code Style -> HTML.
When you do an explicit reformat the space will be added. To ensure that the space is added when autocompleting React components, check the same box in in the Preferences -> Editor -> Code Style -> XML -> Other tab.
Screenshot from 2016-10-12, IntelliJ IDEA 2016.2
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
