-
Notifications
You must be signed in to change notification settings - Fork 19
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.
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
Enforce props alphabetical sorting #75
Comments
I'm 👎 on requiring alphabetization of component properties. We experimented with it at my last company, and it was a consistent distraction and annoyance for the majority of the team. While the intent is good, in practice it means that you usually can't group related props together, and spend more time (even with I'd also argue that this papers over the bigger issue of, if you have a component that includes so many properties you need to order them, then it should probably be split up into different components or you should use containers further down in the tree. tl;dr, we tried it, tor three projects in a row it got cited as more trouble than it was worth. I'm in favor of alphabetical ordering of imports (Ryan's proposed ("absolute, then relative, then side effects, with a blank line between each'), and I'm fine with this being an optional rule we can add per-project, but I will do what I can to prevent |
Broke import sorting out into a separate issue so we can discuss separately. |
@kadamwhite Sounds a good reason to me. Thanks! |
I'm re-opening this issue because it is stated in our coding standards that we should have props in alphabetical order. Personally I'm 👍 on enforcing the ordering, but i'm not too hung up either way. However I don't think it should really be in the written coding standards if we're not enforcing the rule in our linters. If its optional, may as well remove it! This has already caused some confusion for @BronsonQuick. I think the rule for sorting HTML properties would be covered by react/jsx-sort-props, but we could add sort-keys too. |
I recognize that my comment above represents a personal bias, but it is a strong personal bias 😁, so I've proposed humanmade/Engineering#124 to bring the engineering guide in line with the discussion above. |
We had some pretty good discussion on https://github.com/humanmade/Engineering/pull/124 that didn't filter back here, but the ultimate text we ended up with was:
This points towards a strong default for the ordering of properties in JSX, so we should have a rule that pushes us towards this, probably using react/sort-props. Looks like the For example: // Sorted into groups instead
// eslint "react/sort-props": [ "error", "noSortAlphabetically" ]
return (
<svg
x={ 0 }
y={ 0 }
height={ 100 }
width={ 0 } (n.b. not tested that code) |
I just filed a new PR here to add the rule: #195 |
Resolved by adding this as a warning in #195 |
Finding props sometimes in a React file is a bit difficult due to the random order. We could consider jsx-sort-props rule to automagically sort them alphabetically.
In the same line, we could also think about adding https://eslint.org/docs/rules/sort-imports to sort imports too.
The text was updated successfully, but these errors were encountered: