Skip to content
New issue

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

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

Already on GitHub? # to your account

Force new lines when returning or assigning JSX markup #227

Open
igmoweb opened this issue Sep 22, 2020 · 1 comment
Open

Force new lines when returning or assigning JSX markup #227

igmoweb opened this issue Sep 22, 2020 · 1 comment

Comments

@igmoweb
Copy link
Contributor

igmoweb commented Sep 22, 2020

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"
		}]
...
@pdewouters
Copy link
Contributor

I vote for the second one

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

2 participants