Indent JSX expression with indented newline the same way as vanilla JS

This block of code is formatted by IntelliJ auto-formatter:

const jsx = (
<div>
{ some_expression &&
<span>
Some Text
</span>
}
</div>
);

I would like the inner `<span>` to be indented:

const jsx = (
<div>
{ some_expression &&
<span>
Some Text
</span>
}
</div>
);

In the same way that a newline `&&` is indented in vanilla JS:

let result = some_expression
&& other_expression;

Is there an option for this in JSX? Is there any reason JSX shouldn't always format like the latter rather than the current behavior?

2
2 comments

Not currently possible, please votye for https://youtrack.jetbrains.com/issue/WEB-25338 to be notified on any progress with it

0

If anyone is looking for a workaround to this, you can wrap the element after the condition with parenthesis and have the desired indentation:

{!hasId && (
<PropertyField
label={t('Devices')}
value={openAsset?.devices}
isEditing={isEditing}
xs={12}
/>
)}
1

Please sign in to leave a comment.