diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 6e4d1b64a2..eb501f9651 100644 --- 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 index 6e18e1c252..d5c82c7949 100644 --- 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 index 6b0a8e13e9..dde064c58c 100644 --- a/react/README.md +++ b/react/README.md @@ -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
; } }); - + // 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