From 5fd7c6f08c0650ed67297fc83c8a0590c9a92cc8 Mon Sep 17 00:00:00 2001 From: Estelle Date: Mon, 23 Mar 2015 18:48:19 -0700 Subject: [PATCH 0001/1223] 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/1223] 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/1223] 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/1223] 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 bbcb1371e57b926f25324d4ea0d24b446f164aa1 Mon Sep 17 00:00:00 2001 From: Billy Janitsch Date: Tue, 15 Dec 2015 15:59:40 -0500 Subject: [PATCH 0005/1223] 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 0006/1223] [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 0007/1223] 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 0008/1223] 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 0009/1223] 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 0010/1223] 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 0011/1223] [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 0012/1223] [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 0013/1223] [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 0014/1223] [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 0015/1223] [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 0016/1223] [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 0017/1223] 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 0018/1223] [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 0019/1223] [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 0020/1223] [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 0021/1223] 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 0022/1223] 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 +