Add space in self closing tags before in self closing tags

reactjs intellij-idea pycharm webstorm eslint
Poyan picture Poyan · Oct 12, 2016 · Viewed 10.5k times · Source

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.

Answer

Poyan picture Poyan · Oct 12, 2016

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

Related questions

Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More