New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Force new lines when returning or assigning JSX markup #227

Open

igmoweb opened this issue Sep 22, 2020 · 1 comment

Labels

enhancement eslint

Contributor

igmoweb commented Sep 22, 2020 •

edited

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 added enhancement eslint labels

Contributor

pdewouters commented Feb 10, 2021

I vote for the second one

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment