Comments (8)
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.
from coding-standards.
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 --fix
) thinking about and updating prop order than you do actually writing useful code. It slowed down our component development noticeably to have to keep looking over our shoulder to make sure we weren't doing things wrong, and it polluted our lint warnings constantly while prototyping.
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 jsx-sort-props
from being adopted within the formal & official Human Made coding standards :)
from coding-standards.
Broke import sorting out into a separate issue so we can discuss separately.
from coding-standards.
@kadamwhite Sounds a good reason to me. Thanks!
from coding-standards.
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.
from coding-standards.
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:
Consistent property ordering makes it easier to manage complex components. Properties should generally be sorted into the following groups, and ordered alphabetically within those groups:
Exercise discretion when alphabetising. Alphabetical ordering may not always be the best decision; for example, it may be preferable to keep related positional variables (e.g.height
&width
) grouped together for clarity.
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 noSortAlphabetically
option can be used when the strict ordering isn't desired. We can use inline comments for this which then also serves as an explicit indication that the non-sorted keys are intentional. This should preserve the grouping, which generally is always what we want.
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)
from coding-standards.
I just filed a new PR here to add the rule: #195
from coding-standards.
Resolved by adding this as a warning in #195
from coding-standards.
Related Issues (20)
- Remove requirement for @package comment HOT 2
- Set default branch to main
- Update and review usage of the PSR-2-R PHP coding standard
- Stylelint max-line-length should this apply to comments? HOT 1
- ESLint Config: Incompatible dependencies HOT 4
- Reconsider use of eslint-config-react-app HOT 1
- Publish releases for 1.1.2 and 1.1.3 HOT 3
- No enforcement of spaces inside expressions in backticks HOT 1
- react/jsx-no-target-blank message is not strictly correct
- OrderSniff incorrectly flags use of traits in classes
- Unescaped translations are not flagged by 'HM' standards
- Package deprecations HOT 1
- Uncaught TypeError: vsprintf(): Argument #2 ($values) must be of type array, string given HOT 4
- Remove dependency on CRA ESLint config
- stylelint 14 compatibility HOT 2
- Simplify import order rules HOT 1
- Peer dependency range is uninstallable on @humanmade/eslint-config HOT 3
- WPCS/I18n refactor breaks HM-Minimum on PHP 8.2 HOT 3
- npm installs outdated version
- Update to WPCS v3 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coding-standards.