Search code examples
webstormjsx

WebStorm - JSX formatting, break line before custom components

Consider the following:

<MuiThemeProvider
            muiTheme={getMuiTheme(darkBaseTheme)}><Button>Stuff!</Button><MyComponent><AnotherComponent>Content</AnotherComponent>
</MuiThemeProvider>);

For whatever reason, all components defined are treated as inlines, which means WebStorm's formatting doesn't break lines & indent them by default.

Specifying the component name in Settings | Editor | Code Style | HTML | Other | Insert new line before doesn't do a thing.

Please tell me how to make WebStorm insert a newline and indent properly all custom JSX components.

Solution

  • You can add line breaks manually and ensure that Keep line breaks in text is enabled in Settings | Editor | Code Style | HTML, Other.

    Please check/vote for WEB-37966