coding-standards icon indicating copy to clipboard operation
coding-standards copied to clipboard

Force new lines when returning or assigning JSX markup

Open igmoweb opened this issue 5 years ago • 1 comments

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"
		}]
...

igmoweb avatar Sep 22 '20 15:09 igmoweb

I vote for the second one

pdewouters avatar Feb 10 '21 13:02 pdewouters