From 3c504e9622588aadbb2c9f4163ea6699e75d6459 Mon Sep 17 00:00:00 2001 From: James Bunt Date: Wed, 23 Apr 2014 11:00:09 +1200 Subject: [PATCH 0001/1389] Remove unnecessary extra newline that confused some markdown previewers (in my case Atom.io). --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 3409c68ccd..ab248d07a1 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,6 @@ ```javascript var someStack = []; - // bad someStack[someStack.length] = 'abracadabra'; From 5fd7c6f08c0650ed67297fc83c8a0590c9a92cc8 Mon Sep 17 00:00:00 2001 From: Estelle Date: Mon, 23 Mar 2015 18:48:19 -0700 Subject: [PATCH 0002/1389] 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 df5029b5a55602a0b65f6a0a8dd7ac9a757caea8 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 6 May 2015 15:49:50 -0700 Subject: [PATCH 0003/1389] [pkg] bump version --- package.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2fe47fb268..ff8167fad5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "airbnb-style", - "version": "1.0.0", + "version": "2.0.0", "description": "A mostly reasonable approach to JavaScript.", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" @@ -12,7 +12,11 @@ "keywords": [ "style guide", "lint", - "airbnb" + "airbnb", + "es6", + "es2015", + "react", + "jsx" ], "author": "Harrison Shoff (https://twitter.com/hshoff)", "license": "MIT", From 36ddb36e21a3e7c62a93e9d0f194973c0578fccb Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 7 May 2015 11:35:42 -0700 Subject: [PATCH 0004/1389] [conditionals] clarify conditionals. fixes #336 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d80628486a..c8398ad88b 100644 --- a/README.md +++ b/README.md @@ -1059,7 +1059,7 @@ ## Comparison Operators & Equality - Use `===` and `!==` over `==` and `!=`. - - Comparison operators are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: + - Comparison operators are evaluated in conditional statements using coercion with the `ToBoolean` method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** From 42958035765aa5cfacef2fdc2cfc92a51e6b704a Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 7 May 2015 11:44:19 -0700 Subject: [PATCH 0005/1389] [conditionals] use if statement --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c8398ad88b..4067a930ce 100644 --- a/README.md +++ b/README.md @@ -1059,7 +1059,7 @@ ## Comparison Operators & Equality - Use `===` and `!==` over `==` and `!=`. - - Comparison operators are evaluated in conditional statements using coercion with the `ToBoolean` method and always follow these simple rules: + - Comparison operators are evaluated in `if` statements using coercion with the `ToBoolean` method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** From 871a798a0dc22b9e667fcc291f5f11ee5c87870d Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 7 May 2015 11:58:16 -0700 Subject: [PATCH 0006/1389] [conditionals] update wording, es5 version --- README.md | 2 +- es5/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4067a930ce..8a2bd91dc4 100644 --- a/README.md +++ b/README.md @@ -1059,7 +1059,7 @@ ## Comparison Operators & Equality - Use `===` and `!==` over `==` and `!=`. - - Comparison operators are evaluated in `if` statements using coercion with the `ToBoolean` method and always follow these simple rules: + - Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** diff --git a/es5/README.md b/es5/README.md index 02ecc75ee6..85fc17db0d 100644 --- a/es5/README.md +++ b/es5/README.md @@ -572,7 +572,7 @@ ## Comparison Operators & Equality - Use `===` and `!==` over `==` and `!=`. - - Comparison operators are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: + - Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** From 27cc9a008c4ed96b5076cd54b692bd48ed430308 Mon Sep 17 00:00:00 2001 From: Michael Deol Date: Tue, 12 May 2015 11:37:09 -0700 Subject: [PATCH 0007/1389] Addition of Billabong Orginization --- README.md | 1 + es5/README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 8a2bd91dc4..f9f22f2bc6 100644 --- a/README.md +++ b/README.md @@ -2043,6 +2043,7 @@ This is a collection of links to the various es6 features. - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) - **Avalara**: [avalara/javascript](https://github.com/avalara/javascript) + - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript) - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) diff --git a/es5/README.md b/es5/README.md index 85fc17db0d..b1a4efcbe9 100644 --- a/es5/README.md +++ b/es5/README.md @@ -1637,6 +1637,7 @@ - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) - **Avalara**: [avalara/javascript](https://github.com/avalara/javascript) + - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript) - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) From 8bc1c17585e0f75b3a58c914902f00ff2630394f Mon Sep 17 00:00:00 2001 From: Michael Deol Date: Tue, 12 May 2015 11:57:40 -0700 Subject: [PATCH 0008/1389] Fixed spacing on code block under Comments. Even though github was rendering this correctly; I did this to fix tools like https://github.com/suan/vim-instant-markdown from breaking syntax. --- README.md | 2 +- es5/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8a2bd91dc4..c2182be754 100644 --- a/README.md +++ b/README.md @@ -1242,7 +1242,7 @@ this.total = 0; } } - ``` + ``` **[⬆ back to top](#table-of-contents)** diff --git a/es5/README.md b/es5/README.md index 85fc17db0d..81376ee844 100644 --- a/es5/README.md +++ b/es5/README.md @@ -757,7 +757,7 @@ return this; } - ``` + ``` **[⬆ back to top](#table-of-contents)** From 535c4f73d0b72dd793278b41609a1cfcec35d0e2 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 13 May 2015 17:49:26 -0700 Subject: [PATCH 0009/1389] add links to individual rules --- README.md | 200 +++++++++++++++++++++++++++--------------------------- 1 file changed, 100 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index 114758b335..8c1a265ad3 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ ## Types - - **Primitives**: When you access a primitive type you work directly on its value. + - [1.1](#1.1) **Primitives**: When you access a primitive type you work directly on its value. + `string` + `number` @@ -63,7 +63,7 @@ console.log(foo, bar); // => 1, 9 ``` - - **Complex**: When you access a complex type you work on a reference to its value. + - [1.2](#1.2) **Complex**: When you access a complex type you work on a reference to its value. + `object` + `array` @@ -82,7 +82,7 @@ ## References - - Use `const` for all of your references; avoid using `var`. + - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. > Why? This ensures that you can't reassign your references (mutation), which can lead to bugs and difficult to comprehend code. @@ -96,7 +96,7 @@ const b = 2; ``` - - If you must mutate references, use `let` instead of `var`. + - [2.2](#2.2) If you must mutate references, use `let` instead of `var`. > Why? `let` is block-scoped rather than function-scoped like `var`. @@ -114,7 +114,7 @@ } ``` - - Note that both `let` and `const` are block-scoped. + - [2.3](#2.3) Note that both `let` and `const` are block-scoped. ```javascript // const and let only exist in the blocks they are defined in. @@ -130,7 +130,7 @@ ## Objects - - Use the literal syntax for object creation. + - [3.1](#3.1) Use the literal syntax for object creation. ```javascript // bad @@ -140,7 +140,7 @@ const item = {}; ``` - - Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). + - [3.2](#3.2) Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). ```javascript // bad @@ -156,7 +156,7 @@ }; ``` - - Use readable synonyms in place of reserved words. + - [3.3](#3.3) Use readable synonyms in place of reserved words. ```javascript // bad @@ -176,7 +176,7 @@ ``` - - Use computed property names when creating objects with dynamic property names. + - [3.4](#3.4) Use computed property names when creating objects with dynamic property names. > Why? They allow you to define all the properties of an object in one place. @@ -202,7 +202,7 @@ ``` - - Use object method shorthand. + - [3.5](#3.5) Use object method shorthand. ```javascript // bad @@ -225,7 +225,7 @@ ``` - - Use property value shorthand. + - [3.6](#3.6) Use property value shorthand. > Why? It is shorter to write and descriptive. @@ -243,7 +243,7 @@ }; ``` - - Group your shorthand properties at the beginning of your object declaration. + - [3.7](#3.7) Group your shorthand properties at the beginning of your object declaration. > Why? It's easier to tell which properties are using the shorthand. @@ -276,7 +276,7 @@ ## Arrays - - Use the literal syntax for array creation. + - [4.1](#4.1) Use the literal syntax for array creation. ```javascript // bad @@ -286,7 +286,7 @@ const items = []; ``` - - Use Array#push instead of direct assignment to add items to an array. + - [4.2](#4.2) Use Array#push instead of direct assignment to add items to an array. ```javascript const someStack = []; @@ -300,7 +300,7 @@ ``` - - Use array spreads `...` to copy arrays. + - [4.3](#4.3) Use array spreads `...` to copy arrays. ```javascript // bad @@ -315,7 +315,7 @@ // good const itemsCopy = [...items]; ``` - - To convert an array-like object to an array, use Array#from. + - [4.4](#4.4) To convert an array-like object to an array, use Array#from. ```javascript const foo = document.querySelectorAll('.foo'); @@ -326,7 +326,7 @@ ## Destructuring - - Use object destructuring when accessing and using multiple properties of an object. + - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. > Why? Destructuring saves you from creating temporary references for those properties. @@ -351,7 +351,7 @@ } ``` - - Use array destructuring. + - [5.2](#5.2) Use array destructuring. ```javascript const arr = [1, 2, 3, 4]; @@ -364,7 +364,7 @@ const [first, second] = arr; ``` - - Use object destructuring for multiple return values, not array destructuring. + - [5.3](#5.3) Use object destructuring for multiple return values, not array destructuring. > Why? You can add new properties over time or change the order of things without breaking call sites. @@ -393,7 +393,7 @@ ## Strings - - Use single quotes `''` for strings. + - [6.1](#6.1) Use single quotes `''` for strings. ```javascript // bad @@ -403,8 +403,8 @@ const name = 'Capt. Janeway'; ``` - - Strings longer than 80 characters should be written across multiple lines using string concatenation. - - Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). + - [6.2](#6.2) Strings longer than 80 characters should be written across multiple lines using string concatenation. + - [6.3](#6.3) Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). ```javascript // bad @@ -423,7 +423,7 @@ ``` - - When programmatically building up strings, use template strings instead of concatenation. + - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. > Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features. @@ -449,7 +449,7 @@ ## Functions - - Use function declarations instead of function expressions. + - [7.1](#7.1) Use function declarations instead of function expressions. > Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions. @@ -463,7 +463,7 @@ } ``` - - Function expressions: + - [7.2](#7.2) Function expressions: ```javascript // immediately-invoked function expression (IIFE) @@ -472,8 +472,8 @@ })(); ``` - - Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. - - **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). + - [7.3](#7.3) Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. + - [7.4](#7.4) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). ```javascript // bad @@ -492,7 +492,7 @@ } ``` - - Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. + - [7.5](#7.5) Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. ```javascript // bad @@ -507,7 +507,7 @@ ``` - - Never use `arguments`, opt to use rest syntax `...` instead. + - [7.6](#7.6) Never use `arguments`, opt to use rest syntax `...` instead. > Why? `...` is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like like `arguments`. @@ -525,7 +525,7 @@ ``` - - Use default parameter syntax rather than mutating function arguments. + - [7.7](#7.7) Use default parameter syntax rather than mutating function arguments. ```javascript // really bad @@ -551,7 +551,7 @@ } ``` - - Avoid side effects with default parameters + - [7.8](#7.8) Avoid side effects with default parameters > Why? They are confusing to reason about. @@ -572,7 +572,7 @@ ## Arrow Functions - - When you must use function expressions (as when passing an anonymous function), use arrow function notation. + - [8.1](#8.1) When you must use function expressions (as when passing an anonymous function), use arrow function notation. > Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax. @@ -590,7 +590,7 @@ }); ``` - - If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement. + - [8.2](#8.2) If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement. > Why? Syntactic sugar. It reads well when multiple functions are chained together. @@ -606,7 +606,7 @@ }); ``` - - Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments. + - [8.3](#8.3) Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments. > Why? These declarations read better with parentheses. They are also required when you have multiple parameters so this enforces consistency. @@ -623,7 +623,7 @@ ## Constructors - - Always use `class`. Avoid manipulating `prototype` directly. + - [9.1](#9.1) Always use `class`. Avoid manipulating `prototype` directly. > Why? `class` syntax is more concise and easier to reason about. @@ -652,7 +652,7 @@ } ``` - - Use `extends` for inheritance. + - [9.2](#9.2) Use `extends` for inheritance. > Why? It is a built-in way to inherit prototype functionality without breaking `instanceof`. @@ -675,7 +675,7 @@ } ``` - - Methods can return `this` to help with method chaining. + - [9.3](#9.3) Methods can return `this` to help with method chaining. ```javascript // bad @@ -712,7 +712,7 @@ ``` - - It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. + - [9.4](#9.4) It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. ```javascript class Jedi { @@ -735,7 +735,7 @@ ## Modules - - Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system. + - [10.1](#10.1) Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system. > Why? Modules are the future, let's start using the future now. @@ -753,7 +753,7 @@ export default es6; ``` - - Do not use wildcard imports. + - [10.2](#10.2) Do not use wildcard imports. > Why? This makes sure you have a single default export. @@ -765,7 +765,7 @@ import AirbnbStyleGuide from './AirbnbStyleGuide'; ``` - - And do not export directly from an import. + - [10.3](#10.3) And do not export directly from an import. > Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent. @@ -784,7 +784,7 @@ ## Iterators and Generators - - Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. + - [11.1](#11.1) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. > Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects. @@ -809,7 +809,7 @@ sum === 15; ``` - - Don't use generators for now. + - [11.2](#11.2) Don't use generators for now. > Why? They don't transpile well to ES5. @@ -818,7 +818,7 @@ ## Properties - - Use dot notation when accessing properties. + - [12.1](#12.1) Use dot notation when accessing properties. ```javascript const luke = { @@ -833,7 +833,7 @@ const isJedi = luke.jedi; ``` - - Use subscript notation `[]` when accessing properties with a variable. + - [12.2](#12.2) Use subscript notation `[]` when accessing properties with a variable. ```javascript const luke = { @@ -853,7 +853,7 @@ ## Variables - - Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. + - [13.1](#13.1) Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. ```javascript // bad @@ -863,7 +863,7 @@ const superPower = new SuperPower(); ``` - - Use one `const` declaration per variable. + - [13.2](#13.2) Use one `const` declaration per variable. > Why? It's easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs. @@ -885,7 +885,7 @@ const dragonball = 'z'; ``` - - Group all your `const`s and then group all your `let`s. + - [13.3](#13.3) Group all your `const`s and then group all your `let`s. > Why? This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. @@ -910,7 +910,7 @@ let length; ``` - - Assign variables where you need them, but place them in a reasonable place. + - [13.4](#13.4) Assign variables where you need them, but place them in a reasonable place. > Why? `let` and `const` are block scoped and not function scoped. @@ -962,7 +962,7 @@ ## Hoisting - - `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). + - [14.1](#14.1) `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). ```javascript // we know this wouldn't work (assuming there @@ -997,7 +997,7 @@ } ``` - - Anonymous function expressions hoist their variable name, but not the function assignment. + - [14.2](#14.2) Anonymous function expressions hoist their variable name, but not the function assignment. ```javascript function example() { @@ -1011,7 +1011,7 @@ } ``` - - Named function expressions hoist the variable name, not the function name or the function body. + - [14.3](#14.3) Named function expressions hoist the variable name, not the function name or the function body. ```javascript function example() { @@ -1039,7 +1039,7 @@ } ``` - - Function declarations hoist their name and the function body. + - [14.4](#14.4) Function declarations hoist their name and the function body. ```javascript function example() { @@ -1058,8 +1058,8 @@ ## Comparison Operators & Equality - - Use `===` and `!==` over `==` and `!=`. - - Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. + - [15.2](#15.2) Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** @@ -1075,7 +1075,7 @@ } ``` - - Use shortcuts. + - [15.3](#15.3) Use shortcuts. ```javascript // bad @@ -1099,14 +1099,14 @@ } ``` - - For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. + - [15.4](#15.4) For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. **[⬆ back to top](#table-of-contents)** ## Blocks - - Use braces with all multi-line blocks. + - [16.1](#16.1) Use braces with all multi-line blocks. ```javascript // bad @@ -1130,7 +1130,7 @@ } ``` - - If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your + - [16.2](#16.2) If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your `if` block's closing brace. ```javascript @@ -1158,7 +1158,7 @@ ## Comments - - Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. + - [17.1](#17.1) Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. ```javascript // bad @@ -1190,7 +1190,7 @@ } ``` - - Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment. + - [17.2](#17.2) Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment. ```javascript // bad @@ -1220,9 +1220,9 @@ } ``` - - Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME -- need to figure this out` or `TODO -- need to implement`. + - [17.3](#17.3) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME -- need to figure this out` or `TODO -- need to implement`. - - Use `// FIXME:` to annotate problems. + - [17.4](#17.4) Use `// FIXME:` to annotate problems. ```javascript class Calculator { @@ -1233,7 +1233,7 @@ } ``` - - Use `// TODO:` to annotate solutions to problems. + - [17.5](#17.5) Use `// TODO:` to annotate solutions to problems. ```javascript class Calculator { @@ -1249,7 +1249,7 @@ ## Whitespace - - Use soft tabs set to 2 spaces. + - [18.1](#18.1) Use soft tabs set to 2 spaces. ```javascript // bad @@ -1268,7 +1268,7 @@ } ``` - - Place 1 space before the leading brace. + - [18.2](#18.2) Place 1 space before the leading brace. ```javascript // bad @@ -1294,7 +1294,7 @@ }); ``` - - Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations. + - [18.3](#18.3) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations. ```javascript // bad @@ -1318,7 +1318,7 @@ } ``` - - Set off operators with spaces. + - [18.4](#18.4) Set off operators with spaces. ```javascript // bad @@ -1328,7 +1328,7 @@ const x = y + 5; ``` - - End files with a single newline character. + - [18.5](#18.5) End files with a single newline character. ```javascript // bad @@ -1352,7 +1352,7 @@ })(this);↵ ``` - - Use indentation when making long method chains. Use a leading dot, which + - [18.5](#18.5) Use indentation when making long method chains. Use a leading dot, which emphasizes that the line is a method call, not a new statement. ```javascript @@ -1392,7 +1392,7 @@ .call(tron.led); ``` - - Leave a blank line after blocks and before the next statement + - [18.6](#18.6) Leave a blank line after blocks and before the next statement ```javascript // bad @@ -1434,7 +1434,7 @@ ## Commas - - Leading commas: **Nope.** + - [19.1](#19.1) Leading commas: **Nope.** ```javascript // bad @@ -1468,7 +1468,7 @@ }; ``` - - Additional trailing comma: **Yup.** + - [19.2](#19.2) Additional trailing comma: **Yup.** > Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](es5/README.md#commas) in legacy browsers. @@ -1516,7 +1516,7 @@ ## Semicolons - - **Yup.** + - [20.1](#20.1) **Yup.** ```javascript // bad @@ -1545,8 +1545,8 @@ ## Type Casting & Coercion - - Perform type coercion at the beginning of the statement. - - Strings: + - [21.1](#21.1) Perform type coercion at the beginning of the statement. + - [21.2](#21.2) Strings: ```javascript // => this.reviewScore = 9; @@ -1558,7 +1558,7 @@ const totalScore = String(this.reviewScore); ``` - - Use `parseInt` for Numbers and always with a radix for type casting. + - [21.3](#21.3) Use `parseInt` for Numbers and always with a radix for type casting. ```javascript const inputValue = '4'; @@ -1582,7 +1582,7 @@ const val = parseInt(inputValue, 10); ``` - - If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing. + - [21.4](#21.4) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing. ```javascript // good @@ -1594,7 +1594,7 @@ const val = inputValue >> 0; ``` - - **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: + - [21.5](#21.5) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: ```javascript 2147483647 >> 0 //=> 2147483647 @@ -1602,7 +1602,7 @@ 2147483649 >> 0 //=> -2147483647 ``` - - Booleans: + - [21.6](#21.6) Booleans: ```javascript const age = 0; @@ -1622,7 +1622,7 @@ ## Naming Conventions - - Avoid single letter names. Be descriptive with your naming. + - [22.1](#22.1) Avoid single letter names. Be descriptive with your naming. ```javascript // bad @@ -1636,7 +1636,7 @@ } ``` - - Use camelCase when naming objects, functions, and instances. + - [22.2](#22.2) Use camelCase when naming objects, functions, and instances. ```javascript // bad @@ -1649,7 +1649,7 @@ function thisIsMyFunction() {} ``` - - Use PascalCase when naming constructors or classes. + - [22.3](#22.3) Use PascalCase when naming constructors or classes. ```javascript // bad @@ -1673,7 +1673,7 @@ }); ``` - - Use a leading underscore `_` when naming private properties. + - [22.4](#22.4) Use a leading underscore `_` when naming private properties. ```javascript // bad @@ -1684,7 +1684,7 @@ this._firstName = 'Panda'; ``` - - Don't save references to `this`. Use arrow functions or Function#bind. + - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. ```javascript // bad @@ -1711,7 +1711,7 @@ } ``` - - If your file exports a single class, your filename should be exactly the name of the class. + - [22.6](#22.6) If your file exports a single class, your filename should be exactly the name of the class. ```javascript // file contents class CheckBox { @@ -1730,7 +1730,7 @@ import CheckBox from './CheckBox'; ``` - - Use camelCase when you export-default a function. Your filename should be identical to your function's name. + - [22.7](#22.7) Use camelCase when you export-default a function. Your filename should be identical to your function's name. ```javascript function makeStyleGuide() { @@ -1739,7 +1739,7 @@ export default makeStyleGuide; ``` - - Use PascalCase when you export a singleton / function library / bare object. + - [22.8](#22.8) Use PascalCase when you export a singleton / function library / bare object. ```javascript const AirbnbStyleGuide = { @@ -1756,8 +1756,8 @@ ## Accessors - - Accessor functions for properties are not required. - - If you do make accessor functions use getVal() and setVal('hello'). + - [23.1](#23.1) Accessor functions for properties are not required. + - [23.2](#23.2) If you do make accessor functions use getVal() and setVal('hello'). ```javascript // bad @@ -1773,7 +1773,7 @@ dragon.setAge(25); ``` - - If the property is a boolean, use isVal() or hasVal(). + - [23.3](#23.3) If the property is a boolean, use isVal() or hasVal(). ```javascript // bad @@ -1787,7 +1787,7 @@ } ``` - - It's okay to create get() and set() functions, but be consistent. + - [23.4](#23.4) It's okay to create get() and set() functions, but be consistent. ```javascript class Jedi { @@ -1811,7 +1811,7 @@ ## Events - - When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: + - [24.1](#24.1) When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: ```javascript // bad @@ -1842,7 +1842,7 @@ ## jQuery - - Prefix jQuery object variables with a `$`. + - [25.1](#25.1) Prefix jQuery object variables with a `$`. ```javascript // bad @@ -1852,7 +1852,7 @@ const $sidebar = $('.sidebar'); ``` - - Cache jQuery lookups. + - [25.2](#25.2) Cache jQuery lookups. ```javascript // bad @@ -1879,8 +1879,8 @@ } ``` - - For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) - - Use `find` with scoped jQuery object queries. + - [25.3](#25.3) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) + - [25.4](#25.4) Use `find` with scoped jQuery object queries. ```javascript // bad @@ -1904,13 +1904,13 @@ ## ECMAScript 5 Compatibility - - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/). + - [26.1](#26.1) Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/). **[⬆ back to top](#table-of-contents)** ## ECMAScript 6 Styles -This is a collection of links to the various es6 features. +[27.1](#27.1) This is a collection of links to the various es6 features. 1. [Arrow Functions](#arrow-functions) 1. [Classes](#constructors) @@ -1930,7 +1930,7 @@ This is a collection of links to the various es6 features. ## Testing - - **Yup.** + - [28.1](#28.1) **Yup.** ```javascript function() { From 43a5f8446250e67337aed48a44660dc16382082d Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 13 May 2015 18:01:20 -0700 Subject: [PATCH 0010/1389] [links] id => name --- README.md | 200 +++++++++++++++++++++++++++--------------------------- 1 file changed, 100 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index 8c1a265ad3..0f0e5c908f 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ ## Types - - [1.1](#1.1) **Primitives**: When you access a primitive type you work directly on its value. + - [1.1](#1.1) **Primitives**: When you access a primitive type you work directly on its value. + `string` + `number` @@ -63,7 +63,7 @@ console.log(foo, bar); // => 1, 9 ``` - - [1.2](#1.2) **Complex**: When you access a complex type you work on a reference to its value. + - [1.2](#1.2) **Complex**: When you access a complex type you work on a reference to its value. + `object` + `array` @@ -82,7 +82,7 @@ ## References - - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. + - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. > Why? This ensures that you can't reassign your references (mutation), which can lead to bugs and difficult to comprehend code. @@ -96,7 +96,7 @@ const b = 2; ``` - - [2.2](#2.2) If you must mutate references, use `let` instead of `var`. + - [2.2](#2.2) If you must mutate references, use `let` instead of `var`. > Why? `let` is block-scoped rather than function-scoped like `var`. @@ -114,7 +114,7 @@ } ``` - - [2.3](#2.3) Note that both `let` and `const` are block-scoped. + - [2.3](#2.3) Note that both `let` and `const` are block-scoped. ```javascript // const and let only exist in the blocks they are defined in. @@ -130,7 +130,7 @@ ## Objects - - [3.1](#3.1) Use the literal syntax for object creation. + - [3.1](#3.1) Use the literal syntax for object creation. ```javascript // bad @@ -140,7 +140,7 @@ const item = {}; ``` - - [3.2](#3.2) Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). + - [3.2](#3.2) Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). ```javascript // bad @@ -156,7 +156,7 @@ }; ``` - - [3.3](#3.3) Use readable synonyms in place of reserved words. + - [3.3](#3.3) Use readable synonyms in place of reserved words. ```javascript // bad @@ -176,7 +176,7 @@ ``` - - [3.4](#3.4) Use computed property names when creating objects with dynamic property names. + - [3.4](#3.4) Use computed property names when creating objects with dynamic property names. > Why? They allow you to define all the properties of an object in one place. @@ -202,7 +202,7 @@ ``` - - [3.5](#3.5) Use object method shorthand. + - [3.5](#3.5) Use object method shorthand. ```javascript // bad @@ -225,7 +225,7 @@ ``` - - [3.6](#3.6) Use property value shorthand. + - [3.6](#3.6) Use property value shorthand. > Why? It is shorter to write and descriptive. @@ -243,7 +243,7 @@ }; ``` - - [3.7](#3.7) Group your shorthand properties at the beginning of your object declaration. + - [3.7](#3.7) Group your shorthand properties at the beginning of your object declaration. > Why? It's easier to tell which properties are using the shorthand. @@ -276,7 +276,7 @@ ## Arrays - - [4.1](#4.1) Use the literal syntax for array creation. + - [4.1](#4.1) Use the literal syntax for array creation. ```javascript // bad @@ -286,7 +286,7 @@ const items = []; ``` - - [4.2](#4.2) Use Array#push instead of direct assignment to add items to an array. + - [4.2](#4.2) Use Array#push instead of direct assignment to add items to an array. ```javascript const someStack = []; @@ -300,7 +300,7 @@ ``` - - [4.3](#4.3) Use array spreads `...` to copy arrays. + - [4.3](#4.3) Use array spreads `...` to copy arrays. ```javascript // bad @@ -315,7 +315,7 @@ // good const itemsCopy = [...items]; ``` - - [4.4](#4.4) To convert an array-like object to an array, use Array#from. + - [4.4](#4.4) To convert an array-like object to an array, use Array#from. ```javascript const foo = document.querySelectorAll('.foo'); @@ -326,7 +326,7 @@ ## Destructuring - - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. + - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. > Why? Destructuring saves you from creating temporary references for those properties. @@ -351,7 +351,7 @@ } ``` - - [5.2](#5.2) Use array destructuring. + - [5.2](#5.2) Use array destructuring. ```javascript const arr = [1, 2, 3, 4]; @@ -364,7 +364,7 @@ const [first, second] = arr; ``` - - [5.3](#5.3) Use object destructuring for multiple return values, not array destructuring. + - [5.3](#5.3) Use object destructuring for multiple return values, not array destructuring. > Why? You can add new properties over time or change the order of things without breaking call sites. @@ -393,7 +393,7 @@ ## Strings - - [6.1](#6.1) Use single quotes `''` for strings. + - [6.1](#6.1) Use single quotes `''` for strings. ```javascript // bad @@ -403,8 +403,8 @@ const name = 'Capt. Janeway'; ``` - - [6.2](#6.2) Strings longer than 80 characters should be written across multiple lines using string concatenation. - - [6.3](#6.3) Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). + - [6.2](#6.2) Strings longer than 80 characters should be written across multiple lines using string concatenation. + - [6.3](#6.3) Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). ```javascript // bad @@ -423,7 +423,7 @@ ``` - - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. + - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. > Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features. @@ -449,7 +449,7 @@ ## Functions - - [7.1](#7.1) Use function declarations instead of function expressions. + - [7.1](#7.1) Use function declarations instead of function expressions. > Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions. @@ -463,7 +463,7 @@ } ``` - - [7.2](#7.2) Function expressions: + - [7.2](#7.2) Function expressions: ```javascript // immediately-invoked function expression (IIFE) @@ -472,8 +472,8 @@ })(); ``` - - [7.3](#7.3) Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. - - [7.4](#7.4) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). + - [7.3](#7.3) Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. + - [7.4](#7.4) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). ```javascript // bad @@ -492,7 +492,7 @@ } ``` - - [7.5](#7.5) Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. + - [7.5](#7.5) Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. ```javascript // bad @@ -507,7 +507,7 @@ ``` - - [7.6](#7.6) Never use `arguments`, opt to use rest syntax `...` instead. + - [7.6](#7.6) Never use `arguments`, opt to use rest syntax `...` instead. > Why? `...` is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like like `arguments`. @@ -525,7 +525,7 @@ ``` - - [7.7](#7.7) Use default parameter syntax rather than mutating function arguments. + - [7.7](#7.7) Use default parameter syntax rather than mutating function arguments. ```javascript // really bad @@ -551,7 +551,7 @@ } ``` - - [7.8](#7.8) Avoid side effects with default parameters + - [7.8](#7.8) Avoid side effects with default parameters > Why? They are confusing to reason about. @@ -572,7 +572,7 @@ ## Arrow Functions - - [8.1](#8.1) When you must use function expressions (as when passing an anonymous function), use arrow function notation. + - [8.1](#8.1) When you must use function expressions (as when passing an anonymous function), use arrow function notation. > Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax. @@ -590,7 +590,7 @@ }); ``` - - [8.2](#8.2) If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement. + - [8.2](#8.2) If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement. > Why? Syntactic sugar. It reads well when multiple functions are chained together. @@ -606,7 +606,7 @@ }); ``` - - [8.3](#8.3) Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments. + - [8.3](#8.3) Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments. > Why? These declarations read better with parentheses. They are also required when you have multiple parameters so this enforces consistency. @@ -623,7 +623,7 @@ ## Constructors - - [9.1](#9.1) Always use `class`. Avoid manipulating `prototype` directly. + - [9.1](#9.1) Always use `class`. Avoid manipulating `prototype` directly. > Why? `class` syntax is more concise and easier to reason about. @@ -652,7 +652,7 @@ } ``` - - [9.2](#9.2) Use `extends` for inheritance. + - [9.2](#9.2) Use `extends` for inheritance. > Why? It is a built-in way to inherit prototype functionality without breaking `instanceof`. @@ -675,7 +675,7 @@ } ``` - - [9.3](#9.3) Methods can return `this` to help with method chaining. + - [9.3](#9.3) Methods can return `this` to help with method chaining. ```javascript // bad @@ -712,7 +712,7 @@ ``` - - [9.4](#9.4) It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. + - [9.4](#9.4) It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. ```javascript class Jedi { @@ -735,7 +735,7 @@ ## Modules - - [10.1](#10.1) Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system. + - [10.1](#10.1) Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system. > Why? Modules are the future, let's start using the future now. @@ -753,7 +753,7 @@ export default es6; ``` - - [10.2](#10.2) Do not use wildcard imports. + - [10.2](#10.2) Do not use wildcard imports. > Why? This makes sure you have a single default export. @@ -765,7 +765,7 @@ import AirbnbStyleGuide from './AirbnbStyleGuide'; ``` - - [10.3](#10.3) And do not export directly from an import. + - [10.3](#10.3) And do not export directly from an import. > Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent. @@ -784,7 +784,7 @@ ## Iterators and Generators - - [11.1](#11.1) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. + - [11.1](#11.1) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. > Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects. @@ -809,7 +809,7 @@ sum === 15; ``` - - [11.2](#11.2) Don't use generators for now. + - [11.2](#11.2) Don't use generators for now. > Why? They don't transpile well to ES5. @@ -818,7 +818,7 @@ ## Properties - - [12.1](#12.1) Use dot notation when accessing properties. + - [12.1](#12.1) Use dot notation when accessing properties. ```javascript const luke = { @@ -833,7 +833,7 @@ const isJedi = luke.jedi; ``` - - [12.2](#12.2) Use subscript notation `[]` when accessing properties with a variable. + - [12.2](#12.2) Use subscript notation `[]` when accessing properties with a variable. ```javascript const luke = { @@ -853,7 +853,7 @@ ## Variables - - [13.1](#13.1) Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. + - [13.1](#13.1) Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. ```javascript // bad @@ -863,7 +863,7 @@ const superPower = new SuperPower(); ``` - - [13.2](#13.2) Use one `const` declaration per variable. + - [13.2](#13.2) Use one `const` declaration per variable. > Why? It's easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs. @@ -885,7 +885,7 @@ const dragonball = 'z'; ``` - - [13.3](#13.3) Group all your `const`s and then group all your `let`s. + - [13.3](#13.3) Group all your `const`s and then group all your `let`s. > Why? This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. @@ -910,7 +910,7 @@ let length; ``` - - [13.4](#13.4) Assign variables where you need them, but place them in a reasonable place. + - [13.4](#13.4) Assign variables where you need them, but place them in a reasonable place. > Why? `let` and `const` are block scoped and not function scoped. @@ -962,7 +962,7 @@ ## Hoisting - - [14.1](#14.1) `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). + - [14.1](#14.1) `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). ```javascript // we know this wouldn't work (assuming there @@ -997,7 +997,7 @@ } ``` - - [14.2](#14.2) Anonymous function expressions hoist their variable name, but not the function assignment. + - [14.2](#14.2) Anonymous function expressions hoist their variable name, but not the function assignment. ```javascript function example() { @@ -1011,7 +1011,7 @@ } ``` - - [14.3](#14.3) Named function expressions hoist the variable name, not the function name or the function body. + - [14.3](#14.3) Named function expressions hoist the variable name, not the function name or the function body. ```javascript function example() { @@ -1039,7 +1039,7 @@ } ``` - - [14.4](#14.4) Function declarations hoist their name and the function body. + - [14.4](#14.4) Function declarations hoist their name and the function body. ```javascript function example() { @@ -1058,8 +1058,8 @@ ## Comparison Operators & Equality - - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. - - [15.2](#15.2) Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. + - [15.2](#15.2) Conditional statements such as the `if` statement evaulate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** @@ -1075,7 +1075,7 @@ } ``` - - [15.3](#15.3) Use shortcuts. + - [15.3](#15.3) Use shortcuts. ```javascript // bad @@ -1099,14 +1099,14 @@ } ``` - - [15.4](#15.4) For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. + - [15.4](#15.4) For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. **[⬆ back to top](#table-of-contents)** ## Blocks - - [16.1](#16.1) Use braces with all multi-line blocks. + - [16.1](#16.1) Use braces with all multi-line blocks. ```javascript // bad @@ -1130,7 +1130,7 @@ } ``` - - [16.2](#16.2) If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your + - [16.2](#16.2) If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your `if` block's closing brace. ```javascript @@ -1158,7 +1158,7 @@ ## Comments - - [17.1](#17.1) Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. + - [17.1](#17.1) Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. ```javascript // bad @@ -1190,7 +1190,7 @@ } ``` - - [17.2](#17.2) Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment. + - [17.2](#17.2) Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment. ```javascript // bad @@ -1220,9 +1220,9 @@ } ``` - - [17.3](#17.3) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME -- need to figure this out` or `TODO -- need to implement`. + - [17.3](#17.3) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME -- need to figure this out` or `TODO -- need to implement`. - - [17.4](#17.4) Use `// FIXME:` to annotate problems. + - [17.4](#17.4) Use `// FIXME:` to annotate problems. ```javascript class Calculator { @@ -1233,7 +1233,7 @@ } ``` - - [17.5](#17.5) Use `// TODO:` to annotate solutions to problems. + - [17.5](#17.5) Use `// TODO:` to annotate solutions to problems. ```javascript class Calculator { @@ -1249,7 +1249,7 @@ ## Whitespace - - [18.1](#18.1) Use soft tabs set to 2 spaces. + - [18.1](#18.1) Use soft tabs set to 2 spaces. ```javascript // bad @@ -1268,7 +1268,7 @@ } ``` - - [18.2](#18.2) Place 1 space before the leading brace. + - [18.2](#18.2) Place 1 space before the leading brace. ```javascript // bad @@ -1294,7 +1294,7 @@ }); ``` - - [18.3](#18.3) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations. + - [18.3](#18.3) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations. ```javascript // bad @@ -1318,7 +1318,7 @@ } ``` - - [18.4](#18.4) Set off operators with spaces. + - [18.4](#18.4) Set off operators with spaces. ```javascript // bad @@ -1328,7 +1328,7 @@ const x = y + 5; ``` - - [18.5](#18.5) End files with a single newline character. + - [18.5](#18.5) End files with a single newline character. ```javascript // bad @@ -1352,7 +1352,7 @@ })(this);↵ ``` - - [18.5](#18.5) Use indentation when making long method chains. Use a leading dot, which + - [18.5](#18.5) Use indentation when making long method chains. Use a leading dot, which emphasizes that the line is a method call, not a new statement. ```javascript @@ -1392,7 +1392,7 @@ .call(tron.led); ``` - - [18.6](#18.6) Leave a blank line after blocks and before the next statement + - [18.6](#18.6) Leave a blank line after blocks and before the next statement ```javascript // bad @@ -1434,7 +1434,7 @@ ## Commas - - [19.1](#19.1) Leading commas: **Nope.** + - [19.1](#19.1) Leading commas: **Nope.** ```javascript // bad @@ -1468,7 +1468,7 @@ }; ``` - - [19.2](#19.2) Additional trailing comma: **Yup.** + - [19.2](#19.2) Additional trailing comma: **Yup.** > Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](es5/README.md#commas) in legacy browsers. @@ -1516,7 +1516,7 @@ ## Semicolons - - [20.1](#20.1) **Yup.** + - [20.1](#20.1) **Yup.** ```javascript // bad @@ -1545,8 +1545,8 @@ ## Type Casting & Coercion - - [21.1](#21.1) Perform type coercion at the beginning of the statement. - - [21.2](#21.2) Strings: + - [21.1](#21.1) Perform type coercion at the beginning of the statement. + - [21.2](#21.2) Strings: ```javascript // => this.reviewScore = 9; @@ -1558,7 +1558,7 @@ const totalScore = String(this.reviewScore); ``` - - [21.3](#21.3) Use `parseInt` for Numbers and always with a radix for type casting. + - [21.3](#21.3) Use `parseInt` for Numbers and always with a radix for type casting. ```javascript const inputValue = '4'; @@ -1582,7 +1582,7 @@ const val = parseInt(inputValue, 10); ``` - - [21.4](#21.4) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing. + - [21.4](#21.4) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing. ```javascript // good @@ -1594,7 +1594,7 @@ const val = inputValue >> 0; ``` - - [21.5](#21.5) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: + - [21.5](#21.5) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: ```javascript 2147483647 >> 0 //=> 2147483647 @@ -1602,7 +1602,7 @@ 2147483649 >> 0 //=> -2147483647 ``` - - [21.6](#21.6) Booleans: + - [21.6](#21.6) Booleans: ```javascript const age = 0; @@ -1622,7 +1622,7 @@ ## Naming Conventions - - [22.1](#22.1) Avoid single letter names. Be descriptive with your naming. + - [22.1](#22.1) Avoid single letter names. Be descriptive with your naming. ```javascript // bad @@ -1636,7 +1636,7 @@ } ``` - - [22.2](#22.2) Use camelCase when naming objects, functions, and instances. + - [22.2](#22.2) Use camelCase when naming objects, functions, and instances. ```javascript // bad @@ -1649,7 +1649,7 @@ function thisIsMyFunction() {} ``` - - [22.3](#22.3) Use PascalCase when naming constructors or classes. + - [22.3](#22.3) Use PascalCase when naming constructors or classes. ```javascript // bad @@ -1673,7 +1673,7 @@ }); ``` - - [22.4](#22.4) Use a leading underscore `_` when naming private properties. + - [22.4](#22.4) Use a leading underscore `_` when naming private properties. ```javascript // bad @@ -1684,7 +1684,7 @@ this._firstName = 'Panda'; ``` - - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. + - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. ```javascript // bad @@ -1711,7 +1711,7 @@ } ``` - - [22.6](#22.6) If your file exports a single class, your filename should be exactly the name of the class. + - [22.6](#22.6) If your file exports a single class, your filename should be exactly the name of the class. ```javascript // file contents class CheckBox { @@ -1730,7 +1730,7 @@ import CheckBox from './CheckBox'; ``` - - [22.7](#22.7) Use camelCase when you export-default a function. Your filename should be identical to your function's name. + - [22.7](#22.7) Use camelCase when you export-default a function. Your filename should be identical to your function's name. ```javascript function makeStyleGuide() { @@ -1739,7 +1739,7 @@ export default makeStyleGuide; ``` - - [22.8](#22.8) Use PascalCase when you export a singleton / function library / bare object. + - [22.8](#22.8) Use PascalCase when you export a singleton / function library / bare object. ```javascript const AirbnbStyleGuide = { @@ -1756,8 +1756,8 @@ ## Accessors - - [23.1](#23.1) Accessor functions for properties are not required. - - [23.2](#23.2) If you do make accessor functions use getVal() and setVal('hello'). + - [23.1](#23.1) Accessor functions for properties are not required. + - [23.2](#23.2) If you do make accessor functions use getVal() and setVal('hello'). ```javascript // bad @@ -1773,7 +1773,7 @@ dragon.setAge(25); ``` - - [23.3](#23.3) If the property is a boolean, use isVal() or hasVal(). + - [23.3](#23.3) If the property is a boolean, use isVal() or hasVal(). ```javascript // bad @@ -1787,7 +1787,7 @@ } ``` - - [23.4](#23.4) It's okay to create get() and set() functions, but be consistent. + - [23.4](#23.4) It's okay to create get() and set() functions, but be consistent. ```javascript class Jedi { @@ -1811,7 +1811,7 @@ ## Events - - [24.1](#24.1) When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: + - [24.1](#24.1) When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: ```javascript // bad @@ -1842,7 +1842,7 @@ ## jQuery - - [25.1](#25.1) Prefix jQuery object variables with a `$`. + - [25.1](#25.1) Prefix jQuery object variables with a `$`. ```javascript // bad @@ -1852,7 +1852,7 @@ const $sidebar = $('.sidebar'); ``` - - [25.2](#25.2) Cache jQuery lookups. + - [25.2](#25.2) Cache jQuery lookups. ```javascript // bad @@ -1879,8 +1879,8 @@ } ``` - - [25.3](#25.3) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) - - [25.4](#25.4) Use `find` with scoped jQuery object queries. + - [25.3](#25.3) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) + - [25.4](#25.4) Use `find` with scoped jQuery object queries. ```javascript // bad @@ -1904,13 +1904,13 @@ ## ECMAScript 5 Compatibility - - [26.1](#26.1) Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/). + - [26.1](#26.1) Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/). **[⬆ back to top](#table-of-contents)** ## ECMAScript 6 Styles -[27.1](#27.1) This is a collection of links to the various es6 features. +[27.1](#27.1) This is a collection of links to the various es6 features. 1. [Arrow Functions](#arrow-functions) 1. [Classes](#constructors) @@ -1930,7 +1930,7 @@ ## Testing - - [28.1](#28.1) **Yup.** + - [28.1](#28.1) **Yup.** ```javascript function() { From 20c4d37b335384c86241c3e2578688374432a910 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Mon, 18 May 2015 11:55:36 -0700 Subject: [PATCH 0011/1389] add eslint rules for JSX style from issue #345 --- linters/.eslintrc | 45 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/linters/.eslintrc b/linters/.eslintrc index 32eecff357..3b842c8538 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -1,5 +1,8 @@ { "parser": "babel-eslint", + "plugins": [ + "react" + ], "env": { "browser": true, "node": true @@ -164,6 +167,46 @@ "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren "space-infix-ops": 2, // http://eslint.org/docs/rules/space-infix-ops "space-return-throw-case": 2, // http://eslint.org/docs/rules/space-return-throw-case - "spaced-line-comment": 2 // http://eslint.org/docs/rules/spaced-line-comment + "spaced-line-comment": 2, // http://eslint.org/docs/rules/spaced-line-comment + +/** + * JSX style + */ + "react/display-name": 0, + "react/jsx-boolean-value": 2, + "react/jsx-quotes": [2, "double"], + "react/jsx-no-undef": 2, + "react/jsx-sort-props": 0, + "react/jsx-sort-prop-types": 0, + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/no-did-mount-set-state": [2, "allow-in-func"], + "react/no-did-update-set-state": 2, + "react/no-multi-comp": 2, + "react/no-unknown-property": 2, + "react/prop-types": 2, + "react/react-in-jsx-scope": 2, + "react/self-closing-comp": 2, + "react/wrap-multilines": 2, + "react/sort-comp": [2, { + "order": [ + "displayName", + "mixins", + "statics", + "propTypes", + "getDefaultProps", + "getInitialState", + "componentWillMount", + "componentDidMount", + "componentWillReceiveProps", + "shouldComponentUpdate", + "componentWillUpdate", + "componentWillUnmount", + "/^on.+$/", + "/^get.+$/", + "/^render.+$/", + "render" + ] + }] } } From f87ddc012f12dac91f28b5be0fa6d2d522e2e2bb Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Mon, 18 May 2015 12:02:48 -0700 Subject: [PATCH 0012/1389] add README describing eslintrc requirements --- linters/README.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 linters/README.md diff --git a/linters/README.md b/linters/README.md new file mode 100644 index 0000000000..6da3dcd984 --- /dev/null +++ b/linters/README.md @@ -0,0 +1,7 @@ +## `.eslintrc` + +Our `.eslintrc` requires the following NPM packages packages: + +- `eslint` +- `babel-eslint` +- `eslint-plugin-react` From a5704787e4695d128d59d83bf15a1e7a836c4d99 Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Mon, 18 May 2015 14:09:46 -0700 Subject: [PATCH 0013/1389] Amend the arrow function rules This allows one to omit parens whenever it fits into a single line, which is similar to our if statement rules. --- README.md | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 0f0e5c908f..2a1209b04e 100644 --- a/README.md +++ b/README.md @@ -590,7 +590,7 @@ }); ``` - - [8.2](#8.2) If the function body fits on one line, feel free to omit the braces and use implicit return. Otherwise, add the braces and use a `return` statement. + - [8.2](#8.2) If the function body fits on one line and there is only a single argument, feel free to omit the braces and parenthesis, and use the implicit return. Otherwise, add the parenthesis, braces, and use a `return` statement. > Why? Syntactic sugar. It reads well when multiple functions are chained together. @@ -598,24 +598,12 @@ ```javascript // good - [1, 2, 3].map((x) => x * x); - - // good - [1, 2, 3].map((x) => { - return { number: x }; - }); - ``` - - - [8.3](#8.3) Always use parentheses around the arguments. Omitting the parentheses makes the functions less readable and only works for single arguments. - - > Why? These declarations read better with parentheses. They are also required when you have multiple parameters so this enforces consistency. - - ```javascript - // bad [1, 2, 3].map(x => x * x); // good - [1, 2, 3].map((x) => x * x); + [1, 2, 3].reduce((total, n) => { + return total + n; + }, 0); ``` **[⬆ back to top](#table-of-contents)** From cbcb09f99041ca3244735ea81fdea1f4a21d5958 Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Mon, 18 May 2015 14:40:41 -0700 Subject: [PATCH 0014/1389] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2a1209b04e..5a11988c6f 100644 --- a/README.md +++ b/README.md @@ -590,7 +590,7 @@ }); ``` - - [8.2](#8.2) If the function body fits on one line and there is only a single argument, feel free to omit the braces and parenthesis, and use the implicit return. Otherwise, add the parenthesis, braces, and use a `return` statement. + - [8.2](#8.2) If the function body fits on one line and there is only a single argument, feel free to omit the braces and parentheses, and use the implicit return. Otherwise, add the parentheses, braces, and use a `return` statement. > Why? Syntactic sugar. It reads well when multiple functions are chained together. From 6b40c838fbf7154bc038835c5aaf6ae3b0b44047 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Fri, 22 May 2015 10:38:21 -0700 Subject: [PATCH 0015/1389] create package eslint-config-airbnb --- .gitignore | 1 + package.json | 3 +- packages/eslint-config-airbnb/index.js | 1 + packages/eslint-config-airbnb/package.json | 32 ++++++++++++++++++++++ 4 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 packages/eslint-config-airbnb/index.js create mode 100644 packages/eslint-config-airbnb/package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..3c3629e647 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/package.json b/package.json index ff8167fad5..dc0225dc08 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "2.0.0", "description": "A mostly reasonable approach to JavaScript.", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "publish-all": "npm publish && cd ./packages/eslint-config-airbnb && npm publish" }, "repository": { "type": "git", diff --git a/packages/eslint-config-airbnb/index.js b/packages/eslint-config-airbnb/index.js new file mode 100644 index 0000000000..8203f1e70d --- /dev/null +++ b/packages/eslint-config-airbnb/index.js @@ -0,0 +1 @@ +module.exports = require('airbnb-style/linters/.eslintrc'); diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json new file mode 100644 index 0000000000..3412d98d33 --- /dev/null +++ b/packages/eslint-config-airbnb/package.json @@ -0,0 +1,32 @@ +{ + "name": "eslint-config-airbnb", + "version": "0.0.1", + "description": "Airbnb's ESLint config, following our styleguide", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/airbnb/javascript" + }, + "keywords": [ + "eslint", + "config", + "airbnb", + "javascript", + "styleguide" + ], + "author": "Jake Teton-Landis (https://twitter.com/@jitl)", + "license": "MIT", + "bugs": { + "url": "https://github.com/airbnb/javascript/issues" + }, + "homepage": "https://github.com/airbnb/javascript", + "dependencies": { + "airbnb-style": "2.0.0", + "babel-eslint": "3.1.7", + "eslint": "0.21.2", + "eslint-plugin-react": "2.3.0" + } +} From f2da99e0584f67dc5794c25f2b12bc7e25692d1e Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Fri, 22 May 2015 11:06:16 -0700 Subject: [PATCH 0016/1389] manually load commented JSON --- packages/eslint-config-airbnb/index.js | 12 +++++++++++- packages/eslint-config-airbnb/package.json | 4 +++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/index.js b/packages/eslint-config-airbnb/index.js index 8203f1e70d..9c29ea31bd 100644 --- a/packages/eslint-config-airbnb/index.js +++ b/packages/eslint-config-airbnb/index.js @@ -1 +1,11 @@ -module.exports = require('airbnb-style/linters/.eslintrc'); +var resolve = require('resolve'); +var stripComments = require('strip-json-comments'); +var fs = require('fs'); + +// you could do this all at once if you wanted to look cool +var filename = resolve.sync('airbnb-style/linters/.eslintrc'); +var data = fs.readFileSync(filename, {encoding: 'utf-8'}); +var dataWithoutComments = stripComments(data); +var parsed = JSON.parse(dataWithoutComments); + +module.exports = parsed; diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 3412d98d33..4f0d4024ee 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -27,6 +27,8 @@ "airbnb-style": "2.0.0", "babel-eslint": "3.1.7", "eslint": "0.21.2", - "eslint-plugin-react": "2.3.0" + "eslint-plugin-react": "2.3.0", + "resolve": "1.1.6", + "strip-json-comments": "1.0.2" } } From 1676f2b1dc1a924e104ed7df0f2092fc9176269d Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Fri, 22 May 2015 11:06:37 -0700 Subject: [PATCH 0017/1389] bump eslint-config-airbnb version to 0.0.2 --- 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 4f0d4024ee..3f76ac271a 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-airbnb", - "version": "0.0.1", + "version": "0.0.2", "description": "Airbnb's ESLint config, following our styleguide", "main": "index.js", "scripts": { From c3a94c15fd5385828f47e45b1e329a810d0ecfc3 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Sat, 23 May 2015 18:53:27 -0700 Subject: [PATCH 0018/1389] add keyword "eslintconfig" to eslint-config-airbnb --- packages/eslint-config-airbnb/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 3f76ac271a..0625134b82 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-airbnb", - "version": "0.0.2", + "version": "0.0.6", "description": "Airbnb's ESLint config, following our styleguide", "main": "index.js", "scripts": { @@ -12,6 +12,7 @@ }, "keywords": [ "eslint", + "eslintconfig", "config", "airbnb", "javascript", From 2539557e98f802a00513719ed9dd87891c7cde4f Mon Sep 17 00:00:00 2001 From: Sun Xingfan Date: Mon, 25 May 2015 22:15:38 +0800 Subject: [PATCH 0019/1389] Change Chinese Translation to a more official like version The current Chinese version translated by adamlu is a modified version which as he said change/delete some rules from the original and it's base on the version 2 years ago. I transalte a new version base on current style guide of es5 version. --- README.md | 2 +- es5/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5a11988c6f..cad368e92d 100644 --- a/README.md +++ b/README.md @@ -2082,7 +2082,7 @@ - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bulgaria.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - ![ca](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese(Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript) - - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese(Simplified)**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese(Simplified)**: [sivan/javascript-style-guide](https://github.com/sivan/javascript-style-guide) - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) - ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [sinkswim/javascript-style-guide](https://github.com/sinkswim/javascript-style-guide) diff --git a/es5/README.md b/es5/README.md index 7626d0b9ea..b2b99f0947 100644 --- a/es5/README.md +++ b/es5/README.md @@ -1689,7 +1689,7 @@ - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bulgaria.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - ![ca](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese(Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript) - - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese(Simplified)**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese(Simplified)**: [sivan/javascript-style-guide](https://github.com/sivan/javascript-style-guide) - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) - ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [sinkswim/javascript-style-guide](https://github.com/sinkswim/javascript-style-guide) From a6796f00981bc32685cb4eeb4fa2e89e90716c90 Mon Sep 17 00:00:00 2001 From: Baraa Hamodi Date: Wed, 27 May 2015 23:58:29 -0700 Subject: [PATCH 0020/1389] Update .eslintrc Just a consistency thing. :) --- linters/.eslintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/linters/.eslintrc b/linters/.eslintrc index 3b842c8538..93b84a54fe 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -53,7 +53,7 @@ * Possible errors */ "comma-dangle": [2, "never"], // http://eslint.org/docs/rules/comma-dangle - "no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign + "no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign "no-console": 1, // http://eslint.org/docs/rules/no-console "no-debugger": 1, // http://eslint.org/docs/rules/no-debugger "no-alert": 1, // http://eslint.org/docs/rules/no-alert From 394648033490fd8eaa18f08fe544a56cf165fbfd Mon Sep 17 00:00:00 2001 From: Arian Faurtosh Date: Sun, 31 May 2015 20:16:39 -0700 Subject: [PATCH 0021/1389] added trailing comma --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 5a11988c6f..544112f71f 100644 --- a/README.md +++ b/README.md @@ -146,13 +146,13 @@ // bad const superman = { default: { clark: 'kent' }, - private: true + private: true, }; // good const superman = { defaults: { clark: 'kent' }, - hidden: true + hidden: true, }; ``` @@ -161,17 +161,17 @@ ```javascript // bad const superman = { - class: 'alien' + class: 'alien', }; // bad const superman = { - klass: 'alien' + klass: 'alien', }; // good const superman = { - type: 'alien' + type: 'alien', }; ``` @@ -234,12 +234,12 @@ // bad const obj = { - lukeSkywalker: lukeSkywalker + lukeSkywalker: lukeSkywalker, }; // good const obj = { - lukeSkywalker + lukeSkywalker, }; ``` @@ -1272,13 +1272,13 @@ // bad dog.set('attr',{ age: '1 year', - breed: 'Bernese Mountain Dog' + breed: 'Bernese Mountain Dog', }); // good dog.set('attr', { age: '1 year', - breed: 'Bernese Mountain Dog' + breed: 'Bernese Mountain Dog', }); ``` From 7a7bec17f3f1953ad93c16e1eb761cc40f5df30a Mon Sep 17 00:00:00 2001 From: ycavatars Date: Mon, 8 Jun 2015 12:56:32 +0800 Subject: [PATCH 0022/1389] add missing componentDidUpdate --- react/README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/react/README.md b/react/README.md index 6d9eb16921..3ff7bb9f37 100644 --- a/react/README.md +++ b/react/README.md @@ -232,10 +232,11 @@ 9. componentWillReceiveProps 10. shouldComponentUpdate 11. componentWillUpdate - 12. componentWillUnmount - 13. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() - 14. *getter methods for render* like getSelectReason() or getFooterContent() - 15. *Optional render methods* like renderNavigation() or renderProfilePicture() - 16. render + 12. componentDidUpdate + 13. componentWillUnmount + 14. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() + 15. *getter methods for render* like getSelectReason() or getFooterContent() + 16. *Optional render methods* like renderNavigation() or renderProfilePicture() + 17. render **[⬆ back to top](#table-of-contents)** From fb45e22b0e044eac25dd0f84d80d886260c4d953 Mon Sep 17 00:00:00 2001 From: Carter Chung Date: Sat, 13 Jun 2015 21:54:29 -0700 Subject: [PATCH 0023/1389] Added missing period --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5a11988c6f..1f7b4f2e35 100644 --- a/README.md +++ b/README.md @@ -1380,7 +1380,7 @@ .call(tron.led); ``` - - [18.6](#18.6) Leave a blank line after blocks and before the next statement + - [18.6](#18.6) Leave a blank line after blocks and before the next statement. ```javascript // bad From a2e235608c01ef9015b4d530b998b7c6be8366ae Mon Sep 17 00:00:00 2001 From: Carter Chung Date: Sat, 13 Jun 2015 21:56:21 -0700 Subject: [PATCH 0024/1389] Added bullet/indentation for consistency --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5a11988c6f..12cc02e8bf 100644 --- a/README.md +++ b/README.md @@ -1898,7 +1898,7 @@ ## ECMAScript 6 Styles -[27.1](#27.1) This is a collection of links to the various es6 features. + - [27.1](#27.1) This is a collection of links to the various es6 features. 1. [Arrow Functions](#arrow-functions) 1. [Classes](#constructors) From 1429a20c9734b7096fd091546b467f7837f8945a Mon Sep 17 00:00:00 2001 From: Aniss Bouraba Date: Wed, 17 Jun 2015 12:29:48 +0100 Subject: [PATCH 0025/1389] update(README.md): added Airbnb Style .eslintrc link --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 04162dcaf9..ff03a1bbf2 100644 --- a/README.md +++ b/README.md @@ -1959,6 +1959,7 @@ **Tools** - Code Style Linters + + [ESlint](http://eslint.org/) - [Airbnb Style .eslintrc](https://github.com/airbnb/javascript/blob/master/linters/.eslintrc) + [JSHint](http://www.jshint.com/) - [Airbnb Style .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/jshintrc) + [JSCS](https://github.com/jscs-dev/node-jscs) - [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json) From 25a2430dc654b063d92c1935b1a685158af37c71 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Wed, 17 Jun 2015 13:30:29 -0600 Subject: [PATCH 0026/1389] Add Expensify to the list of organizations using this style guide --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 683a2f0d75..4a0280d15b 100644 --- a/README.md +++ b/README.md @@ -2038,6 +2038,7 @@ - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) - **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) - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) From 53ac64adf5d52e89b34e01a2befe8fa9e990662f Mon Sep 17 00:00:00 2001 From: Christophe Hurpeau Date: Tue, 23 Jun 2015 18:00:55 +0200 Subject: [PATCH 0027/1389] 18.6: blocks and blank line: add example with array --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index 0c94d2dd7a..0485737255 100644 --- a/README.md +++ b/README.md @@ -1415,6 +1415,26 @@ }; return obj; + + // bad + const arr = [ + function foo() { + }, + function bar() { + }, + ]; + return arr; + + // good + const arr = [ + function foo() { + }, + + function bar() { + }, + ]; + + return arr; ``` From 26dd0434141938a3e03ef4b37c38765f4c030137 Mon Sep 17 00:00:00 2001 From: Manoj Kumar Date: Tue, 23 Jun 2015 22:13:05 +0530 Subject: [PATCH 0028/1389] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0c94d2dd7a..43244dc2d7 100644 --- a/README.md +++ b/README.md @@ -2000,6 +2000,7 @@ - [JSBooks](http://jsbooks.revolunet.com/) - Julien Bouquillon - [Third Party JavaScript](http://manning.com/vinegar/) - Ben Vinegar and Anton Kovalyov - [Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript](http://amzn.com/0321812182) - David Herman + - [Eloquent JavaScript](http://eloquentjavascript.net/) - Marijn Haverbeke **Blogs** From e9b59b76a5287a4aed3df94ed8b06ff0ad5fbd35 Mon Sep 17 00:00:00 2001 From: Chris Portela Date: Wed, 24 Jun 2015 15:51:25 -0400 Subject: [PATCH 0029/1389] Update .eslintrc with other react class properties In `eslint-plugin-react`'s page on their sorting rules they show the order I showed here. https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md#rule-options I noticed because according to the current rules `contextTypes` goes below `render` and I also noticed other methods were missing from the list. Since we're being specific we should also include the other methods and properties that `eslint-plugin-react` handles by default. --- linters/.eslintrc | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/linters/.eslintrc b/linters/.eslintrc index 93b84a54fe..c99a626e71 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -190,18 +190,23 @@ "react/wrap-multilines": 2, "react/sort-comp": [2, { "order": [ - "displayName", - "mixins", - "statics", - "propTypes", - "getDefaultProps", - "getInitialState", - "componentWillMount", - "componentDidMount", - "componentWillReceiveProps", - "shouldComponentUpdate", - "componentWillUpdate", - "componentWillUnmount", + 'displayName', + 'propTypes', + 'contextTypes', + 'childContextTypes', + 'mixins', + 'statics', + 'defaultProps', + 'getDefaultProps', + 'getInitialState', + 'getChildContext', + 'componentWillMount', + 'componentDidMount', + 'componentWillReceiveProps', + 'shouldComponentUpdate', + 'componentWillUpdate', + 'componentDidUpdate', + 'componentWillUnmount', "/^on.+$/", "/^get.+$/", "/^render.+$/", From fe42d0bfa3290efbeb3360e0f0b1e8c69c3ca3fd Mon Sep 17 00:00:00 2001 From: Chris Portela Date: Wed, 24 Jun 2015 16:02:21 -0400 Subject: [PATCH 0030/1389] Made single quotes to double quotes --- linters/.eslintrc | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/linters/.eslintrc b/linters/.eslintrc index c99a626e71..b904f3ec6e 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -190,23 +190,23 @@ "react/wrap-multilines": 2, "react/sort-comp": [2, { "order": [ - 'displayName', - 'propTypes', - 'contextTypes', - 'childContextTypes', - 'mixins', - 'statics', - 'defaultProps', - 'getDefaultProps', - 'getInitialState', - 'getChildContext', - 'componentWillMount', - 'componentDidMount', - 'componentWillReceiveProps', - 'shouldComponentUpdate', - 'componentWillUpdate', - 'componentDidUpdate', - 'componentWillUnmount', + "displayName", + "propTypes", + "contextTypes", + "childContextTypes", + "mixins", + "statics", + "defaultProps", + "getDefaultProps", + "getInitialState", + "getChildContext", + "componentWillMount", + "componentDidMount", + "componentWillReceiveProps", + "shouldComponentUpdate", + "componentWillUpdate", + "componentDidUpdate", + "componentWillUnmount", "/^on.+$/", "/^get.+$/", "/^render.+$/", From b020a431b0ffff92b37e3016cbd8fb7e9575fe77 Mon Sep 17 00:00:00 2001 From: Nikita Gusakov Date: Thu, 25 Jun 2015 16:31:27 +0300 Subject: [PATCH 0031/1389] Added "prefer-const" rule Added new ES6 rule, introduced in eslint 0.23.0 > This rule is aimed to flag variables that are declared using let keyword, but never modified after initial assignment. --- linters/.eslintrc | 1 + 1 file changed, 1 insertion(+) diff --git a/linters/.eslintrc b/linters/.eslintrc index b904f3ec6e..6ff0fa3b07 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -37,6 +37,7 @@ * ES6 */ "no-var": 2, // http://eslint.org/docs/rules/no-var + "prefer-const": 2, // http://eslint.org/docs/rules/prefer-const /** * Variables From d2792f27cbb91905a55b943edef68667c840ee66 Mon Sep 17 00:00:00 2001 From: Horace Ko Date: Thu, 25 Jun 2015 11:54:22 -0700 Subject: [PATCH 0032/1389] Recommend using .jsx extension for React components, rather than .js. --- react/README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/react/README.md b/react/README.md index 3ff7bb9f37..afcf1020ad 100644 --- a/react/README.md +++ b/react/README.md @@ -24,8 +24,8 @@ ## Naming - - **Extensions**: Use `.js` extension for React components. - - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.js`. + - **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: ```javascript // bad @@ -41,13 +41,13 @@ const reservationItem = ; ``` - **Component Naming**: Use the filename as the component name. So `ReservationCard.js` should have a reference name of ReservationCard. However, for root components of a directory, use index.js 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.js') + const Footer = require('./Footer/Footer.jsx') // bad - const Footer = require('./Footer/index.js') + const Footer = require('./Footer/index.jsx') // good const Footer = require('./Footer') @@ -55,7 +55,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 @@ -72,7 +72,7 @@ ``` ## Alignment - - Follow these alignment styles for js syntax + - Follow these alignment styles for JS syntax ```javascript // bad @@ -98,7 +98,7 @@ ``` ## Quotes - - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JavaScript. + - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. ```javascript // bad @@ -197,7 +197,7 @@ ``` ## Methods - - Do not use underscore prefix for internal methods of a react component. + - Do not use underscore prefix for internal methods of a React component. ```javascript // bad React.createClass({ @@ -219,10 +219,10 @@ ``` ## Ordering - - Always follow the following order for methods in a react component: + - Always follow the following order for methods in a React component: 1. displayName - 2. mixins (as of React v0.13 mixins are deprecated) + 2. mixins (as of React v0.13, mixins are deprecated) 3. statics 4. propTypes 5. getDefaultProps From ee899996b6b6e3b2d098ee71725aef9d8b368ec8 Mon Sep 17 00:00:00 2001 From: Tomek Wiszniewski Date: Sat, 2 May 2015 00:14:17 +0200 Subject: [PATCH 0033/1389] Allow reserved words as keys in ES6 module context MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `