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

ljharb · ljharb · commit 5989125d2e10 · 2015-12-11T23:17:25.000-08:00
[eslint config] [react] [minor] Including missing defaults to the react eslint; enable react/jsx-quotes
diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json
@@ -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"
   },
diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
@@ -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
+    }]
   }
 };
diff --git a/react/README.md b/react/README.md
@@ -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() {
@@ -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)**
