From 5fd7c6f08c0650ed67297fc83c8a0590c9a92cc8 Mon Sep 17 00:00:00 2001 From: Estelle Date: Mon, 23 Mar 2015 18:48:19 -0700 Subject: [PATCH 0001/1234] added naming convention of UPPERCASE names --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 2c6c5c6c7d..1116dcb4ba 100644 --- a/README.md +++ b/README.md @@ -3139,6 +3139,33 @@ Other Style Guides ]; ``` + + - [23.10](#naming--uppercase) Use UPPERCASE for nested object namespacing, global variables, and constants. + + + ```javascript + // bad + const namespace = namespace || {}; + + namespace.util.Widget = { + // ...stuff... + } + + // bad + const apiKey = '44b345234534t455245njkl523452-vbb9'; + + // good + const NAMESPACE = NAMESPACE || {}; + + NAMESPACE.util.Widget = { + // ...stuff... + } + + // good + const API_KEY = '44b345234534t455245njkl523452-vbb9'; + ``` + + **[⬆ back to top](#table-of-contents)** ## Accessors From 1b46be032edcd1dd3a6f993df2a886cbd83a0bdd Mon Sep 17 00:00:00 2001 From: Ankit Sardesai Date: Sun, 4 Oct 2015 03:15:09 -0400 Subject: [PATCH 0002/1234] Added version badge to eslint-config-airbnb --- packages/eslint-config-airbnb/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/eslint-config-airbnb/README.md b/packages/eslint-config-airbnb/README.md index f142c5a894..2eedfb5e97 100644 --- a/packages/eslint-config-airbnb/README.md +++ b/packages/eslint-config-airbnb/README.md @@ -1,5 +1,7 @@ # eslint-config-airbnb +[![npm version](https://badge.fury.io/js/eslint-config-airbnb.svg)](http://badge.fury.io/js/eslint-config-airbnb) + This package provides Airbnb's .eslintrc as an extensible shared config. ## Usage From 4c1fbf2bec202f22eed3de6c99de17dc6bab447a Mon Sep 17 00:00:00 2001 From: Janis Zarzeckis Date: Wed, 11 Nov 2015 14:14:18 +0200 Subject: [PATCH 0003/1234] Add Evolution Gaming to 'In The Wild' section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index faadf80e4e..e120e5ed55 100644 --- a/README.md +++ b/README.md @@ -2186,6 +2186,7 @@ Other Style Guides - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) - **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript) - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) + - **Evolution Gaming**: [Evolution-Gaming/javascript](https://github.com/Evolution-Gaming/javascript) - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - **Expensify** [Expensify/Style-Guide](https://github.com/Expensify/Style-Guide/blob/master/javascript.md) - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide) From 96b0057b30eaead919e076b25e299f4f68c10ac9 Mon Sep 17 00:00:00 2001 From: Janis Zarzeckis Date: Wed, 11 Nov 2015 17:48:50 +0200 Subject: [PATCH 0004/1234] Organisation renamed --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e120e5ed55..a13640cbb9 100644 --- a/README.md +++ b/README.md @@ -2186,7 +2186,7 @@ Other Style Guides - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) - **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript) - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) - - **Evolution Gaming**: [Evolution-Gaming/javascript](https://github.com/Evolution-Gaming/javascript) + - **Evolution Gaming**: [evolution-gaming/javascript](https://github.com/evolution-gaming/javascript) - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - **Expensify** [Expensify/Style-Guide](https://github.com/Expensify/Style-Guide/blob/master/javascript.md) - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide) From c501e0d5a667045635938b5ba433eee340b6ffff Mon Sep 17 00:00:00 2001 From: Jan Krems Date: Mon, 16 Nov 2015 13:40:38 -0800 Subject: [PATCH 0005/1234] Use require.resolve to allow nested extend --- packages/eslint-config-airbnb/base.js | 2 +- packages/eslint-config-airbnb/index.js | 2 +- packages/eslint-config-airbnb/legacy.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/base.js b/packages/eslint-config-airbnb/base.js index db661c5d1a..093bd541be 100644 --- a/packages/eslint-config-airbnb/base.js +++ b/packages/eslint-config-airbnb/base.js @@ -2,6 +2,6 @@ module.exports = { 'extends': [ 'eslint-config-airbnb/legacy', 'eslint-config-airbnb/rules/es6', - ], + ].map(require.resolve), 'rules': {} }; diff --git a/packages/eslint-config-airbnb/index.js b/packages/eslint-config-airbnb/index.js index 46d601fe3f..a5a6c5e287 100644 --- a/packages/eslint-config-airbnb/index.js +++ b/packages/eslint-config-airbnb/index.js @@ -2,6 +2,6 @@ module.exports = { 'extends': [ 'eslint-config-airbnb/base', 'eslint-config-airbnb/rules/react', - ], + ].map(require.resolve), rules: {} }; diff --git a/packages/eslint-config-airbnb/legacy.js b/packages/eslint-config-airbnb/legacy.js index 83a4931e84..d01122bc8d 100644 --- a/packages/eslint-config-airbnb/legacy.js +++ b/packages/eslint-config-airbnb/legacy.js @@ -7,7 +7,7 @@ module.exports = { 'eslint-config-airbnb/rules/strict', 'eslint-config-airbnb/rules/style', 'eslint-config-airbnb/rules/variables' - ], + ].map(require.resolve), 'env': { 'browser': true, 'node': true, From 721b8cd01fe44aa9167699a041dd7695b38aa64a Mon Sep 17 00:00:00 2001 From: Benjamin Winterberg Date: Wed, 9 Dec 2015 10:51:49 +0100 Subject: [PATCH 0006/1234] Fix syntax highlighting in section 15 --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f854fed8e7..5276f4a932 100644 --- a/README.md +++ b/README.md @@ -1164,12 +1164,12 @@ Other Style Guides eslint rules: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html). - + **Objects** evaluate to **true** - + **Undefined** evaluates to **false** - + **Null** evaluates to **false** - + **Booleans** evaluate to **the value of the boolean** - + **Numbers** evaluate to **false** if **+0, -0, or NaN**, otherwise **true** - + **Strings** evaluate to **false** if an empty string `''`, otherwise **true** + + **Objects** evaluate to **true** + + **Undefined** evaluates to **false** + + **Null** evaluates to **false** + + **Booleans** evaluate to **the value of the boolean** + + **Numbers** evaluate to **false** if **+0, -0, or NaN**, otherwise **true** + + **Strings** evaluate to **false** if an empty string `''`, otherwise **true** ```javascript if ([0]) { From 514bd87d1a8d96f7259ed4d1bcc9eb64618811a0 Mon Sep 17 00:00:00 2001 From: Vladimir Kutepov Date: Fri, 11 Dec 2015 13:39:03 +0500 Subject: [PATCH 0007/1234] Require space before/after arrow function's arrow (arrow-spacing) Enable [arrow-spacing](http://eslint.org/docs/rules/arrow-spacing.html) rule, code with space before/after arrow function's arrow is easier to read. ```js () => {}; (a) => {}; a => a; () => {'\n'}; ()=> {}; /*error Missing space before =>*/ () =>{}; /*error Missing space after =>*/ (a)=> {}; /*error Missing space before =>*/ (a) =>{}; /*error Missing space after =>*/ a =>a; /*error Missing space after =>*/ a=> a; /*error Missing space before =>*/ ()=> {'\n'}; /*error Missing space before =>*/ () =>{'\n'}; /*error Missing space after =>*/ ``` --- packages/eslint-config-airbnb/rules/es6.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index b7fde7bf44..fde86e8f0f 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -25,7 +25,8 @@ module.exports = { // require parens in arrow function arguments 'arrow-parens': 0, // require space before/after arrow function's arrow - 'arrow-spacing': 0, + // https://github.com/eslint/eslint/blob/master/docs/rules/arrow-spacing.md + 'arrow-spacing': [2, { 'before': true, 'after': true }], // verify super() callings in constructors 'constructor-super': 0, // enforce the spacing around the * in generator functions From d5a636f298c89c5e70dd45ff964505a03e31b92e Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Fri, 11 Dec 2015 18:47:48 -0800 Subject: [PATCH 0008/1234] [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 0009/1234] 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 0010/1234] 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, From 2ab6253f85cb40f799da7c003e13c18ecf6775f8 Mon Sep 17 00:00:00 2001 From: Gerardo Renovales Date: Mon, 14 Dec 2015 15:06:57 -0500 Subject: [PATCH 0011/1234] Update README.md Add OutBoxSoft to the list of organizations --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5276f4a932..2b860dae56 100644 --- a/README.md +++ b/README.md @@ -2333,6 +2333,7 @@ Other Style Guides - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) + - **OutBoxSoft**: [OutBoxSoft/javascript](https://github.com/OutBoxSoft/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) From b1500397e1bba4120b10b850038bfff3177fda42 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Mon, 14 Dec 2015 22:21:52 -0800 Subject: [PATCH 0012/1234] [eslint config] enable `object-shorthand` rule. Fixes #621. --- packages/eslint-config-airbnb/rules/es6.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index fde86e8f0f..e1102f259f 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -40,7 +40,8 @@ module.exports = { // require let or const instead of var 'no-var': 2, // require method and property shorthand syntax for object literals - 'object-shorthand': 0, + // https://github.com/eslint/eslint/blob/master/docs/rules/object-shorthand.md + 'object-shorthand': [2, "always", { "ignoreConstructors": true }], // suggest using of const declaration for variables that are never modified after declared 'prefer-const': 2, // suggest using the spread operator instead of .apply() From 4ab41ede1bb800fc50defa357a889d3a9aa0667a Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Mon, 14 Dec 2015 23:55:21 -0800 Subject: [PATCH 0013/1234] [eslint config] [Dev Deps] update `eslint` --- packages/eslint-config-airbnb/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index eb501f9651..fb4e8cbbd1 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -38,7 +38,7 @@ "homepage": "https://github.com/airbnb/javascript", "devDependencies": { "babel-tape-runner": "1.2.0", - "eslint": "^1.8.0", + "eslint": "^1.10.3", "eslint-plugin-react": "^3.11.3", "react": "^0.13.3", "tape": "^4.2.2" From 0fc31eaf1cd554bb8a0118168c761ace0ad788e0 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 15 Dec 2015 01:19:32 -0800 Subject: [PATCH 0014/1234] [eslint config] fix b1500397e1bba4120b10b850038bfff3177fda42 --- packages/eslint-config-airbnb/rules/es6.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index e1102f259f..3c277064b6 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -41,7 +41,7 @@ module.exports = { 'no-var': 2, // require method and property shorthand syntax for object literals // https://github.com/eslint/eslint/blob/master/docs/rules/object-shorthand.md - 'object-shorthand': [2, "always", { "ignoreConstructors": true }], + 'object-shorthand': [2, 'always'], // suggest using of const declaration for variables that are never modified after declared 'prefer-const': 2, // suggest using the spread operator instead of .apply() From 60b01bdfb9de42be2032f14bc3fd41b5f6da61a7 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 15 Dec 2015 01:22:30 -0800 Subject: [PATCH 0015/1234] [eslint config] v2.1.0 --- packages/eslint-config-airbnb/CHANGELOG.md | 7 +++++++ packages/eslint-config-airbnb/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/CHANGELOG.md b/packages/eslint-config-airbnb/CHANGELOG.md index c6504072bf..0017832ca2 100644 --- a/packages/eslint-config-airbnb/CHANGELOG.md +++ b/packages/eslint-config-airbnb/CHANGELOG.md @@ -1,3 +1,10 @@ +2.1.0 / 2015-12-03 +================== + - [fix] use `require.resolve` to allow nested `extend`s (#582) + - [new] enable `object-shorthand` rule (#621) + - [new] enable `arrow-spacing` rule (#517) + - [docs] flesh out react rule defaults (#618) + 2.0.0 / 2015-12-03 ================== - [breaking] `space-before-function-paren`: require function spacing: `function (` (#605) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index fb4e8cbbd1..b61d4ee5c8 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-airbnb", - "version": "2.0.0", + "version": "2.1.0", "description": "Airbnb's ESLint config, following our styleguide", "main": "index.js", "scripts": { From bbcb1371e57b926f25324d4ea0d24b446f164aa1 Mon Sep 17 00:00:00 2001 From: Billy Janitsch Date: Tue, 15 Dec 2015 15:59:40 -0500 Subject: [PATCH 0016/1234] Remove deprecated react/jsx-quotes --- packages/eslint-config-airbnb/rules/react.js | 3 --- react/README.md | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index d5c82c7949..ffff4a2c15 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -27,9 +27,6 @@ module.exports = { // 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, diff --git a/react/README.md b/react/README.md index dde064c58c..3b53d2c0f4 100644 --- a/react/README.md +++ b/react/README.md @@ -128,7 +128,7 @@ > 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). + eslint rules: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes). ```javascript // bad From 28476a25d8609d3a80d130b8a4dadc4d0a84ca47 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 15 Dec 2015 13:06:28 -0800 Subject: [PATCH 0017/1234] [eslint config] add rule link and defaults to `jsx-quotes` rule --- packages/eslint-config-airbnb/rules/style.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/style.js b/packages/eslint-config-airbnb/rules/style.js index 204d69c5b3..e65e0f3e08 100644 --- a/packages/eslint-config-airbnb/rules/style.js +++ b/packages/eslint-config-airbnb/rules/style.js @@ -26,7 +26,8 @@ module.exports = { // https://github.com/eslint/eslint/blob/master/docs/rules/indent.md 'indent': [2, 2, { "SwitchCase": 1, "VariableDeclarator": 1 }], // specify whether double or single quotes should be used in JSX attributes - 'jsx-quotes': 2, + // http://eslint.org/docs/rules/jsx-quotes + 'jsx-quotes': [2, 'prefer-double'], // enforces spacing between keys and values in object literal properties 'key-spacing': [2, {'beforeColon': false, 'afterColon': true}], // enforces empty lines around comments From fcc41eecd76480f34f7bb9084d8cdfcf71528625 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 15 Dec 2015 13:07:24 -0800 Subject: [PATCH 0018/1234] v2.1.1 --- packages/eslint-config-airbnb/CHANGELOG.md | 6 +++++- packages/eslint-config-airbnb/package.json | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/CHANGELOG.md b/packages/eslint-config-airbnb/CHANGELOG.md index 0017832ca2..bc269e9222 100644 --- a/packages/eslint-config-airbnb/CHANGELOG.md +++ b/packages/eslint-config-airbnb/CHANGELOG.md @@ -1,4 +1,8 @@ -2.1.0 / 2015-12-03 +2.1.1 / 2015-12-15 +================== + - [fix] Remove deprecated react/jsx-quotes (#622) + +2.1.0 / 2015-12-15 ================== - [fix] use `require.resolve` to allow nested `extend`s (#582) - [new] enable `object-shorthand` rule (#621) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index b61d4ee5c8..4a22d6d021 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-airbnb", - "version": "2.1.0", + "version": "2.1.1", "description": "Airbnb's ESLint config, following our styleguide", "main": "index.js", "scripts": { From 2589c67b0c392a118aba3e3938856ddfead26baa Mon Sep 17 00:00:00 2001 From: Thomas Shafer Date: Wed, 16 Dec 2015 15:40:26 -0800 Subject: [PATCH 0019/1234] update best-practices config to prevent parameter object manipulation added good/bad examples of parameter mutation to the readme --- README.md | 29 +++++++++++++++++++ .../rules/best-practices.js | 3 +- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2b860dae56..f64fe911a0 100644 --- a/README.md +++ b/README.md @@ -629,6 +629,35 @@ Other Style Guides const y = function a() {}; ``` +- [7.12](#7.12) Never mutate parameters. + + > Why? Overwriting parameters can lead to unexpected behavior, especially when accessing the `arguments` object. Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller. + + eslint rules: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html). + + ```javascript + // bad + function f(a){ + a = 1; + } + function f(a){ + if (!a) { a = 1; } + } + function f(obj){ + obj.key = 1; + }; + + // good + function f(a){ + const b = (a || 1); + } + function f(a = 1){ + } + function f(obj){ + const key = obj.hasOwnProperty('key') ? obj.key ? 1; + }; + ``` + **[⬆ back to top](#table-of-contents)** ## Arrow Functions diff --git a/packages/eslint-config-airbnb/rules/best-practices.js b/packages/eslint-config-airbnb/rules/best-practices.js index 9d8199eb77..e511f9b15e 100644 --- a/packages/eslint-config-airbnb/rules/best-practices.js +++ b/packages/eslint-config-airbnb/rules/best-practices.js @@ -74,7 +74,8 @@ module.exports = { // var foo = 'Copyright \251'; 'no-octal-escape': 2, // disallow reassignment of function parameters - 'no-param-reassign': 2, + // disallow parameter object manipulation + 'no-param-reassign': [2, { 'props': true }], // disallow use of process.env 'no-process-env': 0, // disallow usage of __proto__ property From f7971301b08d8fc870a127167804059ab2b7c71b Mon Sep 17 00:00:00 2001 From: Thomas Shafer Date: Wed, 16 Dec 2015 20:21:38 -0800 Subject: [PATCH 0020/1234] update examples for style add link to no-param-reassign rule documentation --- README.md | 16 ++++++++-------- .../eslint-config-airbnb/rules/best-practices.js | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f64fe911a0..ba2bcd0aed 100644 --- a/README.md +++ b/README.md @@ -637,24 +637,24 @@ Other Style Guides ```javascript // bad - function f(a){ + function f1(a) { a = 1; } - function f(a){ + function f2(a) { if (!a) { a = 1; } } - function f(obj){ + function f3(obj) { obj.key = 1; }; // good - function f(a){ - const b = (a || 1); + function f4(a) { + const b = a || 1; } - function f(a = 1){ + function f5(a = 1) { } - function f(obj){ - const key = obj.hasOwnProperty('key') ? obj.key ? 1; + function f6(obj) { + const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; }; ``` diff --git a/packages/eslint-config-airbnb/rules/best-practices.js b/packages/eslint-config-airbnb/rules/best-practices.js index e511f9b15e..82e5f9e289 100644 --- a/packages/eslint-config-airbnb/rules/best-practices.js +++ b/packages/eslint-config-airbnb/rules/best-practices.js @@ -75,6 +75,7 @@ module.exports = { 'no-octal-escape': 2, // disallow reassignment of function parameters // disallow parameter object manipulation + // rule: http://eslint.org/docs/rules/no-param-reassign.html 'no-param-reassign': [2, { 'props': true }], // disallow use of process.env 'no-process-env': 0, From a533a4fb93c6f1385c2e3ede07a922df6a50dc6a Mon Sep 17 00:00:00 2001 From: Thomas Shafer Date: Thu, 17 Dec 2015 11:18:36 -0800 Subject: [PATCH 0021/1234] added newlines after each function --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index ba2bcd0aed..98b0bee495 100644 --- a/README.md +++ b/README.md @@ -640,9 +640,11 @@ Other Style Guides function f1(a) { a = 1; } + function f2(a) { if (!a) { a = 1; } } + function f3(obj) { obj.key = 1; }; @@ -651,8 +653,10 @@ Other Style Guides function f4(a) { const b = a || 1; } + function f5(a = 1) { } + function f6(obj) { const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; }; From c584319df8de09ff458adb24103dc0b3bcc4adbf Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 22 Dec 2015 09:44:07 -0800 Subject: [PATCH 0022/1234] [eslint config] [Dev Deps] update `eslint-plugin-react` --- packages/eslint-config-airbnb/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 4a22d6d021..89e745b44f 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.10.3", - "eslint-plugin-react": "^3.11.3", + "eslint-plugin-react": "^3.12.0", "react": "^0.13.3", "tape": "^4.2.2" }, From c98990c0f957edeb943a992e3dda4e755004d57b Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 22 Dec 2015 09:44:26 -0800 Subject: [PATCH 0023/1234] [eslint config] [minor] enable react/prefer-es6-class rule --- packages/eslint-config-airbnb/rules/react.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index ffff4a2c15..4cc9e0d1ad 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -84,6 +84,9 @@ module.exports = { declaration: true, assignment: true, return: true - }] + }], + // Require ES6 class declarations over React.createClass + // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md + 'react/prefer-es6-class': [2, 'always'], } }; From 4cdc3fe4831c57b0eadd8127ab03a4753382ff78 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 22 Dec 2015 09:49:25 -0800 Subject: [PATCH 0024/1234] [eslint config] [breaking] enable `quote-props` rule. --- README.md | 22 ++++++++++++++++++++ packages/eslint-config-airbnb/rules/style.js | 3 ++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cebc053bcc..d2378926d9 100644 --- a/README.md +++ b/README.md @@ -287,6 +287,28 @@ Other Style Guides }; ``` + - [3.8](#3.8) Only quote properties that are invalid identifiers. + + > Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines. + + eslint rules: [`quote-props`](http://eslint.org/docs/rules/quote-props.html). + + ```javascript + // bad + const bad = { + 'foo': 3, + 'bar': 4, + 'data-blah': 5, + }; + + // good + const good = { + foo: 3, + bar: 4, + 'data-blah': 5, + }; + ``` + **[⬆ back to top](#table-of-contents)** ## Arrays diff --git a/packages/eslint-config-airbnb/rules/style.js b/packages/eslint-config-airbnb/rules/style.js index 284aac483f..66e3a3f7a9 100644 --- a/packages/eslint-config-airbnb/rules/style.js +++ b/packages/eslint-config-airbnb/rules/style.js @@ -85,7 +85,8 @@ module.exports = { // enforce padding within blocks 'padded-blocks': [2, 'never'], // require quotes around object literal property names - 'quote-props': 0, + // http://eslint.org/docs/rules/quote-props.html + 'quote-props': [2, 'as-needed', { 'keywords': true, 'unnecessary': true, 'numbers': false }], // specify whether double or single quotes should be used 'quotes': [2, 'single', 'avoid-escape'], // require identifiers to match the provided regular expression From 6602586a20868ca1eab2e5ca38c715e69136c455 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 11:42:24 -0800 Subject: [PATCH 0025/1234] [eslint config] [minor] Sort react/prefer-es6-class alphabetically All of the other rules in this file are in alphabetical order, but this one was added by c98990c0f out of order at the end. Keeping these in alphabetical order will help developers find the rules that they are looking for. --- packages/eslint-config-airbnb/rules/react.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 4cc9e0d1ad..9722b67869 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -54,6 +54,9 @@ module.exports = { // 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, + // Require ES6 class declarations over React.createClass + // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md + 'react/prefer-es6-class': [2, 'always'], // 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, @@ -85,8 +88,5 @@ module.exports = { assignment: true, return: true }], - // Require ES6 class declarations over React.createClass - // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md - 'react/prefer-es6-class': [2, 'always'], } }; From f2dc5043a1038a2db58c3e9c59102f96c960d8f2 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 11:46:17 -0800 Subject: [PATCH 0026/1234] [eslint-config] [minor] Enable react/no-is-mounted rule isMounted is an anti-pattern [0], is not available when using ES6 classes, and is on its way to being officially deprecated. eslint-plugin-react recently added the react/no-is-mounted rule in 3.12.0 that prevents its use. [0]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html Finishes #633 --- packages/eslint-config-airbnb/rules/react.js | 3 +++ react/README.md | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 4cc9e0d1ad..bc71327c0a 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -48,6 +48,9 @@ module.exports = { // 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 usage of isMounted + // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md + 'react/no-is-mounted': 2, // 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, diff --git a/react/README.md b/react/README.md index 3b53d2c0f4..549e853db0 100644 --- a/react/README.md +++ b/react/README.md @@ -15,6 +15,7 @@ 1. [Tags](#tags) 1. [Methods](#methods) 1. [Ordering](#ordering) + 1. [`isMounted`](#ismounted) ## Basic Rules @@ -334,4 +335,12 @@ eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md). +## `isMounted` + + [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. Its use should be avoided. + + [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html + + eslint rules: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md). + **[⬆ back to top](#table-of-contents)** From 055aa14518bd7c31cd54b633bf58c63ec3d962f7 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:28:09 -0800 Subject: [PATCH 0027/1234] [readme] Clean up isMounted section in react readme When I added this section in f2dc5043a I didn't do a very good job of following the style used in other parts of this repo. This commit remedies that. --- react/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 549e853db0..7491c46be3 100644 --- a/react/README.md +++ b/react/README.md @@ -337,7 +337,9 @@ ## `isMounted` - [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. Its use should be avoided. + - Do not use `isMounted`. + + > Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html From 76ff913d2648d3613fcdd6438a18886bedf2bf06 Mon Sep 17 00:00:00 2001 From: Aleksey Kislov Date: Wed, 23 Dec 2015 17:34:31 +0300 Subject: [PATCH 0028/1234] Permit strict mode Permit strict mode for legacy configuration as it is not intended to be used with Babel. --- packages/eslint-config-airbnb/legacy.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eslint-config-airbnb/legacy.js b/packages/eslint-config-airbnb/legacy.js index d01122bc8d..257b9dd868 100644 --- a/packages/eslint-config-airbnb/legacy.js +++ b/packages/eslint-config-airbnb/legacy.js @@ -4,7 +4,6 @@ module.exports = { 'eslint-config-airbnb/rules/errors', 'eslint-config-airbnb/rules/legacy', 'eslint-config-airbnb/rules/node', - 'eslint-config-airbnb/rules/strict', 'eslint-config-airbnb/rules/style', 'eslint-config-airbnb/rules/variables' ].map(require.resolve), From 450e64c9d217ca731561a7d890f1210da82dcef7 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:35:11 -0800 Subject: [PATCH 0029/1234] [readme] Add backticks around code items in react readme I noticed a number of places in this document where code was being referenced but it was not marked as such. Adding backticks will instruct the markdown parser to format these bits as code, which should improve the readability of this document. --- react/README.md | 88 ++++++++++++++++++++++++------------------------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/react/README.md b/react/README.md index 7491c46be3..12260155b9 100644 --- a/react/README.md +++ b/react/README.md @@ -23,9 +23,9 @@ - Always use JSX syntax. - Do not use `React.createElement` unless you're initializing the app from a file that is not JSX. -## Class vs React.createClass +## Class vs `React.createClass` - - Use class extends React.Component unless you have a very good reason to use mixins. + - 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). @@ -81,7 +81,7 @@ ## Declaration - - Do not use displayName for naming components. Instead, name the component by reference. + - Do not use `displayName` for naming components. Instead, name the component by reference. ```javascript // bad @@ -261,24 +261,24 @@ ## Ordering - - Ordering for class extends React.Component: - - 1. constructor - 1. optional static methods - 1. getChildContext - 1. componentWillMount - 1. componentDidMount - 1. componentWillReceiveProps - 1. shouldComponentUpdate - 1. componentWillUpdate - 1. componentDidUpdate - 1. componentWillUnmount - 1. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() - 1. *getter methods for render* like getSelectReason() or getFooterContent() - 1. *Optional render methods* like renderNavigation() or renderProfilePicture() - 1. render - - - How to define propTypes, defaultProps, contextTypes, etc... + - Ordering for `class extends React.Component`: + + 1. `constructor` + 1. optional `static` methods + 1. `getChildContext` + 1. `componentWillMount` + 1. `componentDidMount` + 1. `componentWillReceiveProps` + 1. `shouldComponentUpdate` + 1. `componentWillUpdate` + 1. `componentDidUpdate` + 1. `componentWillUnmount` + 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` + 1. *getter methods for `render`* like `getSelectReason() or `getFooterContent()` + 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` + 1. `render` + + - How to define `propTypes`, `defaultProps`, `contextTypes`, etc... ```javascript import React, { PropTypes } from 'react'; @@ -309,29 +309,29 @@ export default Link; ``` - - Ordering for React.createClass: - - 1. displayName - 1. propTypes - 1. contextTypes - 1. childContextTypes - 1. mixins - 1. statics - 1. defaultProps - 1. getDefaultProps - 1. getInitialState - 1. getChildContext - 1. componentWillMount - 1. componentDidMount - 1. componentWillReceiveProps - 1. shouldComponentUpdate - 1. componentWillUpdate - 1. componentDidUpdate - 1. componentWillUnmount - 1. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() - 1. *getter methods for render* like getSelectReason() or getFooterContent() - 1. *Optional render methods* like renderNavigation() or renderProfilePicture() - 1. render + - Ordering for `React.createClass`: + + 1. `displayName` + 1. `propTypes` + 1. `contextTypes` + 1. `childContextTypes` + 1. `mixins` + 1. `statics` + 1. `defaultProps` + 1. `getDefaultProps` + 1. `getInitialState` + 1. `getChildContext` + 1. `componentWillMount` + 1. `componentDidMount` + 1. `componentWillReceiveProps` + 1. `shouldComponentUpdate` + 1. `componentWillUpdate` + 1. `componentDidUpdate` + 1. `componentWillUnmount` + 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` + 1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()` + 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). From a7d3e02a7744068b211d884c3299841767a23b78 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:38:02 -0800 Subject: [PATCH 0030/1234] [readme] Add missing heading to react TOC I noticed that this heading wasn't listed in the table of contents. Adding it will help people see at-a-glance what they might find in this document. --- react/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/react/README.md b/react/README.md index 12260155b9..d6f858e10a 100644 --- a/react/README.md +++ b/react/README.md @@ -5,6 +5,7 @@ ## Table of Contents 1. [Basic Rules](#basic-rules) + 1. [Class vs `React.createClass`](#class-vs-reactcreateclass) 1. [Naming](#naming) 1. [Declaration](#declaration) 1. [Alignment](#alignment) From 474087c4269a534d9b57b1bc8e323a4295f0b429 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 22 Dec 2015 22:40:43 -0800 Subject: [PATCH 0031/1234] [readme] Use consistent whitespace in react readme I noticed that some newlines and indentation were a little inconsistent in this file, so I decided to smooth things out a bit. This should help people who decide to modify this document in the future. When determining which is the "right" way to format these things, I decided to use the style used by base readme as a guide. --- react/README.md | 85 ++++++++++++++++++++++++++++--------------------- 1 file changed, 48 insertions(+), 37 deletions(-) diff --git a/react/README.md b/react/README.md index d6f858e10a..48a50b8378 100644 --- a/react/README.md +++ b/react/README.md @@ -30,21 +30,21 @@ 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
; - } - }); + ```javascript + // bad + const Listing = React.createClass({ + render() { + return
; + } + }); - // good - class Listing extends React.Component { - render() { - return
; + // good + class Listing extends React.Component { + render() { + return
; + } } - } - ``` + ``` ## Naming @@ -52,7 +52,7 @@ - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. - **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). + eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md). ```javascript // bad @@ -68,7 +68,8 @@ const reservationItem = ; ``` - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name: + **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name: + ```javascript // bad const Footer = require('./Footer/Footer.jsx') @@ -80,8 +81,8 @@ const Footer = require('./Footer') ``` - ## Declaration + - Do not use `displayName` for naming components. Instead, name the component by reference. ```javascript @@ -97,6 +98,7 @@ ``` ## 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). @@ -125,6 +127,7 @@ ``` ## Quotes + - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. > 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. @@ -147,7 +150,9 @@ ``` ## Spacing + - Always include a single space in your self-closing tag. + ```javascript // bad @@ -164,7 +169,9 @@ ``` ## Props + - Always use camelCase for prop names. + ```javascript // bad {this.props.text} + render() { + return {this.props.text} + } } - } - Link.propTypes = propTypes; - Link.defaultProps = defaultProps; + Link.propTypes = propTypes; + Link.defaultProps = defaultProps; - export default Link; - ``` + export default Link; + ``` - Ordering for `React.createClass`: From 8989a8a51389562e0440af0546b5b284e0e26bda Mon Sep 17 00:00:00 2001 From: Christopher Banh Date: Wed, 15 Jul 2015 09:17:04 -0700 Subject: [PATCH 0032/1234] Rename jshintrc to .jshintrc According to http://jshint.com/docs/, the "special file" to configure JSHint is named `.jshintrc`, not `jshintrc`. --- linters/{jshintrc => .jshintrc} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename linters/{jshintrc => .jshintrc} (100%) diff --git a/linters/jshintrc b/linters/.jshintrc similarity index 100% rename from linters/jshintrc rename to linters/.jshintrc From 5c3137d7364b65c9e3300682dd53a68fd595bda2 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Sun, 13 Dec 2015 18:36:25 -0800 Subject: [PATCH 0033/1234] Cleaning up the react styleguide. Adding additional info in props. --- packages/eslint-config-airbnb/rules/react.js | 3 + react/README.md | 115 +++++++++++++++++-- 2 files changed, 109 insertions(+), 9 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 758f4e65f4..7f69354521 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -21,6 +21,9 @@ module.exports = { // 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 usage of .bind() and arrow functions in JSX props + // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md + 'react/jsx-no-bind': 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, diff --git a/react/README.md b/react/README.md index 48a50b8378..052949876c 100644 --- a/react/README.md +++ b/react/README.md @@ -56,10 +56,10 @@ ```javascript // bad - const reservationCard = require('./ReservationCard'); + import reservationCard from './ReservationCard'; // good - const ReservationCard = require('./ReservationCard'); + import ReservationCard from './ReservationCard'; // bad const ReservationItem = ; @@ -72,13 +72,13 @@ ```javascript // bad - const Footer = require('./Footer/Footer.jsx') + import Footer from './Footer/Footer.jsx'; // bad - const Footer = require('./Footer/index.jsx') + import Footer from './Footer/index.jsx'; // good - const Footer = require('./Footer') + import Footer from './Footer'; ``` ## Declaration @@ -186,6 +186,22 @@ /> ``` + - Omit the value of the prop when it is explicitly `true`. + + eslint rules: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md). + + ```javascript + // bad +