Skip to content
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

[react] Including missing defaults to the react eslint #618

Merged
merged 3 commits into from
Dec 12, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/eslint-config-airbnb/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
39 changes: 35 additions & 4 deletions packages/eslint-config-airbnb/rules/react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we also add in a comment the URL of each of the rules?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was literally just about to do that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JORDAN SYNERGYYYYYYY

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

those changes are great but i also meant URLs in comments inline in react.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, the classic Double-J communication breakdown.

https://www.youtube.com/watch?v=f6WQLvRvtjs

// 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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow how was this one off‽ thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah a fellow interrobanger!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kesne @ljharb react/jsx-quotes is deprecated, which is presumably why it was disabled. I created #622 to fix it.

// 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',
Expand All @@ -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 changes: 32 additions & 12 deletions react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,16 @@

- 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({
render() {
return <div />;
}
});

// good
class Listing extends React.Component {
render() {
Expand All @@ -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');
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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' />
Expand Down Expand Up @@ -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() {
Expand All @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -243,7 +261,7 @@
## Ordering

- Ordering for class extends React.Component:

1. constructor
1. optional static methods
1. getChildContext
Expand All @@ -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;
```

Expand Down Expand Up @@ -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)**