From 5fd7c6f08c0650ed67297fc83c8a0590c9a92cc8 Mon Sep 17 00:00:00 2001 From: Estelle Date: Mon, 23 Mar 2015 18:48:19 -0700 Subject: [PATCH 0001/1054] 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 c38cdd20158ad76030d8a596b67bbc32d7b5494f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Fri, 11 Mar 2016 09:29:44 +0100 Subject: [PATCH 0002/1054] Add ascribe's styleguide to the list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 603f4f82e3..d4ed168963 100644 --- a/README.md +++ b/README.md @@ -2637,6 +2637,7 @@ Other Style Guides - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript) - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) + - **Ascribe**: [ascribe/javascript](https://github.com/ascribe/javascript) - **Avalara**: [avalara/javascript](https://github.com/avalara/javascript) - **Avant**: [avantcredit/javascript](https://github.com/avantcredit/javascript) - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript) From 8fe2f9ed522107e5f22794402342006fa2139aff Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 11 Mar 2016 16:33:31 -0800 Subject: [PATCH 0003/1054] [eslint config] [dev deps] update `eslint`, `eslint-plugin-react` --- packages/eslint-config-airbnb/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 0721839841..c4ecc16d43 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -43,8 +43,8 @@ "homepage": "https://github.com/airbnb/javascript", "devDependencies": { "babel-tape-runner": "^1.3.1", - "eslint": "^2.3.0", - "eslint-plugin-react": "^4.2.0", + "eslint": "^2.4.0", + "eslint-plugin-react": "^4.2.1", "react": "^0.14.7", "tape": "^4.5.1", "parallelshell": "^2.0.0" From 6f125a5e85840c08594bfc2a3d1c181282634fc9 Mon Sep 17 00:00:00 2001 From: Tim Cheung Date: Tue, 15 Mar 2016 15:11:28 +0100 Subject: [PATCH 0004/1054] fix react/prefer-stateless-function link --- packages/eslint-config-airbnb/CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/CHANGELOG.md b/packages/eslint-config-airbnb/CHANGELOG.md index bb9374e170..774fad0795 100644 --- a/packages/eslint-config-airbnb/CHANGELOG.md +++ b/packages/eslint-config-airbnb/CHANGELOG.md @@ -174,4 +174,5 @@ [react/jsx-no-bind]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md [react/no-is-mounted]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md [react/prefer-es6-class]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md -[react/jsx-quotes]: https://github.com/yannickcr/eslint-plugin-react/blob/f817e37beddddc84b4788969f07c524fa7f0823b/docs/rules/jsx-quotes.md \ No newline at end of file +[react/jsx-quotes]: https://github.com/yannickcr/eslint-plugin-react/blob/f817e37beddddc84b4788969f07c524fa7f0823b/docs/rules/jsx-quotes.md +[react/prefer-stateless-function]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md From 9eb24d6b61515747f5a67f179ddb3d73ad385121 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Wed, 16 Mar 2016 14:47:35 -0700 Subject: [PATCH 0005/1054] [editorial] clean up some constructor examples Fixes #792 --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d4ed168963..09f6f28627 100644 --- a/README.md +++ b/README.md @@ -890,23 +890,23 @@ Other Style Guides ```javascript // bad function Queue(contents = []) { - this._queue = [...contents]; + this.queue = [...contents]; } Queue.prototype.pop = function () { - const value = this._queue[0]; - this._queue.splice(0, 1); + const value = this.queue[0]; + this.queue.splice(0, 1); return value; - } + }; // good class Queue { constructor(contents = []) { - this._queue = [...contents]; + this.queue = [...contents]; } pop() { - const value = this._queue[0]; - this._queue.splice(0, 1); + const value = this.queue[0]; + this.queue.splice(0, 1); return value; } } From 5ded256d3fab29b7b3fa42238093b9af632fb32b Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sun, 20 Mar 2016 17:23:49 -0700 Subject: [PATCH 0006/1054] [Fix] re-enable `no-confusing-arrow` rule, with `allowParens` option enabled. Per #752, fixes #791. --- packages/eslint-config-airbnb/rules/es6.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index d0b7bbde9f..a26e49d9df 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -30,7 +30,9 @@ module.exports = { 'no-class-assign': 0, // disallow arrow functions where they could be confused with comparisons // http://eslint.org/docs/rules/no-confusing-arrow - 'no-confusing-arrow': 0, + 'no-confusing-arrow': [2, { + 'allowParens': true, + }], // disallow modifying variables that are declared using const 'no-const-assign': 2, // disallow symbol constructor From f796cfc81f14d80b67f341a436c4c31f3500bcd1 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sun, 20 Mar 2016 17:26:15 -0700 Subject: [PATCH 0007/1054] [peer deps] update `eslint`, `eslint-plugin-react` --- packages/eslint-config-airbnb/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index c4ecc16d43..ff8adb78c8 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -50,7 +50,7 @@ "parallelshell": "^2.0.0" }, "peerDependencies": { - "eslint": "^2.2.0", - "eslint-plugin-react": "^4.0.0" + "eslint": "^2.4.0", + "eslint-plugin-react": "^4.2.3" } } From 8db205c4d2309fcf31c2681366bdd35d68c77dff Mon Sep 17 00:00:00 2001 From: Arnav Singh Date: Sun, 20 Mar 2016 22:40:07 -0700 Subject: [PATCH 0008/1054] Fix "object destructuring for multiple return values" example ... to use the same destructured properties in the good and bad code. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 09f6f28627..432ef98900 100644 --- a/README.md +++ b/README.md @@ -476,7 +476,7 @@ Other Style Guides } // the caller selects only the data they need - const { left, right } = processInput(input); + const { left, top } = processInput(input); ``` From 94ace27f465bbbdd814bafedbbd3708b8d21b06e Mon Sep 17 00:00:00 2001 From: Gil Birman Date: Wed, 9 Mar 2016 08:59:48 -0800 Subject: [PATCH 0009/1054] Allow arrow functions in JSX props --- packages/eslint-config-airbnb/rules/react.js | 4 ++-- react/README.md | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index a5d0d17de2..470738b769 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -41,8 +41,8 @@ module.exports = { // 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, { - 'ignoreRefs': false, - 'allowArrowFunctions': false, + 'ignoreRefs': true, + 'allowArrowFunctions': true, 'allowBind': false, }], // Prevent duplicate props in JSX diff --git a/react/README.md b/react/README.md index 8bab601e12..6eddabcad2 100644 --- a/react/README.md +++ b/react/README.md @@ -274,6 +274,23 @@ ## Methods + - Use arrow functions to close over local variables. + + ```javascript + function ItemList(props) { + return ( +
    + {props.items.map((item, index) => ( + doSomethingWith(item.name, index)} + /> + ))} +
