github/javascript
1
1
Fork 0
mirror of https://github.com/airbnb/javascript.git synced 2026-04-25 03:00:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #618 from kesne/jgens/react-defaults

Browse Source 
[eslint config] [react] [minor] Including missing defaults to the react eslint; enable react/jsx-quotes
This commit is contained in:
Jordan Harband
2015-12-11 23:17:25 -08:00
parent 8c76e4f486 d02a506377
commit 5989125d2e
3 changed files with 68 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/eslint-config-airbnb/package.json
View File

@@ -39,7 +39,7 @@
"devDependencies": {
"babel-tape-runner": "1.2.0",
"eslint": "^1.8.0",
"eslint-plugin-react": "^3.7.1",
"eslint-plugin-react": "^3.11.3",
"react": "^0.13.3",
"tape": "^4.2.2"
},

39
packages/eslint-config-airbnb/rules/react.js vendored
View File

@@ -7,44 +7,70 @@ module.exports = {
},
'rules': {
// Prevent missing displayName in a React component definition
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
'react/display-name': 0,
// Enforce boolean attributes notation in JSX
'react/jsx-boolean-value': 2,
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
'react/jsx-boolean-value': [2, 'never'],
// Validate closing bracket location in JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md
'react/jsx-closing-bracket-location': [2, 'line-aligned'],
// Enforce or disallow spaces inside of curly braces in JSX attributes
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md
'react/jsx-curly-spacing': 0,
// Validate props indentation in JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
'react/jsx-indent-props': [2, 2],
// Prevent duplicate props in JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
'react/jsx-no-duplicate-props': 0,
// Disallow undeclared variables in JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md
'react/jsx-no-undef': 2,
// Enforce quote style for JSX attributes
'react/jsx-quotes': 0,
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-quote.md
'react/jsx-quotes': [2, 'double'],
// Enforce propTypes declarations alphabetical sorting
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-prop-types.md
'react/jsx-sort-prop-types': 0,
// Enforce props alphabetical sorting
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
'react/jsx-sort-props': 0,
// Prevent React to be incorrectly marked as unused
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
'react/jsx-uses-react': 2,
// Prevent variables used in JSX to be incorrectly marked as unused
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md
'react/jsx-uses-vars': 2,
// Prevent usage of dangerous JSX properties
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger.md
'react/no-danger': 0,
// Prevent usage of setState in componentDidMount
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
'react/no-did-mount-set-state': [2, 'allow-in-func'],
// Prevent usage of setState in componentDidUpdate
'react/no-did-update-set-state': 2,
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md
'react/no-did-update-set-state': [2, 'allow-in-func'],
// Prevent multiple component definition per file
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md
'react/no-multi-comp': 2,
// Prevent usage of unknown DOM property
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md
'react/no-unknown-property': 2,
// Prevent missing props validation in a React component definition
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
'react/prop-types': 2,
// Prevent missing React when using JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
'react/react-in-jsx-scope': 2,
// Restrict file extensions that may be required
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-extension.md
'react/require-extension': 0,
// Prevent extra closing tags for components without children
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
'react/self-closing-comp': 2,
// Enforce component methods order
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
'react/sort-comp': [2, {
'order': [
'lifecycle',
@@ -56,6 +82,11 @@ module.exports = {
]
}],
// Prevent missing parentheses around multilines JSX
'react/wrap-multilines': 2
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md
'react/wrap-multilines': [2, {
declaration: true,
assignment: true,
return: true
}]
}
};

44
react/README.md
View File

@@ -26,6 +26,8 @@
- Use class extends React.Component unless you have a very good reason to use mixins.
eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md).
```javascript
// bad
const Listing = React.createClass({
@@ -33,7 +35,7 @@
return <div />;
}
});
// good
class Listing extends React.Component {
render() {
@@ -46,7 +48,10 @@
- **Extensions**: Use `.jsx` extension for React components.
- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances:
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances.
eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md).
```javascript
// bad
const reservationCard = require('./ReservationCard');
@@ -92,6 +97,8 @@
## Alignment
- Follow these alignment styles for JSX syntax
eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).
```javascript
// bad
<Foo superLongParam="bar"
@@ -121,6 +128,8 @@
> Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type.
> Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
eslint rules: [`react/jsx-quotes`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-quotes.md).
```javascript
// bad
<Foo bar='bar' />
@@ -169,7 +178,10 @@
```
## Parentheses
- Wrap JSX tags in parentheses when they span more than one line:
- Wrap JSX tags in parentheses when they span more than one line.
eslint rules: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md).
```javascript
/// bad
render() {
@@ -196,6 +208,9 @@
## Tags
- Always self-close tags that have no children.
eslint rules: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md).
```javascript
// bad
<Foo className="stuff"></Foo>
@@ -205,6 +220,9 @@
```
- If your component has multi-line properties, close its tag on a new line.
eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).
```javascript
// bad
<Foo
@@ -243,7 +261,7 @@
## Ordering
- Ordering for class extends React.Component:
1. constructor
1. optional static methods
1. getChildContext
@@ -262,31 +280,31 @@
- How to define propTypes, defaultProps, contextTypes, etc...
```javascript
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
const propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
const defaultProps = {
text: 'Hello World',
};
class Link extends Component {
class Link extends React.Component {
static methodsAreOk() {
return true;
}
render() {
return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
}
}
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
export default Link;
```
@@ -314,4 +332,6 @@
1. *Optional render methods* like renderNavigation() or renderProfilePicture()
1. render
eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md).
**[⬆ back to top](#table-of-contents)**