Add space in self closing tags before in self closing tags

ReactjsIntellij IdeaPycharmWebstormEslint

Reactjs Problem Overview


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.

Reactjs Solutions


Solution 1 - Reactjs

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

enter image description here

Solution 2 - Reactjs

The .editorconfig way.

[**]
ij_html_space_inside_empty_tag = true

Here's how you find the name of any option. The same IDEA Code Style page has a gear button with an option to export to .editorconfig: enter image description here But this exports all the options, it's a 1070 line file in my case. So you export once to cfg1, change the desired setting through UI, export again to cfg2, and then compare the two configs to find the one option that changed.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPoyanView Question on Stackoverflow
Solution 1 - ReactjsPoyanView Answer on Stackoverflow
Solution 2 - ReactjsVsevolod GolovanovView Answer on Stackoverflow