+ ); + } + ``` + - Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) > Why? A bind call in the render path creates a brand new function on every single render. From ec898a67e09a5f47b7afdc24dbb5bb3ab0214268 Mon Sep 17 00:00:00 2001 From: Juan Scolari Date: Mon, 21 Mar 2016 20:54:59 -0300 Subject: [PATCH 0010/1054] Add SysGarage to list of organizations --- README.md | 1 + es5/README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 432ef98900..6013998b27 100644 --- a/README.md +++ b/README.md @@ -2689,6 +2689,7 @@ Other Style Guides - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - **Springload**: [springload/javascript](https://github.com/springload/javascript) - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/guide-javascript) + - **SysGarage**: [sysgarage/javascript-style-guide](https://github.com/sysgarage/javascript-style-guide) - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) diff --git a/es5/README.md b/es5/README.md index caaa17b503..b2fa49d9c1 100644 --- a/es5/README.md +++ b/es5/README.md @@ -1672,6 +1672,7 @@ - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/javascript) - **Super**: [SuperJobs/javascript](https://github.com/SuperJobs/javascript) + - **SysGarage**: [sysgarage/javascript-style-guide](https://github.com/sysgarage/javascript-style-guide) - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) From ff6e1d0d08c129db5876a897ee146ae801178809 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 22 Mar 2016 23:34:59 -0700 Subject: [PATCH 0011/1054] [eslint config] v6.2.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 774fad0795..3968eea84b 100644 --- a/packages/eslint-config-airbnb/CHANGELOG.md +++ b/packages/eslint-config-airbnb/CHANGELOG.md @@ -1,3 +1,10 @@ +6.2.0 / 2016-03-22 +================== +- [new] Allow arrow functions in JSX props +- [fix] re-enable `no-confusing-arrow` rule, with `allowParens` option enabled ([#752](https://github.com/airbnb/javascript/issues/752), [#791](https://github.com/airbnb/javascript/issues/791)) +- [dev deps] update `tape`, `eslint`, `eslint-plugin-react` +- [peer deps] update `eslint`, `eslint-plugin-react` + 6.1.0 / 2016-02-22 ================== - [new] enable [`react/prefer-stateless-function`][react/prefer-stateless-function] diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index ff8adb78c8..da5bf3f2fc 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-airbnb", - "version": "6.1.0", + "version": "6.2.0", "description": "Airbnb's ESLint config, following our styleguide", "main": "index.js", "scripts": { From 5ce6fb1eae2b0a948e526d127654b044f34d3b1b Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 26 Mar 2016 22:39:17 -0700 Subject: [PATCH 0012/1054] [eslint config] [dev deps] update `eslint`, `eslint-plugin-react` --- packages/eslint-config-airbnb/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index da5bf3f2fc..0d059f0c8d 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -43,8 +43,8 @@ "homepage": "https://github.com/airbnb/javascript", "devDependencies": { "babel-tape-runner": "^1.3.1", - "eslint": "^2.4.0", - "eslint-plugin-react": "^4.2.1", + "eslint": "^2.5.3", + "eslint-plugin-react": "^4.2.3", "react": "^0.14.7", "tape": "^4.5.1", "parallelshell": "^2.0.0" From 24565121c1847fbf27d0854a1d2fc9accbbef4df Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 26 Mar 2016 22:42:29 -0700 Subject: [PATCH 0013/1054] [eslint config] [breaking] add `no-duplicate-imports` rule. --- README.md | 21 +++++++++++++++++++++ packages/eslint-config-airbnb/rules/es6.js | 3 +++ 2 files changed, 24 insertions(+) diff --git a/README.md b/README.md index 6013998b27..8233e4916e 100644 --- a/README.md +++ b/README.md @@ -1075,6 +1075,27 @@ Other Style Guides export default es6; ``` + + - [10.4](#modules--no-duplicate-imports) Only import from a path in one place. + eslint: [`no-duplicate-imports`](http://eslint.org/docs/rules/no-duplicate-imports) + > Why? Having multiple lines that import from the same path can make code harder to maintain. + + ```javascript + // bad + import foo from 'foo'; + // … some other imports … // + import { named1, named2 } from 'foo'; + + // good + import foo, { named1, named2 } from 'foo'; + + // good + import foo, { + named1, + named2, + } from 'foo'; + ``` + **[⬆ back to top](#table-of-contents)** ## Iterators and Generators diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index a26e49d9df..78a43b94cd 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -35,6 +35,9 @@ module.exports = { }], // disallow modifying variables that are declared using const 'no-const-assign': 2, + // disallow importing from the same path more than once + // http://eslint.org/docs/rules/no-duplicate-imports + 'no-duplicate-imports': 2, // disallow symbol constructor // http://eslint.org/docs/rules/no-new-symbol 'no-new-symbol': 2, From 81241b83cf3a95c1560d4080c39bf8b57381656f Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 26 Mar 2016 23:11:23 -0700 Subject: [PATCH 0014/1054] [eslint config] [breaking] add `no-useless-escape` rule. --- README.md | 14 ++++++++++++++ .../eslint-config-airbnb/rules/best-practices.js | 3 +++ 2 files changed, 17 insertions(+) diff --git a/README.md b/README.md index 8233e4916e..664b24921a 100644 --- a/README.md +++ b/README.md @@ -547,6 +547,20 @@ Other Style Guides - [6.5](#strings--eval) Never use `eval()` on a string, it opens too many vulnerabilities. + + - [6.6](#strings--escaping) Do not unnecessarily escape characters in strings. eslint: [`no-useless-escape`](http://eslint.org/docs/rules/no-useless-escape) + + > Why? Backslashes harm readability, thus they should only be present when necessary. + + ```javascript + // bad + const foo = '\'this\' \i\s \"quoted\"'; + + // good + const foo = '\'this\' is "quoted"'; + const foo = `'this' is "quoted"`; + ``` + **[⬆ back to top](#table-of-contents)** diff --git a/packages/eslint-config-airbnb/rules/best-practices.js b/packages/eslint-config-airbnb/rules/best-practices.js index ff782a5b7a..e9a0026546 100644 --- a/packages/eslint-config-airbnb/rules/best-practices.js +++ b/packages/eslint-config-airbnb/rules/best-practices.js @@ -113,6 +113,9 @@ module.exports = { 'no-unused-labels': 2, // disallow unnecessary .call() and .apply() 'no-useless-call': 0, + // disallow unnecessary string escaping + // http://eslint.org/docs/rules/no-useless-escape + 'no-useless-escape': 2, // disallow use of void operator 'no-void': 0, // disallow usage of configurable warning terms in comments: e.g. todo From 9415b88afd0d21800e6b595828f0526689084f0a Mon Sep 17 00:00:00 2001 From: Saad Quadri Date: Wed, 30 Mar 2016 02:50:21 -0400 Subject: [PATCH 0015/1054] Add missing description for 7.2 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 664b24921a..064e9f6276 100644 --- a/README.md +++ b/README.md @@ -582,7 +582,7 @@ Other Style Guides ``` - - [7.2](#functions--iife) Immediately invoked function expressions: eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE) + - [7.2](#functions--iife) Wrap immediately invoked function expressions in parentheses. eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE) > Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE. From 5ec8765a28923671a59465901c03a7f997eb861a Mon Sep 17 00:00:00 2001 From: Yarun Luon Date: Thu, 31 Mar 2016 18:17:26 -0700 Subject: [PATCH 0016/1054] Add Chartboost to 'In the Wild' --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 064e9f6276..ff42af3d2c 100644 --- a/README.md +++ b/README.md @@ -2679,6 +2679,7 @@ Other Style Guides - **Bisk**: [bisk/javascript](https://github.com/Bisk/javascript/) - **Blendle**: [blendle/javascript](https://github.com/blendle/javascript) - **Brainshark**: [brainshark/javascript](https://github.com/brainshark/javascript) + - **Chartboost**: [ChartBoost/javascript-style-guide](https://github.com/ChartBoost/javascript-style-guide) - **ComparaOnline**: [comparaonline/javascript](https://github.com/comparaonline/javascript-style-guide) - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) From 062929ee5f5ca368b2b36390fc36aed34ed96797 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 1 Apr 2016 14:25:31 -0700 Subject: [PATCH 0017/1054] [eslint config] [breaking] error on debugger statements --- packages/eslint-config-airbnb/rules/errors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/errors.js b/packages/eslint-config-airbnb/rules/errors.js index 1c1addf5fa..62594e0c3e 100644 --- a/packages/eslint-config-airbnb/rules/errors.js +++ b/packages/eslint-config-airbnb/rules/errors.js @@ -9,7 +9,7 @@ module.exports = { // disallow control characters in regular expressions 'no-control-regex': 2, // disallow use of debugger - 'no-debugger': 1, + 'no-debugger': 2, // disallow duplicate arguments in functions 'no-dupe-args': 2, // disallow duplicate keys when creating object literals From 5b9f081d1dac5240f60313784de316c9a63fde62 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 2 Apr 2016 17:46:24 -0700 Subject: [PATCH 0018/1054] [eslint config] [deps] update `eslint`, `react` --- packages/eslint-config-airbnb/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 0d059f0c8d..aefe9a76a6 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -43,14 +43,14 @@ "homepage": "https://github.com/airbnb/javascript", "devDependencies": { "babel-tape-runner": "^1.3.1", - "eslint": "^2.5.3", + "eslint": "^2.6.0", "eslint-plugin-react": "^4.2.3", - "react": "^0.14.7", + "react": "^0.14.8", "tape": "^4.5.1", "parallelshell": "^2.0.0" }, "peerDependencies": { - "eslint": "^2.4.0", + "eslint": "^2.6.0", "eslint-plugin-react": "^4.2.3" } } From 76e1e4c1de263948f9c35bf43c4de526b17bebb9 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 2 Apr 2016 18:08:27 -0700 Subject: [PATCH 0019/1054] [eslint config] [breaking] Add `no-dupe-class-members` rule + section. Closes #785. --- README.md | 30 +++++++++++++++++++--- packages/eslint-config-airbnb/rules/es6.js | 3 +++ 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ff42af3d2c..03c422d931 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Other Style Guides 1. [Strings](#strings) 1. [Functions](#functions) 1. [Arrow Functions](#arrow-functions) - 1. [Constructors](#constructors) + 1. [Classes & Constructors](#constructors) 1. [Modules](#modules) 1. [Iterators and Generators](#iterators-and-generators) 1. [Properties](#properties) @@ -894,7 +894,7 @@ Other Style Guides **[⬆ back to top](#table-of-contents)** -## Constructors +## Classes & Constructors - [9.1](#constructors--use-class) Always use `class`. Avoid manipulating `prototype` directly. @@ -1008,7 +1008,7 @@ Other Style Guides ``` - - [9.5](#constructors--no-useless) Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary. [`no-useless-constructor`](http://eslint.org/docs/rules/no-useless-constructor) + - [9.5](#constructors--no-useless) Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary. eslint: [`no-useless-constructor`](http://eslint.org/docs/rules/no-useless-constructor) ```javascript // bad @@ -1036,6 +1036,30 @@ Other Style Guides } ``` + + - [9.6](#classes--no-duplicate-members) Avoid duplicate class members. eslint: [`no-dupe-class-members`](http://eslint.org/docs/rules/no-dupe-class-members) + + > Why? Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug. + + ```javascript + // bad + class Foo { + bar() { return 1; } + bar() { return 2; } + } + + // good + class Foo { + bar() { return 1; } + } + + // good + class Foo { + bar() { return 2; } + } + ``` + + **[⬆ back to top](#table-of-contents)** diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index 78a43b94cd..a826da8d0e 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -35,6 +35,9 @@ module.exports = { }], // disallow modifying variables that are declared using const 'no-const-assign': 2, + // disallow duplicate class members + // http://eslint.org/docs/rules/no-dupe-class-members + 'no-dupe-class-members': 2, // disallow importing from the same path more than once // http://eslint.org/docs/rules/no-duplicate-imports 'no-duplicate-imports': 2, From 6671a55556e09b9f70924e9fd63e76c9e079fa5e Mon Sep 17 00:00:00 2001 From: Nick Date: Sun, 3 Apr 2016 09:59:12 -0400 Subject: [PATCH 0020/1054] CHORE - Remove Trailing Spaces --- linters/SublimeLinter/SublimeLinter.sublime-settings | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/linters/SublimeLinter/SublimeLinter.sublime-settings b/linters/SublimeLinter/SublimeLinter.sublime-settings index 12360f3f1c..259dbaff6a 100644 --- a/linters/SublimeLinter/SublimeLinter.sublime-settings +++ b/linters/SublimeLinter/SublimeLinter.sublime-settings @@ -63,7 +63,7 @@ // Warn when variables are defined but never used. "unused": true, - + // Enforce line length to 80 characters "maxlen": 80, From f21412cba916e4af18cd1594a6b6d18ef4ebc341 Mon Sep 17 00:00:00 2001 From: Amin Date: Mon, 4 Apr 2016 11:39:47 +0400 Subject: [PATCH 0021/1054] Broken link to Classes and constructors --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 03c422d931..3034aa4c24 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Other Style Guides 1. [Strings](#strings) 1. [Functions](#functions) 1. [Arrow Functions](#arrow-functions) - 1. [Classes & Constructors](#constructors) + 1. [Classes & Constructors](#classes--constructors) 1. [Modules](#modules) 1. [Iterators and Generators](#iterators-and-generators) 1. [Properties](#properties) From a2bdbb83d15e8d35fa40a14b888ad1eee029c7df Mon Sep 17 00:00:00 2001 From: Peter Kuiper Date: Mon, 4 Apr 2016 14:20:17 +0200 Subject: [PATCH 0022/1054] Add KickorStick to 'In the Wild' --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3034aa4c24..5384d7dc9f 100644 --- a/README.md +++ b/README.md @@ -2727,6 +2727,7 @@ Other Style Guides - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) - **JeopardyBot**: [kesne/jeopardy-bot](https://github.com/kesne/jeopardy-bot/blob/master/STYLEGUIDE.md) - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) + - **KickorStick**: [kickorstick/javascript](https://github.com/kickorstick/javascript) - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/Javascript-style-guide) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) From 6e770062bb84aa054ff939c1b805cbb12e9195a1 Mon Sep 17 00:00:00 2001 From: Kevin Moot Date: Mon, 4 Apr 2016 19:07:35 -0500 Subject: [PATCH 0023/1054] Adding The Nerdery to the "In the Wild" section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5384d7dc9f..ec1dca2cc5 100644 --- a/README.md +++ b/README.md @@ -2753,6 +2753,7 @@ Other Style Guides - **SysGarage**: [sysgarage/javascript-style-guide](https://github.com/sysgarage/javascript-style-guide) - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) + - **The Nerdery**: [thenerdery/javascript-standards](https://github.com/thenerdery/javascript-standards) - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) - **WeBox Studio**: [weboxstudio/javascript](https://github.com/weboxstudio/javascript) From acbddc1083d5ea7608fba212bb6898ca6e224afc Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:14:03 -0700 Subject: [PATCH 0024/1054] Add note and rule about image alt text We want our React apps to be accessible. One thing that developers can do is properly use alt text on images. Thankfully, there is an ESLint rule that will enforce these things for us. --- packages/eslint-config-airbnb/package.json | 2 ++ packages/eslint-config-airbnb/rules/react.js | 5 +++++ .../test/test-react-order.js | 4 ++-- react/README.md | 16 ++++++++++++++++ 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index aefe9a76a6..769c8950a3 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -44,6 +44,7 @@ "devDependencies": { "babel-tape-runner": "^1.3.1", "eslint": "^2.6.0", + "eslint-plugin-jsx-a11y": "^0.6.0", "eslint-plugin-react": "^4.2.3", "react": "^0.14.8", "tape": "^4.5.1", @@ -51,6 +52,7 @@ }, "peerDependencies": { "eslint": "^2.6.0", + "eslint-plugin-jsx-a11y": "^0.6.0", "eslint-plugin-react": "^4.2.3" } } diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 470738b769..0b128aef63 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -1,5 +1,6 @@ module.exports = { 'plugins': [ + 'jsx-a11y', 'react' ], 'ecmaFeatures': { @@ -8,6 +9,10 @@ module.exports = { // View link below for react rules documentation // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules 'rules': { + // Require to have a non-empty `alt` prop, or role="presentation" + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md + 'jsx-a11y/img-uses-alt': 2, + // 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, { 'ignoreTranspilerName': false }], diff --git a/packages/eslint-config-airbnb/test/test-react-order.js b/packages/eslint-config-airbnb/test/test-react-order.js index f5b2d452fe..81d8235fce 100644 --- a/packages/eslint-config-airbnb/test/test-react-order.js +++ b/packages/eslint-config-airbnb/test/test-react-order.js @@ -28,9 +28,9 @@ ${body} } test('validate react prop order', t => { - t.test('make sure our eslintrc has React linting dependencies', t => { + t.test('make sure our eslintrc has React and JSX linting dependencies', t => { t.plan(1); - t.equal(reactRules.plugins[0], 'react', 'uses eslint-plugin-react'); + t.deepEqual(reactRules.plugins, ['jsx-a11y', 'react']); }); t.test('passes a good component', t => { diff --git a/react/README.md b/react/README.md index 6eddabcad2..29af5cf806 100644 --- a/react/README.md +++ b/react/README.md @@ -217,6 +217,22 @@ /> ``` + - Always include a non-empty `alt` prop on `` tags. If `alt` is an empty string, the `` must have `role="presentation"`. eslint: [`jsx-a11y/img-uses-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md) + + ```javascript + // bad + + + // bad + + + // good + Me waving hello + + // good + + ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From f2aca29ed95dbec65590660e5e0032a00808cf4a Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:21:48 -0700 Subject: [PATCH 0025/1054] Add note and rule about redundant alt text Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text. This will give people using assistive technologies a smoother experience. --- packages/eslint-config-airbnb/rules/react.js | 4 ++++ react/README.md | 12 ++++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 0b128aef63..f505c75ba1 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -13,6 +13,10 @@ module.exports = { // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md 'jsx-a11y/img-uses-alt': 2, + // Prevent img alt text from containing redundant words like "image", "picture", or "photo" + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/redundant-alt.md + 'jsx-a11y/redundant-alt': 2, + // 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, { 'ignoreTranspilerName': false }], diff --git a/react/README.md b/react/README.md index 29af5cf806..bc149b0908 100644 --- a/react/README.md +++ b/react/README.md @@ -233,6 +233,18 @@ ``` + - Do not use words like "image", "photo", or "picture" in `` `alt` props. eslint: [`jsx-a11y/redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md) + + > Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text. + + ```javascript + // bad + Picture of me waving hello + + // good + Me waving hello + ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From 0c3b13fe93e880450305e6c87a1a59f14e042bc5 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:27:21 -0700 Subject: [PATCH 0026/1054] Add note and rule about valid, non-abstract ARIA roles This rule will help people use only valid roles, which might save people from simple, accessibility-busting mistakes. --- packages/eslint-config-airbnb/rules/react.js | 4 ++++ react/README.md | 13 +++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index f505c75ba1..02794495b1 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -17,6 +17,10 @@ module.exports = { // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/redundant-alt.md 'jsx-a11y/redundant-alt': 2, + // Require ARIA roles to be valid and non-abstract + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/valid-aria-role.md + 'jsx-a11y/valid-aria-role': 2, + // 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, { 'ignoreTranspilerName': false }], diff --git a/react/README.md b/react/README.md index bc149b0908..0ac01a5b6f 100644 --- a/react/README.md +++ b/react/README.md @@ -245,6 +245,19 @@ Me waving hello ``` + - Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/roles#role_definitions). eslint: [`jsx-a11y/valid-aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/valid-aria-role.md) + + ```javascript + // bad - not an ARIA role +
+ + // bad - abstract ARIA role +
+ + // good +
+ ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From f697a15e5036932805cb7a5160b6c0ceb2401afe Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:32:55 -0700 Subject: [PATCH 0027/1054] Add note and rule about not using accessKey Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility. --- packages/eslint-config-airbnb/rules/react.js | 4 ++++ react/README.md | 18 +++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 02794495b1..3c05265b06 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -9,6 +9,10 @@ module.exports = { // View link below for react rules documentation // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules 'rules': { + // Prevent use of `accessKey` + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md + 'jsx-a11y/no-access-key': 2, + // Require to have a non-empty `alt` prop, or role="presentation" // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md 'jsx-a11y/img-uses-alt': 2, diff --git a/react/README.md b/react/README.md index 0ac01a5b6f..4fc7c7c783 100644 --- a/react/README.md +++ b/react/README.md @@ -249,15 +249,27 @@ ```javascript // bad - not an ARIA role -
+
// bad - abstract ARIA role -
+
// good -
+
``` + - Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) + + > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility. + + ```javascript + // bad +
+ + // good +
+ ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From 3f73e35b1874128161a97acbc6a299a801ec077b Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:34:21 -0700 Subject: [PATCH 0028/1054] Use jsx fenced codeblocks for JSX code GitHub knows how to do JSX syntax highlighting. Since we are using JSX in this document, I figured we might as well tell GitHub to highlight the syntax as JSX here. This will lead to a better reading experience. --- react/README.md | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/react/README.md b/react/README.md index 4fc7c7c783..6db60dd18a 100644 --- a/react/README.md +++ b/react/README.md @@ -29,7 +29,7 @@ - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) - ```javascript + ```jsx // bad const Listing = React.createClass({ // ... @@ -49,8 +49,7 @@ And if you don't have state or refs, prefer normal functions (not arrow functions) over classes: - ```javascript - + ```jsx // bad class Listing extends React.Component { render() { @@ -75,7 +74,7 @@ - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) - ```javascript + ```jsx // bad import reservationCard from './ReservationCard'; @@ -91,7 +90,7 @@ - **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 + ```jsx // bad import Footer from './Footer/Footer'; @@ -106,7 +105,7 @@ - Do not use `displayName` for naming components. Instead, name the component by reference. - ```javascript + ```jsx // bad export default React.createClass({ displayName: 'ReservationCard', @@ -122,7 +121,7 @@ - Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) - ```javascript + ```jsx // bad @@ -152,7 +151,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. - ```javascript + ```jsx // bad @@ -170,7 +169,7 @@ - Always include a single space in your self-closing tag. - ```javascript + ```jsx // bad @@ -189,7 +188,7 @@ - Always use camelCase for prop names. - ```javascript + ```jsx // bad