coding-standards
coding-standards copied to clipboard
Force new lines when returning or assigning JSX markup
Right now, this JSX snippet passes our standards with no warnings:
const IconCheck = () => {
return ( <SVG xmlns="https://www.w3.org/2000/svg" width="30" height="23" viewBox="0 0 30 23" fill="none">
<Path d="M27.586 0L9.52803 18.058L2.41401 10.9439L0 13.358L9.52803 22.886L30 2.41401L27.586 0Z" fill="#48277F" />
</SVG> );
};
But this as well:
const IconCheck = () => {
return (
<SVG xmlns="https://www.w3.org/2000/svg" width="30" height="23" viewBox="0 0 30 23" fill="none">
<Path d="M27.586 0L9.52803 18.058L2.41401 10.9439L0 13.358L9.52803 22.886L30 2.41401L27.586 0Z" fill="#48277F" />
</SVG>
);
};
My proposal is to use one of them instead of both possibilities and I think that the second one is more clear. It takes just 3 lines to fix:
...
"react/jsx-wrap-multilines": [ "error",{
"declaration": "parens-new-line",
"assignment": "parens-new-line",
"return": "parens-new-line"
}]
...
I vote for the second one