Skip to content

Commit

Permalink
Add docs for jsx-sort-prop-types rule.
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexKVal committed Apr 21, 2015
1 parent 8624343 commit d2676bc
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 1 deletion.
3 changes: 2 additions & 1 deletion README.md
Expand Up @@ -47,6 +47,7 @@ Finally, enable all of the rules that you would like to use.
"react/jsx-quotes": 1,
"react/jsx-no-undef": 1,
"react/jsx-sort-props": 1,
"react/jsx-sort-prop-types": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-did-mount-set-state": 1,
Expand All @@ -68,6 +69,7 @@ Finally, enable all of the rules that you would like to use.
* [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
* [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
* [jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
* [jsx-sort-prop-types](docs/rules/jsx-sort-prop-types.md): Enforce propTypes declarations alphabetical sorting
* [jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
* [jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
* [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount
Expand Down Expand Up @@ -111,4 +113,3 @@ ESLint-plugin-React is licensed under the [MIT License](http://www.opensource.or

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

91 changes: 91 additions & 0 deletions docs/rules/jsx-sort-prop-types.md
@@ -0,0 +1,91 @@
# Enforce propTypes declarations alphabetical sorting (jsx-sort-prop-types)

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.

## Rule Details

This rule checks all JSX components and verifies that all propsTypes declarations are sorted alphabetically.
The default configuration of the rule is case-sensitive.
This rule is off by default.

The following patterns are considered warnings:

```js
var Component = React.createClass({
propTypes: {
z: React.PropTypes.number,
a: React.PropTypes.any,
b: React.PropTypes.string
},
...
});

class Component extends React.Component {
...
}
Component.propTypes = {
z: React.PropTypes.number,
a: React.PropTypes.any,
b: React.PropTypes.string
};

class Component extends React.Component {
static propTypes = {
z: React.PropTypes.any,
y: React.PropTypes.any,
a: React.PropTypes.any
}
render() {
return <div />;
}
}
```

The following patterns are considered okay and do not cause warnings:

```js
var Component = React.createClass({
propTypes: {
a: React.PropTypes.number,
b: React.PropTypes.any,
c: React.PropTypes.string
},
...
});

class Component extends React.Component {
...
}
Component.propTypes = {
a: React.PropTypes.string,
b: React.PropTypes.any,
c: React.PropTypes.string
};

class Component extends React.Component {
static propTypes = {
a: React.PropTypes.any,
b: React.PropTypes.any,
c: React.PropTypes.any
}
render() {
return <div />;
}
}
```

## Rule Options

```js
...
"jsx-sort-prop-types": [<enabled>, { "ignoreCase": <boolean> }]
...
```

### `ignoreCase`

When `true` the rule ignores the case-sensitivity of the declarations order.

## When not to use

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 comments on commit d2676bc

Please sign in to comment.