Skip to content

Commit d2676bc

Browse files
committed
Add docs for jsx-sort-prop-types rule.
1 parent 8624343 commit d2676bc

File tree

2 files changed

+93
-1
lines changed

2 files changed

+93
-1
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ Finally, enable all of the rules that you would like to use.
4747
"react/jsx-quotes": 1,
4848
"react/jsx-no-undef": 1,
4949
"react/jsx-sort-props": 1,
50+
"react/jsx-sort-prop-types": 1,
5051
"react/jsx-uses-react": 1,
5152
"react/jsx-uses-vars": 1,
5253
"react/no-did-mount-set-state": 1,
@@ -68,6 +69,7 @@ Finally, enable all of the rules that you would like to use.
6869
* [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
6970
* [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
7071
* [jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
72+
* [jsx-sort-prop-types](docs/rules/jsx-sort-prop-types.md): Enforce propTypes declarations alphabetical sorting
7173
* [jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
7274
* [jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
7375
* [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount
@@ -111,4 +113,3 @@ ESLint-plugin-React is licensed under the [MIT License](http://www.opensource.or
111113

112114
[status-url]: https://github.com/yannickcr/eslint-plugin-react/pulse
113115
[status-image]: http://img.shields.io/badge/status-maintained-brightgreen.svg?style=flat-square
114-

docs/rules/jsx-sort-prop-types.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Enforce propTypes declarations alphabetical sorting (jsx-sort-prop-types)
2+
3+
Some developers prefer to sort propsTypes declarations alphabetically to be able to find necessary declaration easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
4+
5+
## Rule Details
6+
7+
This rule checks all JSX components and verifies that all propsTypes declarations are sorted alphabetically.
8+
The default configuration of the rule is case-sensitive.
9+
This rule is off by default.
10+
11+
The following patterns are considered warnings:
12+
13+
```js
14+
var Component = React.createClass({
15+
propTypes: {
16+
z: React.PropTypes.number,
17+
a: React.PropTypes.any,
18+
b: React.PropTypes.string
19+
},
20+
...
21+
});
22+
23+
class Component extends React.Component {
24+
...
25+
}
26+
Component.propTypes = {
27+
z: React.PropTypes.number,
28+
a: React.PropTypes.any,
29+
b: React.PropTypes.string
30+
};
31+
32+
class Component extends React.Component {
33+
static propTypes = {
34+
z: React.PropTypes.any,
35+
y: React.PropTypes.any,
36+
a: React.PropTypes.any
37+
}
38+
render() {
39+
return <div />;
40+
}
41+
}
42+
```
43+
44+
The following patterns are considered okay and do not cause warnings:
45+
46+
```js
47+
var Component = React.createClass({
48+
propTypes: {
49+
a: React.PropTypes.number,
50+
b: React.PropTypes.any,
51+
c: React.PropTypes.string
52+
},
53+
...
54+
});
55+
56+
class Component extends React.Component {
57+
...
58+
}
59+
Component.propTypes = {
60+
a: React.PropTypes.string,
61+
b: React.PropTypes.any,
62+
c: React.PropTypes.string
63+
};
64+
65+
class Component extends React.Component {
66+
static propTypes = {
67+
a: React.PropTypes.any,
68+
b: React.PropTypes.any,
69+
c: React.PropTypes.any
70+
}
71+
render() {
72+
return <div />;
73+
}
74+
}
75+
```
76+
77+
## Rule Options
78+
79+
```js
80+
...
81+
"jsx-sort-prop-types": [<enabled>, { "ignoreCase": <boolean> }]
82+
...
83+
```
84+
85+
### `ignoreCase`
86+
87+
When `true` the rule ignores the case-sensitivity of the declarations order.
88+
89+
## When not to use
90+
91+
This rule is a formatting preference and not following it won't negatively affect the quality of your code. If alphabetizing props declarations isn't a part of your coding standards, then you can leave this rule off.

0 commit comments

Comments
 (0)