From d5a636f298c89c5e70dd45ff964505a03e31b92e Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Fri, 11 Dec 2015 18:47:48 -0800 Subject: [PATCH 1/3] [react] Including missing defaults to the react eslint --- packages/eslint-config-airbnb/rules/react.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 6e18e1c252..fc40ef908a 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -9,7 +9,7 @@ module.exports = { // Prevent missing displayName in a React component definition 'react/display-name': 0, // Enforce boolean attributes notation in JSX - 'react/jsx-boolean-value': 2, + 'react/jsx-boolean-value': [2, 'never'], // Enforce or disallow spaces inside of curly braces in JSX attributes 'react/jsx-curly-spacing': 0, // Prevent duplicate props in JSX @@ -31,7 +31,7 @@ module.exports = { // Prevent usage of setState in componentDidMount 'react/no-did-mount-set-state': [2, 'allow-in-func'], // Prevent usage of setState in componentDidUpdate - 'react/no-did-update-set-state': 2, + 'react/no-did-update-set-state': [2, 'allow-in-func'], // Prevent multiple component definition per file 'react/no-multi-comp': 2, // Prevent usage of unknown DOM property @@ -56,6 +56,10 @@ module.exports = { ] }], // Prevent missing parentheses around multilines JSX - 'react/wrap-multilines': 2 + 'react/wrap-multilines': [2, { + declaration: true, + assignment: true, + return: true + }] } }; From e9b1ef92bf956e8359305039721950863abdf81b Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Fri, 11 Dec 2015 23:00:10 -0800 Subject: [PATCH 2/3] Adding links to lint rules in react styleguide. --- packages/eslint-config-airbnb/package.json | 2 +- packages/eslint-config-airbnb/rules/react.js | 6 ++- react/README.md | 44 ++++++++++++++------ 3 files changed, 38 insertions(+), 14 deletions(-) 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 fc40ef908a..7246087ec8 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -10,14 +10,18 @@ module.exports = { 'react/display-name': 0, // Enforce boolean attributes notation in JSX 'react/jsx-boolean-value': [2, 'never'], + // Validate closing bracket location in JSX + 'react/jsx-closing-bracket-location': [2, 'line-aligned'], // Enforce or disallow spaces inside of curly braces in JSX attributes 'react/jsx-curly-spacing': 0, + // Validate props indentation in JSX + 'react/jsx-indent-props': [2, 2], // Prevent duplicate props in JSX 'react/jsx-no-duplicate-props': 0, // Disallow undeclared variables in JSX 'react/jsx-no-undef': 2, // Enforce quote style for JSX attributes - 'react/jsx-quotes': 0, + 'react/jsx-quotes': [2, 'double'], // Enforce propTypes declarations alphabetical sorting 'react/jsx-sort-prop-types': 0, // Enforce props alphabetical sorting 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 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 @@ -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 @@ -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 {this.props.text} } } - + 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)** From d02a50637763c40dc50af2c033f288f4c7643b41 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Fri, 11 Dec 2015 23:13:30 -0800 Subject: [PATCH 3/3] Adding links to react rules for quick reference. --- packages/eslint-config-airbnb/rules/react.js | 23 ++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 7246087ec8..d5c82c7949 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -7,48 +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 + // 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 + // 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 + // 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', @@ -60,6 +82,7 @@ module.exports = { ] }], // Prevent missing parentheses around multilines JSX + // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md 'react/wrap-multilines': [2, { declaration: true, assignment: true,