From 65a86bc4a67dd6abcc80f0a53d5447f436173cb9 Mon Sep 17 00:00:00 2001 From: Aleksey Smolenchuk Date: Thu, 7 Nov 2013 17:23:47 -0500 Subject: [PATCH 0001/1536] Format object array to conform to whitespace guidelines --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index b213bb8122..110829b4e9 100644 --- a/README.md +++ b/README.md @@ -224,14 +224,14 @@ i; messages = [{ - state: 'success', - message: 'This one worked.' - },{ - state: 'success', - message: 'This one worked as well.' - },{ - state: 'error', - message: 'This one did not work.' + state: 'success', + message: 'This one worked.' + }, { + state: 'success', + message: 'This one worked as well.' + }, { + state: 'error', + message: 'This one did not work.' }]; length = messages.length; From 6445a6fd00fb8a7c4cd5f0d1adab9717c092ef5a Mon Sep 17 00:00:00 2001 From: Ahmed Aeon Axan Date: Sun, 17 Nov 2013 21:07:54 +0530 Subject: [PATCH 0002/1536] Remove invalid name - Naming Conventions In naming conventions `var this-is-my-object = {};` is given as an example of a bad name. But since this is an invalid name in Javascript. I dont think it is needed since its a syntax error. --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 32225f1d18..949e8e4292 100644 --- a/README.md +++ b/README.md @@ -1008,7 +1008,6 @@ // bad var OBJEcttsssss = {}; var this_is_my_object = {}; - var this-is-my-object = {}; function c() {}; var u = new user({ name: 'Bob Parr' From c29818caa3753d26c07a9aaba8dbcbc635462ee6 Mon Sep 17 00:00:00 2001 From: Jimmy Gaussen Date: Tue, 19 Nov 2013 19:31:10 +0100 Subject: [PATCH 0003/1536] Added French translation to the list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 949e8e4292..5b6376ca63 100644 --- a/README.md +++ b/README.md @@ -1486,6 +1486,7 @@ - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) + - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) ## The JavaScript Style Guide Guide From 30d8ea098ea3a16d04c215555bb19aed3df0f3f4 Mon Sep 17 00:00:00 2001 From: Jimmy Gaussen Date: Tue, 19 Nov 2013 19:40:06 +0100 Subject: [PATCH 0004/1536] copy pasta --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5b6376ca63..142adeacdb 100644 --- a/README.md +++ b/README.md @@ -1486,7 +1486,7 @@ - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) + - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) ## The JavaScript Style Guide Guide From 8702dd4b8388b9454d1bf34da4aa97a4d6d18602 Mon Sep 17 00:00:00 2001 From: Serg Date: Fri, 22 Nov 2013 00:01:50 +0200 Subject: [PATCH 0005/1536] Added Russian translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 142adeacdb..dd0becddd9 100644 --- a/README.md +++ b/README.md @@ -1487,6 +1487,7 @@ - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) + - :ru: **Russian**: [sbezludny/javascript-style-guide](https://github.com/sbezludny/javascript-style-guide) ## The JavaScript Style Guide Guide From f07de4befb52e22f4d77d5e94c22d57c62357621 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 24 Nov 2013 21:35:53 -0800 Subject: [PATCH 0006/1536] [translation] add Bulgarian translation. fixes #121 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index dd0becddd9..e1cf06a26c 100644 --- a/README.md +++ b/README.md @@ -1488,6 +1488,7 @@ - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - :ru: **Russian**: [sbezludny/javascript-style-guide](https://github.com/sbezludny/javascript-style-guide) + - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) ## The JavaScript Style Guide Guide From d44c4e01eacb95599f246846fd870fb7494c6a9a Mon Sep 17 00:00:00 2001 From: Ben Morrall Date: Tue, 26 Nov 2013 15:17:25 +1100 Subject: [PATCH 0007/1536] Concatenation examples are now equivalent --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1cf06a26c..49ff04e8f0 100644 --- a/README.md +++ b/README.md @@ -208,7 +208,7 @@ // good var errorMessage = 'This is a super long error that ' + - 'was thrown because of Batman.' + + 'was thrown because of Batman. ' + 'When you stop to think about ' + 'how Batman had anything to do ' + 'with this, you would get nowhere ' + From 3a6aff1f13ed449a83495354ab4f64fdd4939a17 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 26 Nov 2013 19:15:17 -0800 Subject: [PATCH 0008/1536] [in the wild] add REI --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 49ff04e8f0..b4d45ca16f 100644 --- a/README.md +++ b/README.md @@ -1471,6 +1471,7 @@ - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) + - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) From 898b46dc1512d11b8a778c1d2b77927de402aa2b Mon Sep 17 00:00:00 2001 From: vahan-hartooni Date: Mon, 2 Dec 2013 10:46:34 -0800 Subject: [PATCH 0009/1536] Update SublimeLinter.sublime-settings The Airbnb guide states: "Strings longer than 80 characters should be written across multiple lines using string concatenation." I propose to add the maxlen option to enforce this rule: http://www.jshint.com/docs/options/#maxlen However maxlen enforces the entire source code, not just a line of String. I would like to hear your thoughts on whether that is a beneficial enforcement to keep JS code at a set width. --- linters/SublimeLinter/SublimeLinter.sublime-settings | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/linters/SublimeLinter/SublimeLinter.sublime-settings b/linters/SublimeLinter/SublimeLinter.sublime-settings index 1e12f7c6bb..5c4e5dd382 100644 --- a/linters/SublimeLinter/SublimeLinter.sublime-settings +++ b/linters/SublimeLinter/SublimeLinter.sublime-settings @@ -62,6 +62,9 @@ "undef": true, // Warn when variables are defined but never used. - "unused": true + "unused": true, + + // Enforce line length to 80 characters + "maxlen": 80 } } From 745cf854d11510bebe2d971cd981ca884ac52228 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 3 Dec 2013 10:21:54 -0800 Subject: [PATCH 0010/1536] [translation] update russian fixes #120 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b4d45ca16f..75c818cbd6 100644 --- a/README.md +++ b/README.md @@ -1488,7 +1488,7 @@ - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - - :ru: **Russian**: [sbezludny/javascript-style-guide](https://github.com/sbezludny/javascript-style-guide) + - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) ## The JavaScript Style Guide Guide From 388294966894e0aec4649cc75ebfdfe5a74a5d60 Mon Sep 17 00:00:00 2001 From: Vsevolod Rodionov Date: Thu, 5 Dec 2013 11:38:25 +0300 Subject: [PATCH 0011/1536] 32-bit integers and bitwise operators explained with example of possible issues I've added this example to russian translation when I've got question from our juniors "what's the limits of wise use of bitwise operators". --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 75c818cbd6..bf4a31a705 100644 --- a/README.md +++ b/README.md @@ -956,7 +956,6 @@ ``` - 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. - - **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) ```javascript // good @@ -968,6 +967,14 @@ var 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: + + ```javascript + 2147483647 >> 0 //=> 2147483647 + 2147483648 >> 0 //=> -2147483648 + 2147483649 >> 0 //=> -2147483647 + ``` + - Booleans: ```javascript From 9469e94a073490b8b727a9e0cad22c4c3044084a Mon Sep 17 00:00:00 2001 From: Nirav Sanghani Date: Thu, 5 Dec 2013 16:35:21 -0800 Subject: [PATCH 0012/1536] Add guideline for spaces around operators --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 75c818cbd6..524ca73f74 100644 --- a/README.md +++ b/README.md @@ -745,6 +745,7 @@ ∙∙var name; } ``` + - Place 1 space before the leading brace. ```javascript @@ -770,6 +771,17 @@ breed: 'Bernese Mountain Dog' }); ``` + + - Set off operators with spaces. + + ```javascript + // bad + var x=y+5; + + // good + var x = y + 5; + ``` + - Place an empty newline at the end of the file. ```javascript From fbc79a3bfe0d311e2eb71531e06345c340125b10 Mon Sep 17 00:00:00 2001 From: Ulysse Carion Date: Thu, 12 Dec 2013 19:00:45 -0800 Subject: [PATCH 0013/1536] Add a missing `.hide()` for consistency's sake. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 524ca73f74..090319be57 100644 --- a/README.md +++ b/README.md @@ -1368,7 +1368,7 @@ $('.sidebar > ul').hide(); // good - $sidebar.find('ul'); + $sidebar.find('ul').hide(); ``` **[[⬆]](#TOC)** From 440b34a0b5c7b2b3a7e106760e9d2d5986e75315 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Fri, 13 Dec 2013 11:06:04 -0800 Subject: [PATCH 0014/1536] [resources] add link to Third Party JavaScript. fixes #128 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 090319be57..8edde50c5c 100644 --- a/README.md +++ b/README.md @@ -1446,6 +1446,7 @@ - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy - [JSBooks](http://jsbooks.revolunet.com/) + - [Third Party JavaScript](http://manning.com/vinegar/) - Ben Vinegar and Anton Kovalyov **Blogs** From d5db0a2f45509835002f84af23b64b47bfe77154 Mon Sep 17 00:00:00 2001 From: vahan-hartooni Date: Tue, 17 Dec 2013 13:07:59 -0800 Subject: [PATCH 0015/1536] Enforce 'use strict' As stated in the [Modules section](https://github.com/airbnb/javascript#modules), `'use strict'` needs to be declared at the top of a module [JSHint has an option](http://www.jshint.com/docs/options/#strict) for something like this by enforcing the declaration of the statement at the top function scope. --- linters/SublimeLinter/SublimeLinter.sublime-settings | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/linters/SublimeLinter/SublimeLinter.sublime-settings b/linters/SublimeLinter/SublimeLinter.sublime-settings index 5c4e5dd382..12360f3f1c 100644 --- a/linters/SublimeLinter/SublimeLinter.sublime-settings +++ b/linters/SublimeLinter/SublimeLinter.sublime-settings @@ -65,6 +65,9 @@ "unused": true, // Enforce line length to 80 characters - "maxlen": 80 + "maxlen": 80, + + // Enforce placing 'use strict' at the top function scope + "strict": true } } From b65dd90ea56898a124985dabe06a895eb78dab35 Mon Sep 17 00:00:00 2001 From: Spike Brehm Date: Thu, 26 Dec 2013 19:00:21 -0800 Subject: [PATCH 0016/1536] Add .jshintrc This adds a `.jshintrc` to the `linters/` directory. I just copied over the settings from the `SublimeLinter` file, de-nesting the JSON object by one level. It means we'll have to maintain both files, but it's good to have a basic `.jshintrc` for those of us that aren't using JSHint through Sublime Text. --- linters/jshintrc | 57 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 linters/jshintrc diff --git a/linters/jshintrc b/linters/jshintrc new file mode 100644 index 0000000000..d3b47148a8 --- /dev/null +++ b/linters/jshintrc @@ -0,0 +1,57 @@ +{ + /* + * ENVIRONMENTS + * ================= + */ + + // Define globals exposed by modern browsers. + "browser": true, + + // Define globals exposed by jQuery. + "jquery": true, + + // Define globals exposed by Node.js. + "node": true, + + /* + * ENFORCING OPTIONS + * ================= + */ + + // Force all variable names to use either camelCase style or UPPER_CASE + // with underscores. + "camelcase": true, + + // Prohibit use of == and != in favor of === and !==. + "eqeqeq": true, + + // Suppress warnings about == null comparisons. + "eqnull": true, + + // Enforce tab width of 2 spaces. + "indent": 2, + + // Prohibit use of a variable before it is defined. + "latedef": true, + + // Require capitalized names for constructor functions. + "newcap": true, + + // Enforce use of single quotation marks for strings. + "quotmark": "single", + + // Prohibit trailing whitespace. + "trailing": true, + + // Prohibit use of explicitly undeclared variables. + "undef": true, + + // Warn when variables are defined but never used. + "unused": true, + + // Enforce line length to 80 characters + "maxlen": 80, + + // Enforce placing 'use strict' at the top function scope + "strict": true +} From d27bcfa4712b98f0d6c97305f0ed855e0a71c164 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 5 Jan 2014 11:19:25 -0800 Subject: [PATCH 0017/1536] [readme] add GA --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3e22d08bb6..b84183f557 100644 --- a/README.md +++ b/README.md @@ -1542,3 +1542,4 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # }; +[![Analytics](https://ga-beacon.appspot.com/UA-46826236-1/airbnb/javascript?pixel)](https://github.com/airbnb/javascript) From 6e40437c23f3bbe6390cc5ecead565bf8381d1dd Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 7 Jan 2014 10:47:36 -0800 Subject: [PATCH 0018/1536] [readme] remove GA in favor of Github analytics --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index b84183f557..e43726f7c8 100644 --- a/README.md +++ b/README.md @@ -1541,5 +1541,3 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. **[[⬆]](#TOC)** # }; - -[![Analytics](https://ga-beacon.appspot.com/UA-46826236-1/airbnb/javascript?pixel)](https://github.com/airbnb/javascript) From bd3914c19a86e48284145239ea749f209c061c25 Mon Sep 17 00:00:00 2001 From: godspeedelbow Date: Wed, 22 Jan 2014 13:55:54 +0100 Subject: [PATCH 0019/1536] added Peerby to list of organizations that use this guide --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e43726f7c8..38fdcb1474 100644 --- a/README.md +++ b/README.md @@ -1483,6 +1483,7 @@ - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) + - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) From 7d470d860f5e47f63f79452499941879e163d2c7 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 30 Jan 2014 11:44:42 -0800 Subject: [PATCH 0020/1536] [resources] add you might not need jquery --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 38fdcb1474..3451933be7 100644 --- a/README.md +++ b/README.md @@ -1431,6 +1431,7 @@ - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer + - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) **Books** From ed3e46e4986cc403993ff176b2dbb47714d831c4 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 30 Jan 2014 11:46:02 -0800 Subject: [PATCH 0021/1536] [resources] add you might not need jquery authors --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3451933be7..e0e1f76e61 100644 --- a/README.md +++ b/README.md @@ -1431,7 +1431,7 @@ - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer - - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) + - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz **Books** From f2e49d131a9cac8157213123cc47bae2c3127643 Mon Sep 17 00:00:00 2001 From: PatrickJS Date: Mon, 3 Feb 2014 22:38:45 -0800 Subject: [PATCH 0022/1536] update copyright year --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e0e1f76e61..3a477b6c50 100644 --- a/README.md +++ b/README.md @@ -1519,7 +1519,7 @@ (The MIT License) -Copyright (c) 2012 Airbnb +Copyright (c) 2014 Airbnb Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the From 6c25eddf0ed87df0178d408b1542bf9ef73a983d Mon Sep 17 00:00:00 2001 From: Gareth Visagie Date: Tue, 25 Feb 2014 11:30:46 +0000 Subject: [PATCH 0023/1536] Add Money Advice Service to list of organisations using this style guide --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3a477b6c50..b7d4043297 100644 --- a/README.md +++ b/README.md @@ -1482,6 +1482,7 @@ - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) + - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) From 8c01bc4aa85309683c98ac249c592869d7576f43 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 4 Mar 2014 09:23:44 -0800 Subject: [PATCH 0024/1536] [resources] add link to es6 features --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b7d4043297..2aa6cea373 100644 --- a/README.md +++ b/README.md @@ -1432,6 +1432,7 @@ - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz + - [ES6 Features](https://github.com/lukehoban/es6features) - Luke Hoban **Books** From c4d7cc0a210587e7e9b71ad3c5d793c6396c9942 Mon Sep 17 00:00:00 2001 From: Flurin Egger Date: Thu, 13 Mar 2014 11:37:23 +0100 Subject: [PATCH 0025/1536] Add Digitpaint to list of organisations using this style guide --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2aa6cea373..3f1cd89ed0 100644 --- a/README.md +++ b/README.md @@ -1474,6 +1474,7 @@ - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) + - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) From c3a9c7f7412ab47b2c5121ec0aa9c09907c95d26 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Sun, 16 Mar 2014 15:24:43 +0100 Subject: [PATCH 0026/1536] Rely on github's default heading anchors --- README.md | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 3f1cd89ed0..4821dd7fce 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ *A mostly reasonable approach to JavaScript* -## Table of Contents +## Table of Contents 1. [Types](#types) 1. [Objects](#objects) @@ -13,30 +13,30 @@ 1. [Properties](#properties) 1. [Variables](#variables) 1. [Hoisting](#hoisting) - 1. [Conditional Expressions & Equality](#conditionals) + 1. [Conditional Expressions & Equality](#conditional-expressions--equality) 1. [Blocks](#blocks) 1. [Comments](#comments) 1. [Whitespace](#whitespace) 1. [Commas](#commas) 1. [Semicolons](#semicolons) - 1. [Type Casting & Coercion](#type-coercion) + 1. [Type Casting & Coercion](#type-casting--coercion) 1. [Naming Conventions](#naming-conventions) 1. [Accessors](#accessors) 1. [Constructors](#constructors) 1. [Events](#events) 1. [Modules](#modules) 1. [jQuery](#jquery) - 1. [ES5 Compatibility](#es5) + 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) 1. [Testing](#testing) 1. [Performance](#performance) 1. [Resources](#resources) 1. [In the Wild](#in-the-wild) 1. [Translation](#translation) - 1. [The JavaScript Style Guide Guide](#guide-guide) + 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) 1. [Contributors](#contributors) 1. [License](#license) -## Types +## Types - **Primitives**: When you access a primitive type you work directly on its value @@ -71,7 +71,7 @@ **[[⬆]](#TOC)** -## Objects +## Objects - Use the literal syntax for object creation. @@ -119,7 +119,7 @@ ``` **[[⬆]](#TOC)** -## Arrays +## Arrays - Use the literal syntax for array creation @@ -172,7 +172,7 @@ **[[⬆]](#TOC)** -## Strings +## Strings - Use single quotes `''` for strings @@ -262,7 +262,7 @@ **[[⬆]](#TOC)** -## Functions +## Functions - Function expressions: @@ -321,7 +321,7 @@ -## Properties +## Properties - Use dot notation when accessing properties. @@ -356,7 +356,7 @@ **[[⬆]](#TOC)** -## Variables +## Variables - Always use `var` 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. @@ -465,7 +465,7 @@ **[[⬆]](#TOC)** -## Hoisting +## Hoisting - Variable declarations get hoisted to the top of their scope, their assignment does not. @@ -555,7 +555,7 @@ -## Conditional Expressions & Equality +## Conditional Expressions & Equality - Use `===` and `!==` over `==` and `!=`. - Conditional expressions are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: @@ -603,7 +603,7 @@ **[[⬆]](#TOC)** -## Blocks +## Blocks - Use braces with all multi-line blocks. @@ -632,7 +632,7 @@ **[[⬆]](#TOC)** -## Comments +## Comments - Use `/** ... */` for multiline comments. Include a description, specify types and values for all parameters and return values. @@ -725,7 +725,7 @@ **[[⬆]](#TOC)** -## Whitespace +## Whitespace - Use soft tabs set to 2 spaces @@ -832,7 +832,7 @@ **[[⬆]](#TOC)** -## Commas +## Commas - Leading commas: **Nope.** @@ -895,7 +895,7 @@ **[[⬆]](#TOC)** -## Semicolons +## Semicolons - **Yup.** @@ -922,7 +922,7 @@ **[[⬆]](#TOC)** -## Type Casting & Coercion +## Type Casting & Coercion - Perform type coercion at the beginning of the statement. - Strings: @@ -998,7 +998,7 @@ **[[⬆]](#TOC)** -## Naming Conventions +## Naming Conventions - Avoid single letter names. Be descriptive with your naming. @@ -1111,7 +1111,7 @@ **[[⬆]](#TOC)** -## Accessors +## Accessors - Accessor functions for properties are not required - If you do make accessor functions use getVal() and setVal('hello') @@ -1165,7 +1165,7 @@ **[[⬆]](#TOC)** -## Constructors +## Constructors - Assign methods to the prototype object, instead of overwriting the prototype with a new object. Overwriting the prototype makes inheritance impossible: by resetting the prototype you'll overwrite the base! @@ -1250,7 +1250,7 @@ **[[⬆]](#TOC)** -## Events +## 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: @@ -1281,7 +1281,7 @@ **[[⬆]](#TOC)** -## Modules +## Modules - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933) - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. @@ -1312,7 +1312,7 @@ **[[⬆]](#TOC)** -## jQuery +## jQuery - Prefix jQuery object variables with a `$`. @@ -1374,14 +1374,14 @@ **[[⬆]](#TOC)** -## ECMAScript 5 Compatibility +## ECMAScript 5 Compatibility - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/) **[[⬆]](#TOC)** -## Testing +## Testing - **Yup.** @@ -1394,7 +1394,7 @@ **[[⬆]](#TOC)** -## Performance +## Performance - [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/) - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2) @@ -1408,7 +1408,7 @@ **[[⬆]](#TOC)** -## Resources +## Resources **Read This** @@ -1466,7 +1466,7 @@ **[[⬆]](#TOC)** -## In the Wild +## In the Wild This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. @@ -1495,7 +1495,7 @@ - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) -## Translation +## Translation This style guide is also available in other languages: @@ -1509,16 +1509,16 @@ - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) -## The JavaScript Style Guide Guide +## The JavaScript Style Guide Guide - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) -## Contributors +## Contributors - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) -## License +## License (The MIT License) From fb86fc032d96597b7b33721a13cc3807d8fb90c0 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Sun, 16 Mar 2014 15:38:10 +0100 Subject: [PATCH 0027/1536] TOC links updated --- README.md | 53 +++++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 4821dd7fce..1bcb08b76f 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ console.log(foo[0], bar[0]); // => 9, 9 ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Objects @@ -117,7 +117,8 @@ type: 'alien' }; ``` - **[[⬆]](#TOC)** + +**[⬆ back to top](#table-of-contents)** ## Arrays @@ -169,7 +170,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Strings @@ -259,7 +260,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Functions @@ -317,7 +318,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** @@ -353,7 +354,7 @@ var isJedi = getProp('jedi'); ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Variables @@ -462,7 +463,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Hoisting @@ -551,7 +552,7 @@ - For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting) by [Ben Cherry](http://www.adequatelygood.com/) - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** @@ -600,7 +601,7 @@ - For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Blocks @@ -629,7 +630,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Comments @@ -722,7 +723,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Whitespace @@ -830,7 +831,7 @@ .call(tron.led); ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Commas @@ -892,7 +893,7 @@ ]; ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Semicolons @@ -919,7 +920,7 @@ })(); ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Type Casting & Coercion @@ -995,7 +996,7 @@ var hasAge = !!age; ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Naming Conventions @@ -1108,7 +1109,7 @@ }; ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Accessors @@ -1162,7 +1163,7 @@ }; ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Constructors @@ -1247,7 +1248,7 @@ }; ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Events @@ -1278,7 +1279,7 @@ }); ``` - **[[⬆]](#TOC)** + **[⬆ back to top](#table-of-contents)** ## Modules @@ -1309,7 +1310,7 @@ }(this); ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## jQuery @@ -1371,14 +1372,14 @@ $sidebar.find('ul').hide(); ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## ECMAScript 5 Compatibility - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/) - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Testing @@ -1391,7 +1392,7 @@ } ``` - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Performance @@ -1405,7 +1406,7 @@ - [Long String Concatenation](http://jsperf.com/ya-string-concat) - Loading... - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## Resources @@ -1464,7 +1465,7 @@ - [Dustin Diaz](http://dustindiaz.com/) - [nettuts](http://net.tutsplus.com/?s=javascript) - **[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** ## In the Wild @@ -1543,6 +1544,6 @@ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -**[[⬆]](#TOC)** +**[⬆ back to top](#table-of-contents)** # }; From fee185379a992ee8e747ca7b7aff1af816c1469c Mon Sep 17 00:00:00 2001 From: Stefan Thomas Date: Mon, 17 Mar 2014 13:55:51 -0700 Subject: [PATCH 0028/1536] Add Ripple to list of projects using this style guide. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1bcb08b76f..a42eb7e913 100644 --- a/README.md +++ b/README.md @@ -1491,6 +1491,7 @@ - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) + - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) From edfab47de01d14623b5bbd52679f8f6cadd89134 Mon Sep 17 00:00:00 2001 From: Juan Lulkin Date: Thu, 20 Mar 2014 21:06:13 +0200 Subject: [PATCH 0029/1536] Update README.md to add SeekingAlpha --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1bcb08b76f..ef04bdb5ee 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Airbnb JavaScript Style Guide() { +# ~~Airbnb~~ SeekingAlpha JavaScript Style Guide() { *A mostly reasonable approach to JavaScript* From f59724185adae45572fba6d6eca4d5c7adf1cb8f Mon Sep 17 00:00:00 2001 From: Juan Lulkin Date: Thu, 20 Mar 2014 21:09:20 +0200 Subject: [PATCH 0030/1536] Add SeekingAlpha to companies in the README --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ef04bdb5ee..87730609db 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ~~Airbnb~~ SeekingAlpha JavaScript Style Guide() { +# Airbnb JavaScript Style Guide() { *A mostly reasonable approach to JavaScript* @@ -1490,6 +1490,7 @@ - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) + - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) From 12baae728e0fc710e1efe3e662a6b63e2353bd37 Mon Sep 17 00:00:00 2001 From: Dan Caddigan Date: Tue, 25 Mar 2014 13:02:27 -0400 Subject: [PATCH 0031/1536] Fix typo with word programatically --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 87730609db..6379a5d505 100644 --- a/README.md +++ b/README.md @@ -216,7 +216,7 @@ 'fast.'; ``` - - When programatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). + - When programmatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). ```javascript var items, From 27379163658080c1d0b3a2b7dd210d8d74e6d038 Mon Sep 17 00:00:00 2001 From: Dan Caddigan Date: Tue, 25 Mar 2014 13:08:33 -0400 Subject: [PATCH 0032/1536] Use 80 chars for consistency with comment above --- README.md | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 87730609db..1570033aa0 100644 --- a/README.md +++ b/README.md @@ -199,21 +199,15 @@ var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; // bad - var errorMessage = 'This is a super long error that \ - was thrown because of Batman. \ - When you stop to think about \ - how Batman had anything to do \ + var errorMessage = 'This is a super long error that was thrown because \ + of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.'; - // good - var errorMessage = 'This is a super long error that ' + - 'was thrown because of Batman. ' + - 'When you stop to think about ' + - 'how Batman had anything to do ' + - 'with this, you would get nowhere ' + - 'fast.'; + var errorMessage = 'This is a super long error that was thrown because ' + + 'of Batman. When you stop to think about how Batman had anything to do ' + + 'with this, you would get nowhere fast.'; ``` - When programatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). From 3c504e9622588aadbb2c9f4163ea6699e75d6459 Mon Sep 17 00:00:00 2001 From: James Bunt Date: Wed, 23 Apr 2014 11:00:09 +1200 Subject: [PATCH 0033/1536] 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 1a6d30820957b02a2eed8d7cd937f1fb6db7850a Mon Sep 17 00:00:00 2001 From: James Bunt Date: Thu, 24 Apr 2014 11:05:30 +1200 Subject: [PATCH 0034/1536] Add justification and some further reading on using a leading semi colon before an IIFE to the Semicolons section. --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3409c68ccd..5e4bdd339c 100644 --- a/README.md +++ b/README.md @@ -907,13 +907,15 @@ return name; })(); - // good + // good (guards against the function becoming an argument when two files with IIFEs are concatenated) ;(function() { var name = 'Skywalker'; return name; })(); ``` + [Read more](http://stackoverflow.com/a/7365214/1712802). + **[⬆ back to top](#table-of-contents)** From 6288faf3dce86c64be7a4ce8328b53f4baa82855 Mon Sep 17 00:00:00 2001 From: James Bunt Date: Thu, 24 Apr 2014 11:11:23 +1200 Subject: [PATCH 0035/1536] Add Orion Health to the list of companies in the README. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3409c68ccd..23f69aca96 100644 --- a/README.md +++ b/README.md @@ -1482,6 +1482,7 @@ - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) + - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) From a3a0af93ed84b2da231558efea02c5d66364ffb7 Mon Sep 17 00:00:00 2001 From: Jack Lawson Date: Tue, 6 May 2014 12:18:44 -0700 Subject: [PATCH 0036/1536] Add Reddit to list of companies. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 23f69aca96..525de0638e 100644 --- a/README.md +++ b/README.md @@ -1486,6 +1486,7 @@ - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) + - **Reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) From b138d89d7b7b65117bba094e871c6fb025fb8e19 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 7 May 2014 12:36:56 -0700 Subject: [PATCH 0037/1536] [in the wild] Reddit => reddit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 525de0638e..536ea8e7fc 100644 --- a/README.md +++ b/README.md @@ -1486,7 +1486,7 @@ - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - - **Reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) + - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) From 8189d6cc5845dc5f64ac29e062f62e0b914c0c98 Mon Sep 17 00:00:00 2001 From: Max Goodman Date: Tue, 13 May 2014 15:43:44 -0700 Subject: [PATCH 0038/1536] Clarify single newlines at the end of files. --- README.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 536ea8e7fc..d1513147db 100644 --- a/README.md +++ b/README.md @@ -777,7 +777,7 @@ var x = y + 5; ``` - - Place an empty newline at the end of the file. + - End files with a single newline character. ```javascript // bad @@ -787,11 +787,18 @@ ``` ```javascript - // good + // bad (function(global) { // ...stuff... - })(this); + })(this);↵ + ↵ + ``` + ```javascript + // good + (function(global) { + // ...stuff... + })(this);↵ ``` - Use indentation when making long method chains. From 1c3e0c88176c548d3ebaf94464de64b333adedcb Mon Sep 17 00:00:00 2001 From: Joe Pettersson Date: Fri, 23 May 2014 12:20:24 +0100 Subject: [PATCH 0039/1536] Add syntax highlighting to noConflict reference --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d1513147db..234071e05b 100644 --- a/README.md +++ b/README.md @@ -1287,7 +1287,7 @@ - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933) - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. - - Add a method called noConflict() that sets the exported module to the previous version and returns this one. + - Add a method called `noConflict()` that sets the exported module to the previous version and returns this one. - Always declare `'use strict';` at the top of the module. ```javascript From 12df1f50f9ec1f76202dea8d1444b93c11447189 Mon Sep 17 00:00:00 2001 From: Robert Djurasaj Date: Thu, 5 Jun 2014 11:03:11 -0600 Subject: [PATCH 0040/1536] Remove ; from function endings --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 234071e05b..53ece2b488 100644 --- a/README.md +++ b/README.md @@ -1022,14 +1022,14 @@ // bad var OBJEcttsssss = {}; var this_is_my_object = {}; - function c() {}; + function c() {} var u = new user({ name: 'Bob Parr' }); // good var thisIsMyObject = {}; - function thisIsMyFunction() {}; + function thisIsMyFunction() {} var user = new User({ name: 'Bob Parr' }); From 0a58fc75def52b776d3e391dbf3b278867ef9047 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Fri, 6 Jun 2014 18:15:59 -0700 Subject: [PATCH 0041/1536] [naming conventions] add note about NFEs, IE8 and below. fixes #82 --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 0d961422f1..2d277e2625 100644 --- a/README.md +++ b/README.md @@ -1117,6 +1117,8 @@ }; ``` + - **Note:** IE8 and below exhibit some quirks with named function expressions. See [http://kangax.github.io/nfe/](http://kangax.github.io/nfe/) for more info. + **[⬆ back to top](#table-of-contents)** From 2895ae0e57aee2198c5dbf71ec28b1de383d41ef Mon Sep 17 00:00:00 2001 From: Rahul Doshi Date: Thu, 12 Jun 2014 09:10:06 -0700 Subject: [PATCH 0042/1536] Add DailyMotion to the list of organizations that are using this style guide --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2d277e2625..92f4a2402c 100644 --- a/README.md +++ b/README.md @@ -1485,6 +1485,7 @@ - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/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) - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) From 214bf78ea8de4418a25004c6c6c0efaec7472e4c Mon Sep 17 00:00:00 2001 From: John Mumm Date: Mon, 16 Jun 2014 09:50:25 -0400 Subject: [PATCH 0043/1536] Add TheLadders to the list of organizations that forked this style guide --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 92f4a2402c..61d84b0ea8 100644 --- a/README.md +++ b/README.md @@ -1502,11 +1502,12 @@ - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) - - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) + - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) + - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) From 0c36235c35ea866bb274efbb60b29098ac4b7fc4 Mon Sep 17 00:00:00 2001 From: Francis Plaza Date: Sun, 29 Jun 2014 13:09:51 -0400 Subject: [PATCH 0044/1536] Added Muber to the list of organizations using this styleguide --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index caf54d4843..c6636f1a96 100644 --- a/README.md +++ b/README.md @@ -1499,6 +1499,7 @@ - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) + - **Muber**: [muber/javascript](https://github.com/muber/javascript) - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) From 697aa00da0a53402a92bac6629e856302b7d1707 Mon Sep 17 00:00:00 2001 From: Mark Storus Date: Tue, 29 Jul 2014 16:09:54 -0700 Subject: [PATCH 0045/1536] jshintrc cleanup - eqnull is a relaxing option, not an enforcing option - trailing has been removed as of jshint 2.5 - put in alphabetical order --- linters/jshintrc | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/linters/jshintrc b/linters/jshintrc index d3b47148a8..cc6e398b40 100644 --- a/linters/jshintrc +++ b/linters/jshintrc @@ -25,23 +25,23 @@ // Prohibit use of == and != in favor of === and !==. "eqeqeq": true, - // Suppress warnings about == null comparisons. - "eqnull": true, - // Enforce tab width of 2 spaces. "indent": 2, // Prohibit use of a variable before it is defined. "latedef": true, + // Enforce line length to 80 characters + "maxlen": 80, + // Require capitalized names for constructor functions. "newcap": true, // Enforce use of single quotation marks for strings. "quotmark": "single", - // Prohibit trailing whitespace. - "trailing": true, + // Enforce placing 'use strict' at the top function scope + "strict": true, // Prohibit use of explicitly undeclared variables. "undef": true, @@ -49,9 +49,11 @@ // Warn when variables are defined but never used. "unused": true, - // Enforce line length to 80 characters - "maxlen": 80, + /* + * RELAXING OPTIONS + * ================= + */ - // Enforce placing 'use strict' at the top function scope - "strict": true + // Suppress warnings about == null comparisons. + "eqnull": true } From cccf3644b1f8b50de557aed41e5a57760756f966 Mon Sep 17 00:00:00 2001 From: Adrian Bruinhout Date: Tue, 5 Aug 2014 12:16:53 -0400 Subject: [PATCH 0046/1536] Adding Intent Media to the list of companies --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c6636f1a96..32eff50a28 100644 --- a/README.md +++ b/README.md @@ -1495,6 +1495,7 @@ - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) + - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) From 46481209040f85e9c76ff5cc9186335aedf66198 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 5 Aug 2014 16:27:06 -0700 Subject: [PATCH 0047/1536] [npm] add package.json --- index.js | 0 package.json | 24 ++++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 index.js create mode 100644 package.json diff --git a/index.js b/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/package.json b/package.json new file mode 100644 index 0000000000..0643a32821 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "airbnb-style", + "version": "1.0.0", + "description": "A mostly reasonable approach to JavaScript.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/airbnb/javascript.git" + }, + "keywords": [ + "style guide", + "lint", + "airbnb" + ], + "author": "Harrison Shoff (https://twitter.com/hshoff)", + "license": "MIT", + "bugs": { + "url": "https://github.com/airbnb/javascript/issues" + }, + "homepage": "https://github.com/airbnb/javascript" +} From 9f535bd724fe01ffea9fbabb65a3053f3bf98e2f Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 5 Aug 2014 16:48:54 -0700 Subject: [PATCH 0048/1536] [npm] remove main, index.js --- index.js | 0 package.json | 1 - 2 files changed, 1 deletion(-) delete mode 100644 index.js diff --git a/index.js b/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/package.json b/package.json index 0643a32821..2fe47fb268 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "airbnb-style", "version": "1.0.0", "description": "A mostly reasonable approach to JavaScript.", - "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, From b7560735222ab3f902554900e08ab808794b8cd2 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 13 Aug 2014 18:06:26 -0700 Subject: [PATCH 0049/1536] [resources] add link to 'multiple var statements' in other styles --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 32eff50a28..cd099b56ce 100644 --- a/README.md +++ b/README.md @@ -1439,6 +1439,7 @@ - [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) + - [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman **Further Reading** @@ -1511,7 +1512,7 @@ - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) + - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) From e46091bf44cf35c1a143c879b73104d3a6198e68 Mon Sep 17 00:00:00 2001 From: Justin Soliz Date: Mon, 8 Sep 2014 10:11:29 -0700 Subject: [PATCH 0050/1536] Adding Avalara to list of orgs --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index cd099b56ce..67ae2404f2 100644 --- a/README.md +++ b/README.md @@ -1487,6 +1487,7 @@ - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) + - **Avalara**: [avalara/javascript](https://github.com/avalara/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 b81a7402416b90c9ef7b484a947111f8f514b386 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 8 Sep 2014 10:41:36 -0700 Subject: [PATCH 0051/1536] [in the wild] add VoxFeed. fixes #192 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 67ae2404f2..d551150d7e 100644 --- a/README.md +++ b/README.md @@ -1515,6 +1515,7 @@ - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) + - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) From 38fd77e159fc905820f6beb40e39e0a8b23dc9a4 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 8 Sep 2014 10:42:50 -0700 Subject: [PATCH 0052/1536] [in the wild] add Evernote. fixes #193 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d551150d7e..3c6f2da1a3 100644 --- a/README.md +++ b/README.md @@ -1491,6 +1491,7 @@ - **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) + - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) From e7c2997b3c662724eebb8425c2e6e1b76ce63974 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Fri, 19 Sep 2014 11:42:07 -0700 Subject: [PATCH 0053/1536] [resources] add tools section, include JSHint & JSCS --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 3c6f2da1a3..ba3d5392bc 100644 --- a/README.md +++ b/README.md @@ -1428,6 +1428,13 @@ - [Annotated ECMAScript 5.1](http://es5.github.com/) +**Tools** + + - [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) - a code style checker + + [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json) + **Other Styleguides** - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) From e0917c80230afc7e13ed94923e89380c465303a3 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Fri, 19 Sep 2014 11:52:54 -0700 Subject: [PATCH 0054/1536] [resources] add clarity to new tools section --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ba3d5392bc..0063edd60c 100644 --- a/README.md +++ b/README.md @@ -1430,10 +1430,9 @@ **Tools** - - [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) - a code style checker - + [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json) + - Code Style Linters + + [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) **Other Styleguides** From cdb49a3478ee102cbb42404fdc28e314c4a2d924 Mon Sep 17 00:00:00 2001 From: Alexander Jeng Date: Sun, 21 Sep 2014 21:31:18 -0700 Subject: [PATCH 0055/1536] Added author for JSBooks --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0063edd60c..2ddaa34afd 100644 --- a/README.md +++ b/README.md @@ -1467,7 +1467,7 @@ - [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy - - [JSBooks](http://jsbooks.revolunet.com/) + - [JSBooks](http://jsbooks.revolunet.com/) - Julien Bouquillon - [Third Party JavaScript](http://manning.com/vinegar/) - Ben Vinegar and Anton Kovalyov **Blogs** From 6161375094a994236e3a6066c8db7aab979bc22c Mon Sep 17 00:00:00 2001 From: Jose Joaquin Merino Date: Mon, 22 Sep 2014 12:35:31 -0700 Subject: [PATCH 0056/1536] Added author in: Other Styles JeongHoon Byun (https://github.com/outsideris) created the website that this repo links to. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2ddaa34afd..1808a02629 100644 --- a/README.md +++ b/README.md @@ -1444,7 +1444,7 @@ - [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) + - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) - JeongHoon Byun - [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman **Further Reading** From aaf2f2e24b13372f492b90790b5e39fd711cad71 Mon Sep 17 00:00:00 2001 From: Andrew Teich Date: Mon, 22 Sep 2014 17:36:28 -0700 Subject: [PATCH 0057/1536] Added author to Conditional Callbacks On Line 1446, gave credit to Ross Allen who wrote Conditional Callbacks --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1808a02629..6598ed69c4 100644 --- a/README.md +++ b/README.md @@ -1443,7 +1443,7 @@ **Other Styles** - [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen - - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) + - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - Ross Allen - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) - JeongHoon Byun - [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman From a02795efdae6b3dc76eb616a61e3188e487203be Mon Sep 17 00:00:00 2001 From: Francesc Puig Date: Thu, 2 Oct 2014 16:40:30 +0200 Subject: [PATCH 0058/1536] Catalan: added new translation Update the translations section with a new translation that is in development. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6598ed69c4..b2669f47c7 100644 --- a/README.md +++ b/README.md @@ -1539,6 +1539,7 @@ - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) + - ![ScreenShot](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) ## The JavaScript Style Guide Guide From 6cbf79a6e7432ee1b089a4299a58ddc695134176 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Ro=CC=88nnlund?= Date: Mon, 27 Oct 2014 21:27:07 +0100 Subject: [PATCH 0059/1536] Added missing semicolon. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b2669f47c7..062d57c238 100644 --- a/README.md +++ b/README.md @@ -1223,7 +1223,7 @@ var luke = new Jedi(); luke.jump(); // => true - luke.setHeight(20) // => undefined + luke.setHeight(20); // => undefined // good Jedi.prototype.jump = function() { From 21a44a7627c266f35f6d2a7f8b8ba1504987b0f9 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Oct 2014 00:15:03 -0700 Subject: [PATCH 0060/1536] [in the wild] add Target --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 062d57c238..2212fb6386 100644 --- a/README.md +++ b/README.md @@ -1520,6 +1520,7 @@ - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) + - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) From ef4420bfa00f0f228d7da65f78097f3cda414620 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Oct 2014 00:17:44 -0700 Subject: [PATCH 0061/1536] [in the wild] add InfoJobs. fixes #203 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2212fb6386..fa47974833 100644 --- a/README.md +++ b/README.md @@ -1504,6 +1504,7 @@ - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) + - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) From d4f266878461ad39c90c731649a5a10b46a53404 Mon Sep 17 00:00:00 2001 From: Joseandro Luiz Date: Mon, 3 Nov 2014 14:13:53 +0100 Subject: [PATCH 0062/1536] Included Weggo as one of the style guide users --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fa47974833..6886e4f079 100644 --- a/README.md +++ b/README.md @@ -1525,6 +1525,7 @@ - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) + - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript) - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) From 0baa1054ed9528dc626ec8e91de998ed21b22347 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 12 Nov 2014 16:56:56 +0000 Subject: [PATCH 0063/1536] [chat] add link to gitter, come chat with us about js --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 6886e4f079..17f5e5df07 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ 1. [In the Wild](#in-the-wild) 1. [Translation](#translation) 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) + 1. [Chat With Us About Javascript](#chat-with-us-about-javascript) 1. [Contributors](#contributors) 1. [License](#license) @@ -1548,6 +1549,10 @@ - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) +## Chat With Us About JavaScript + + - Find us on [gitter](https://gitter.im/airbnb/javascript). + ## Contributors - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) From d14b219b8a001974b1edbaacbdc77fc7f1da5f96 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 12 Nov 2014 17:03:37 +0000 Subject: [PATCH 0064/1536] [chat] add gitter badge --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 17f5e5df07..7ea727b09e 100644 --- a/README.md +++ b/README.md @@ -1551,6 +1551,8 @@ ## Chat With Us About JavaScript + [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) + - Find us on [gitter](https://gitter.im/airbnb/javascript). ## Contributors From 058e9adce3e8b720781b99faa4c7ba2f15911fff Mon Sep 17 00:00:00 2001 From: Maciej Jurczyk Date: Sat, 15 Nov 2014 00:33:44 +0100 Subject: [PATCH 0065/1536] Added a link to the translated tutorial --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7ea727b09e..24980c8e72 100644 --- a/README.md +++ b/README.md @@ -1544,6 +1544,7 @@ - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - ![ScreenShot](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) + - :pl: **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) ## The JavaScript Style Guide Guide From da9103f11bc9143ff58bc65957bca45e255bad02 Mon Sep 17 00:00:00 2001 From: Maciej Jurczyk Date: Sat, 15 Nov 2014 00:41:53 +0100 Subject: [PATCH 0066/1536] Fixed flag icon --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 24980c8e72..3be49fc990 100644 --- a/README.md +++ b/README.md @@ -1544,7 +1544,7 @@ - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - ![ScreenShot](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) - - :pl: **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) + - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Poland/16.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) ## The JavaScript Style Guide Guide From 2522afab5d939aabec131744d2a821b8677e76a6 Mon Sep 17 00:00:00 2001 From: Maciej Jurczyk Date: Sat, 15 Nov 2014 00:43:30 +0100 Subject: [PATCH 0067/1536] Also fixed Bulgarian flag icon --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3be49fc990..e0e1e9ef8c 100644 --- a/README.md +++ b/README.md @@ -1542,7 +1542,7 @@ - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) + - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Bulgaria/16.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - ![ScreenShot](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Poland/16.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) From 90f3dc357fb5a7ccd6eb56dfe9f3e6d7044c24c5 Mon Sep 17 00:00:00 2001 From: Maciej Jurczyk Date: Sat, 15 Nov 2014 00:45:20 +0100 Subject: [PATCH 0068/1536] Also the flag of the Portugal was missing --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e0e1e9ef8c..12c0da97d8 100644 --- a/README.md +++ b/README.md @@ -1536,7 +1536,7 @@ - :de: **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) - :jp: **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - - :br: **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) + - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Portugal/16.png) **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) From 4b24cc1c254dfada973d5d718082ef8a33e7a68d Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 16 Nov 2014 19:59:48 -0800 Subject: [PATCH 0069/1536] [translations] use gosquared flags for consistency --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 12c0da97d8..684697e64e 100644 --- a/README.md +++ b/README.md @@ -1534,17 +1534,17 @@ This style guide is also available in other languages: - - :de: **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) - - :jp: **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Portugal/16.png) **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) - - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Bulgaria/16.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) - - ![ScreenShot](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) - - ![ScreenShot](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Poland/16.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) + - ![de](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Germany/16.png) **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) + - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Japan/16.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) + - ![br](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Portugal/16.png) **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/China/16.png) **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Spain/16.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) + - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/South-Korea/16.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) + - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/France/16.png) **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Russia/16.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) + - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Bulgaria/16.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) + - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Poland/16.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) ## The JavaScript Style Guide Guide From b2357ce19aaafa551eae21cbee0837c04d017cc5 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 16 Nov 2014 20:05:13 -0800 Subject: [PATCH 0070/1536] [translations] use bigger, shinier flags --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 684697e64e..0257d88dd9 100644 --- a/README.md +++ b/README.md @@ -1534,17 +1534,17 @@ This style guide is also available in other languages: - - ![de](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Germany/16.png) **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) - - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Japan/16.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - - ![br](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Portugal/16.png) **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/China/16.png) **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) - - ![es](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Spain/16.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/South-Korea/16.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/France/16.png) **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Russia/16.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Bulgaria/16.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) + - ![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) + - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) + - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Portugal.png) **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) + - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/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) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) + - ![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) - - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/src/flags/Poland/16.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) + - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) ## The JavaScript Style Guide Guide From a224d0a15624bd1ecdc55db14743d5da597fabf4 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 16 Nov 2014 20:06:19 -0800 Subject: [PATCH 0071/1536] [chat] add gitter badge --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0257d88dd9..9a9cd3fd22 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) + # Airbnb JavaScript Style Guide() { *A mostly reasonable approach to JavaScript* @@ -1552,8 +1554,6 @@ ## Chat With Us About JavaScript - [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) - - Find us on [gitter](https://gitter.im/airbnb/javascript). ## Contributors From 7f393a4120c29abb427785d62de2a37088a3d0ca Mon Sep 17 00:00:00 2001 From: Allan Bettarel Date: Wed, 26 Nov 2014 12:29:20 -0500 Subject: [PATCH 0072/1536] Update README.md Add StudentSphere in the list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9a9cd3fd22..1053c08ffe 100644 --- a/README.md +++ b/README.md @@ -1524,6 +1524,7 @@ - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) + - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/javascript) - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) From 8d51bd504b3d64e551f28a2b5bfbd98f1605f131 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Mon, 1 Dec 2014 14:20:22 -0800 Subject: [PATCH 0073/1536] Switch from single var to one-var-per-variable Frontenders at Airbnb at have been discussing this change for a bit, and we've come to favor one-var-per-variable over one-var-only declarations. Two things improve the maintainability of this style over one var for multiple variables: 1. You never have a diff of a line that's removing a `;` and inserting a `,`. 2. You can't accidentally declare global variables because you have a one-character mistake (semicolon instead of comma): ```javascript var foo = 1, bar = 2; baz = 3; // added later and (accidentally) declared globally ``` --- README.md | 72 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 44 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 1053c08ffe..6a0de972c1 100644 --- a/README.md +++ b/README.md @@ -50,8 +50,8 @@ + `undefined` ```javascript - var foo = 1, - bar = foo; + var foo = 1; + var bar = foo; bar = 9; @@ -64,8 +64,8 @@ + `function` ```javascript - var foo = [1, 2], - bar = foo; + var foo = [1, 2]; + var bar = foo; bar[0] = 9; @@ -151,9 +151,9 @@ - When you need to copy an array use Array#slice. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7) ```javascript - var len = items.length, - itemsCopy = [], - i; + var len = items.length; + var itemsCopy = []; + var i; // bad for (i = 0; i < len; i++) { @@ -216,10 +216,10 @@ - When programmatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). ```javascript - var items, - messages, - length, - i; + var items; + var messages; + var length; + var i; messages = [{ state: 'success', @@ -366,17 +366,28 @@ var superPower = new SuperPower(); ``` - - Use one `var` declaration for multiple variables and declare each variable on a newline. + - Use one `var` declaration per variable. ```javascript // bad + var items = getItems(), + goSportsTeam = true, + dragonball = 'z'; + + // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; + ``` - // good + 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. Also, you can't make the following mistake: + + ```javascript + // can you catch the error? var items = getItems(), - goSportsTeam = true, + goSportsTeam = true; dragonball = 'z'; ``` @@ -389,17 +400,18 @@ goSportsTeam = true; // bad - var i, items = getItems(), - dragonball, - goSportsTeam = true, - len; + var i; + var items = getItems(); + var dragonball; + var goSportsTeam = true; + var len; // good - var items = getItems(), - goSportsTeam = true, - dragonball, - length, - i; + var items = getItems(); + var goSportsTeam = true; + var dragonball; + var length; + var i; ``` - Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues. @@ -843,14 +855,18 @@ ```javascript // bad - var once + var story = [ + once , upon - , aTime; + , aTime + ]; // good - var once, - upon, - aTime; + var story = [ + once, + upon, + aTime + ]; // bad var hero = { From b61d52ca41450c5f661bd96265b3c8e063c0961c Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Mon, 1 Dec 2014 14:28:20 -0800 Subject: [PATCH 0074/1536] use JSDoc/Closure Compiler style type annotations --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6a0de972c1..21947075b4 100644 --- a/README.md +++ b/README.md @@ -651,8 +651,8 @@ // make() returns a new element // based on the passed in tag name // - // @param tag - // @return element + // @param {String} tag + // @return {Element} element function make(tag) { // ...stuff... @@ -665,8 +665,8 @@ * make() returns a new element * based on the passed in tag name * - * @param tag - * @return element + * @param {String} tag + * @return {Element} element */ function make(tag) { From 3c68fc494632bfb28b470f63af94cf8b9a11acf1 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Wed, 3 Dec 2014 17:41:15 -0800 Subject: [PATCH 0075/1536] Reformat var change --- README.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 21947075b4..6e7c6f1bc8 100644 --- a/README.md +++ b/README.md @@ -367,6 +367,9 @@ ``` - Use one `var` declaration per variable. + 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. ```javascript // bad @@ -374,23 +377,18 @@ goSportsTeam = true, dragonball = 'z'; + // bad + // (compare to above, and try to spot the mistake) + var items = getItems(), + goSportsTeam = true; + dragonball = 'z'; + // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; ``` - 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. Also, you can't make the following mistake: - - ```javascript - // can you catch the error? - var items = getItems(), - goSportsTeam = true; - dragonball = 'z'; - ``` - - Declare unassigned variables last. This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. ```javascript From 7ab3b294632ff6bc35bbe2602ba298937ef10dfc Mon Sep 17 00:00:00 2001 From: Gabriel Pedro Date: Mon, 15 Dec 2014 15:36:12 -0300 Subject: [PATCH 0076/1536] Brazilian Portuguese Flag --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e7c6f1bc8..0a6d79385c 100644 --- a/README.md +++ b/README.md @@ -1553,7 +1553,7 @@ - ![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) - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Portugal.png) **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) + - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) From b4c87b1ba9ede3ad59d36031ab3641568a0244f0 Mon Sep 17 00:00:00 2001 From: Leonardo Micheloni Date: Fri, 2 Jan 2015 15:20:27 -0300 Subject: [PATCH 0077/1536] Added Kinetica solutions to organizations list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0a6d79385c..a4f1d51d69 100644 --- a/README.md +++ b/README.md @@ -1523,6 +1523,7 @@ - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) + - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) From a280e9595fa06ed0a1fd3ae3444e0da890f7bdb8 Mon Sep 17 00:00:00 2001 From: Preston Parry Date: Wed, 21 Jan 2015 23:04:39 -0800 Subject: [PATCH 0078/1536] Punctuation tweak --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a4f1d51d69..c48b03bdaa 100644 --- a/README.md +++ b/README.md @@ -494,8 +494,8 @@ } // The interpreter is hoisting the variable - // declaration to the top of the scope. - // Which means our example could be rewritten as: + // declaration to the top of the scope, + // which means our example could be rewritten as: function example() { var declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined From 233c1db73ae24731074ecba583945036f3c7148a Mon Sep 17 00:00:00 2001 From: Preston Parry Date: Tue, 27 Jan 2015 17:48:00 -0800 Subject: [PATCH 0079/1536] Update README.md --- README.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index c48b03bdaa..59baac5c76 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ ## Types - - **Primitives**: When you access a primitive type you work directly on its value + - **Primitives**: When you access a primitive type you work directly on its value. + `string` + `number` @@ -57,7 +57,7 @@ console.log(foo, bar); // => 1, 9 ``` - - **Complex**: When you access a complex type you work on a reference to its value + - **Complex**: When you access a complex type you work on a reference to its value. + `object` + `array` @@ -86,7 +86,7 @@ var 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) + - 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 @@ -125,7 +125,7 @@ ## Arrays - - Use the literal syntax for array creation + - Use the literal syntax for array creation. ```javascript // bad @@ -178,7 +178,7 @@ ## Strings - - Use single quotes `''` for strings + - Use single quotes `''` for strings. ```javascript // bad @@ -195,7 +195,7 @@ ``` - 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) + - 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 @@ -557,7 +557,7 @@ } ``` - - For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting) by [Ben Cherry](http://www.adequatelygood.com/) + - For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting) by [Ben Cherry](http://www.adequatelygood.com/). **[⬆ back to top](#table-of-contents)** @@ -606,7 +606,7 @@ } ``` - - For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll + - 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)** @@ -706,7 +706,7 @@ - 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 + - Use `// FIXME:` to annotate problems. ```javascript function Calculator() { @@ -718,7 +718,7 @@ } ``` - - Use `// TODO:` to annotate solutions to problems + - Use `// TODO:` to annotate solutions to problems. ```javascript function Calculator() { @@ -735,7 +735,7 @@ ## Whitespace - - Use soft tabs set to 2 spaces + - Use soft tabs set to 2 spaces. ```javascript // bad @@ -1042,7 +1042,7 @@ } ``` - - Use camelCase when naming objects, functions, and instances + - Use camelCase when naming objects, functions, and instances. ```javascript // bad @@ -1061,7 +1061,7 @@ }); ``` - - Use PascalCase when naming constructors or classes + - Use PascalCase when naming constructors or classes. ```javascript // bad @@ -1083,7 +1083,7 @@ }); ``` - - Use a leading underscore `_` when naming private properties + - Use a leading underscore `_` when naming private properties. ```javascript // bad @@ -1143,8 +1143,8 @@ ## Accessors - - Accessor functions for properties are not required - - If you do make accessor functions use getVal() and setVal('hello') + - Accessor functions for properties are not required. + - If you do make accessor functions use getVal() and setVal('hello'). ```javascript // bad @@ -1160,7 +1160,7 @@ dragon.setAge(25); ``` - - If the property is a boolean, use isVal() or hasVal() + - If the property is a boolean, use isVal() or hasVal(). ```javascript // bad @@ -1406,7 +1406,7 @@ ## ECMAScript 5 Compatibility - - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/) + - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/). **[⬆ back to top](#table-of-contents)** From 33363af613a6c8e9fa3958e7c90340e69e7db387 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 22 Jan 2015 17:38:38 -0800 Subject: [PATCH 0080/1536] put the dot with fn name when chaining --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e7c6f1bc8..aee3ef7154 100644 --- a/README.md +++ b/README.md @@ -814,12 +814,21 @@ })(this);↵ ``` - - Use indentation when making long method chains. + - 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 // bad $('#items').find('.selected').highlight().end().find('.open').updateCount(); + // bad + $('#items'). + find('selected'). + highlight(). + end(). + find('.open'). + updateCount(); + // good $('#items') .find('.selected') From 384d65e472516a4e6a62da2a4d05e4d4242dce10 Mon Sep 17 00:00:00 2001 From: Davy Chiu Date: Sat, 31 Jan 2015 23:46:58 -0500 Subject: [PATCH 0081/1536] add Apartmint to list of organizations --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index bdb19ea668..d212f2198e 100644 --- a/README.md +++ b/README.md @@ -1519,6 +1519,7 @@ - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **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) - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) From cedfc81848fc4eeffe1db520e655d5d3c0cea920 Mon Sep 17 00:00:00 2001 From: Jigsaw Date: Wed, 4 Feb 2015 19:18:48 +0800 Subject: [PATCH 0082/1536] Update README.md Add Chinese(Traditional) to Translation. --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d212f2198e..098d584e41 100644 --- a/README.md +++ b/README.md @@ -1565,7 +1565,8 @@ - ![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) - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/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) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/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) From 533e9ea7babe43e7775d79de86975bb3404e332d Mon Sep 17 00:00:00 2001 From: Eli White Date: Sat, 7 Feb 2015 23:21:58 -0800 Subject: [PATCH 0083/1536] Adding comments about spacing between blocks --- README.md | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d212f2198e..ba9f9dd405 100644 --- a/README.md +++ b/README.md @@ -369,7 +369,7 @@ - Use one `var` declaration per variable. 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. + diffs. ```javascript // bad @@ -854,6 +854,43 @@ .call(tron.led); ``` + - Leave a blank line after blocks and before the next statement + + ```javascript + // bad + if (true) { + var a = 2; + } + var b = 3; + + // good + if (true) { + var a = 2; + } + var b = 3; + + // bad + var o = { + foo: function() { + }, + bar: function() { + } + }; + return o; + + // good + var o = { + foo: function() { + }, + + bar: function() { + } + }; + + return o; + ``` + + **[⬆ back to top](#table-of-contents)** ## Commas From 80e698eb651f78f8d3088c6d38659eadfdb64d84 Mon Sep 17 00:00:00 2001 From: Eli White Date: Sun, 8 Feb 2015 09:26:37 -0800 Subject: [PATCH 0084/1536] Using better examples --- README.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index ba9f9dd405..90e921fab4 100644 --- a/README.md +++ b/README.md @@ -858,28 +858,29 @@ ```javascript // bad - if (true) { - var a = 2; + if (foo) { + return bar; } - var b = 3; + return baz; // good - if (true) { - var a = 2; + if (foo) { + return bar; } - var b = 3; + + return baz // bad - var o = { + var obj = { foo: function() { }, bar: function() { } }; - return o; + return obj; // good - var o = { + var obj = { foo: function() { }, @@ -887,7 +888,7 @@ } }; - return o; + return obj; ``` From 54060760023576dc9801a1c147d0e7afd8d31cb4 Mon Sep 17 00:00:00 2001 From: Carlos Andres Herrera Date: Thu, 12 Feb 2015 12:23:23 +0700 Subject: [PATCH 0085/1536] Adding Nimbl3 to the organizations list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 90e921fab4..fdf138818f 100644 --- a/README.md +++ b/README.md @@ -1579,6 +1579,7 @@ - **Muber**: [muber/javascript](https://github.com/muber/javascript) - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) + - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) From b0a364dedbc1f9c2c8512606bc5c26db5bceb2f8 Mon Sep 17 00:00:00 2001 From: Omar Duarte Date: Thu, 12 Feb 2015 00:11:37 -0800 Subject: [PATCH 0086/1536] Missed a semicolon --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 90e921fab4..28f5e0bb3c 100644 --- a/README.md +++ b/README.md @@ -868,7 +868,7 @@ return bar; } - return baz + return baz; // bad var obj = { From b49d58ff0b7700952b6abc17aad13ec349f76829 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 25 Feb 2015 00:28:55 -0800 Subject: [PATCH 0087/1536] [resources] add frontend guidlines by @bendc --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 57e17ea83f..6fef48ad81 100644 --- a/README.md +++ b/README.md @@ -1517,6 +1517,7 @@ - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz - [ES6 Features](https://github.com/lukehoban/es6features) - Luke Hoban + - [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) - Benjamin De Cock **Books** From 656a8f678199cfbe7b48e7bc00e68791ff1be862 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Tue, 3 Mar 2015 12:45:16 -0800 Subject: [PATCH 0088/1536] [in the wild] add @Jam3 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6fef48ad81..5908010bd9 100644 --- a/README.md +++ b/README.md @@ -1572,6 +1572,7 @@ - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) + - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) From af096c8a940886b7ce5e802f01f81636fe977a41 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Tue, 10 Mar 2015 16:50:20 -0700 Subject: [PATCH 0089/1536] add `else` to docs --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index 6e7c6f1bc8..906245e196 100644 --- a/README.md +++ b/README.md @@ -637,6 +637,29 @@ } ``` + - 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 + // bad + if (test) { + thing1(); + thing2(); + } + else { + thing3(); + } + + // good + if (test) { + thing1(); + thing2(); + } else { + thing3(); + } + ``` + + **[⬆ back to top](#table-of-contents)** From e9b573287c405d67b9a92f213df137f11a011913 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Wed, 11 Mar 2015 15:01:14 -0700 Subject: [PATCH 0090/1536] naming files containing one class --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 6cf1f6d0a3..99e286d73b 100644 --- a/README.md +++ b/README.md @@ -1208,6 +1208,25 @@ - **Note:** IE8 and below exhibit some quirks with named function expressions. See [http://kangax.github.io/nfe/](http://kangax.github.io/nfe/) for more info. + - If your file exports a single class, your filename should be exactly the name of the class. + ```javascript + // file contents + class CheckBox { + // ... + } + module.exports = CheckBox; + + // in some other file + // bad + var CheckBox = require('./checkBox'); + + // bad + var CheckBox = require('./check_box'); + + // good + var CheckBox = require('./CheckBox'); + ``` + **[⬆ back to top](#table-of-contents)** From 5a01165dbb455d327f89afa0eae66858cff8eb43 Mon Sep 17 00:00:00 2001 From: Prasanth Vaaheeswaran Date: Fri, 13 Mar 2015 13:35:47 -0400 Subject: [PATCH 0091/1536] Added a book to the book list - Added Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 99e286d73b..9cdc00b0f3 100644 --- a/README.md +++ b/README.md @@ -1576,6 +1576,7 @@ - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy - [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 **Blogs** From 02d3f52402d753417b9fd62df073e88268c83b23 Mon Sep 17 00:00:00 2001 From: Prasanth Vaaheeswaran Date: Fri, 13 Mar 2015 13:39:15 -0400 Subject: [PATCH 0092/1536] Created Podcasts section --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 9cdc00b0f3..a8d45cd4ba 100644 --- a/README.md +++ b/README.md @@ -1592,6 +1592,11 @@ - [Dustin Diaz](http://dustindiaz.com/) - [nettuts](http://net.tutsplus.com/?s=javascript) +**Podcasts** + +-[JavaScript Jabber](http://devchat.tv/js-jabber/) + + **[⬆ back to top](#table-of-contents)** ## In the Wild From c6191f834b15fee35e30f8db9029b069e54846b4 Mon Sep 17 00:00:00 2001 From: Prasanth Vaaheeswaran Date: Fri, 13 Mar 2015 13:40:45 -0400 Subject: [PATCH 0093/1536] Formatting updated for Podcasts --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a8d45cd4ba..cfbfaaf5bc 100644 --- a/README.md +++ b/README.md @@ -1594,7 +1594,7 @@ **Podcasts** --[JavaScript Jabber](http://devchat.tv/js-jabber/) + - [JavaScript Jabber](http://devchat.tv/js-jabber/) **[⬆ back to top](#table-of-contents)** From 3eef511fd650a2d4504afdf9007fd1c4c3a508da Mon Sep 17 00:00:00 2001 From: fvanderwielen Date: Mon, 16 Mar 2015 23:05:09 +0100 Subject: [PATCH 0094/1536] Fixes #251 - Rename Conditional Expressions As per issue #251, renames section Conditional Expressions & Equality to Comparison Operators & Equality, as the section is not about the Elvis operator :) --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 99e286d73b..a06ea741b8 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ 1. [Properties](#properties) 1. [Variables](#variables) 1. [Hoisting](#hoisting) - 1. [Conditional Expressions & Equality](#conditional-expressions--equality) + 1. [Comparison Operators & Equality](#comparison-operators--equality) 1. [Blocks](#blocks) 1. [Comments](#comments) 1. [Whitespace](#whitespace) @@ -563,10 +563,10 @@ -## Conditional Expressions & Equality +## Comparison Operators & Equality - Use `===` and `!==` over `==` and `!=`. - - Conditional expressions are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: + - Comparison operators are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: + **Objects** evaluate to **true** + **Undefined** evaluates to **false** From 7c79b4e21c943085ac59071880407bc2b486a7c8 Mon Sep 17 00:00:00 2001 From: Bruno Ferreira Date: Fri, 20 Mar 2015 08:33:35 -0300 Subject: [PATCH 0095/1536] Added T4R Technology to organizations list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a06ea741b8..37de03a301 100644 --- a/README.md +++ b/README.md @@ -1635,6 +1635,7 @@ - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/javascript) - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) + - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) - **Userify**: [userify/javascript](https://github.com/userify/javascript) - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript) From 5fd7c6f08c0650ed67297fc83c8a0590c9a92cc8 Mon Sep 17 00:00:00 2001 From: Estelle Date: Mon, 23 Mar 2015 18:48:19 -0700 Subject: [PATCH 0096/1536] 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 78309e7ddbc8fff172ca770f641b04ca4eadb425 Mon Sep 17 00:00:00 2001 From: Veikko Karsikko Date: Thu, 26 Mar 2015 10:22:35 +0200 Subject: [PATCH 0097/1536] Add Nordic Venture Family to organizations list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e764021251..0e80fd9bce 100644 --- a/README.md +++ b/README.md @@ -1630,6 +1630,7 @@ - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) + - **Nordic Venture Family**: [CodeDistillery/javascript](https://github.com/CodeDistillery/javascript) - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) From 3dc4b5edc8786855f9a5288af021141b73ce1d2a Mon Sep 17 00:00:00 2001 From: Joe Frambach Date: Fri, 27 Mar 2015 10:40:15 -0700 Subject: [PATCH 0098/1536] String concat code blocks were not equivalent. If the array is empty, the "bad" code will return `
    ` and the "good" code will return `
    `. Although I would prefer this over the for loop: function inbox(messages) { items = messages.map(function(message) { return '
  • ' + message.message + '
    • '; }); return '
      ' + items.join('') + '
    '; --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0e80fd9bce..209f1a1ed7 100644 --- a/README.md +++ b/README.md @@ -250,10 +250,10 @@ items = []; for (i = 0; i < length; i++) { - items[i] = messages[i].message; + items[i] = '
  • ' + messages[i].message + '
    • '; } - return '
    • ' + items.join('
    • ') + '
    '; + return '
      ' + items.join('') + '
    '; } ``` From 716a9658af323775f1d6a73512e28cc0f7eeda1b Mon Sep 17 00:00:00 2001 From: marcel-me Date: Fri, 27 Mar 2015 22:02:39 +0100 Subject: [PATCH 0099/1536] Add Eloquent JavaScript to books --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 209f1a1ed7..516f0e2862 100644 --- a/README.md +++ b/README.md @@ -1577,6 +1577,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 b91deedf22ebfe7573be80cf0d489e53e335a284 Mon Sep 17 00:00:00 2001 From: Christoph Jasinski Date: Mon, 30 Mar 2015 00:41:28 +0200 Subject: [PATCH 0100/1536] Add You Don't Know JS to books --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 516f0e2862..c1b63acbe4 100644 --- a/README.md +++ b/README.md @@ -1578,6 +1578,7 @@ - [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 + - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) - Kyle Simpson **Blogs** From 520b6d658f3f0f1fb23438bd3181361fac5dc7cc Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 30 Mar 2015 13:07:29 -0700 Subject: [PATCH 0101/1536] [resources] add link to standard style by @feross --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c1b63acbe4..bcbe6489c3 100644 --- a/README.md +++ b/README.md @@ -1545,6 +1545,7 @@ - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/) + - [JavaScript Standard Style](https://github.com/feross/standard) **Other Styles** From dbbdec3f290e7b246a7e7054baa39858ca53b532 Mon Sep 17 00:00:00 2001 From: Rob Loach Date: Wed, 1 Apr 2015 17:39:32 -0400 Subject: [PATCH 0102/1536] feat(eslint): Add ESLint linting support --- linters/eslintrc | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 linters/eslintrc diff --git a/linters/eslintrc b/linters/eslintrc new file mode 100644 index 0000000000..4dcf426715 --- /dev/null +++ b/linters/eslintrc @@ -0,0 +1,44 @@ +env: + browser: true + node: true + amd: true + jquery: true + +rules: + no-new-object: 2 + no-reserved-keys: 2 + no-array-constructor: 2 + quotes: [2, "single"] + indent: [2, 2] + no-multi-str: 2 + no-multi-spaces: 2 + no-shadow-restricted-names: 2 + dot-notation: 2 + block-scoped-var: 2 + vars-on-top: 2 + no-unused-vars: 2 + eqeqeq: 2 + use-isnan: 2 + no-eq-null: 2 + brace-style: 2 + spaced-line-comment: 2 + valid-jsdoc: 2 + space-infix-ops: 2 + eol-last: 2 + padded-blocks: [2, "never"] + space-before-blocks: 2 + comma-dangle: [2, "never"] + comma-style: 2 + semi: [2, always] + semi-spacing: 2 + no-extra-boolean-cast: 2 + space-before-function-paren: [2, "never"] + no-spaced-func: 2 + no-wrap-func: 2 + camelcase: 2 + new-cap: 2 + consistent-this: [1, "_this"] + func-names: 2 + key-spacing: 2 + no-dupe-keys: 2 + strict: 2 From 2e51880f1046ce7673167f34b02afe7c7e17bb51 Mon Sep 17 00:00:00 2001 From: Tomek Wiszniewski Date: Thu, 2 Apr 2015 04:10:21 +0200 Subject: [PATCH 0103/1536] Specify whitespace rules for parentheses Based on existing examples and . --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index bcbe6489c3..c395491c8e 100644 --- a/README.md +++ b/README.md @@ -803,6 +803,30 @@ }); ``` + - 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 + if(isJedi) { + fight (); + } + + // good + if (isJedi) { + fight(); + } + + // bad + function fight () { + console.log ('Swooosh!'); + } + + // good + function fight() { + console.log('Swooosh!'); + } + ``` + - Set off operators with spaces. ```javascript From 369fdb8f562f57e3a5c64ad3d628f9e24cdd39b0 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 2 Apr 2015 09:12:33 -0700 Subject: [PATCH 0104/1536] [whitespace] add dots for whitespace examples --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c395491c8e..99d78beb82 100644 --- a/README.md +++ b/README.md @@ -786,7 +786,7 @@ } // good - function test() { + function test()∙{ console.log('test'); } @@ -797,7 +797,7 @@ }); // good - dog.set('attr', { + dog.set('attr',∙{ age: '1 year', breed: 'Bernese Mountain Dog' }); @@ -808,7 +808,7 @@ ```javascript // bad if(isJedi) { - fight (); + fight∙(); } // good @@ -817,7 +817,7 @@ } // bad - function fight () { + function fight∙() { console.log ('Swooosh!'); } @@ -834,7 +834,7 @@ var x=y+5; // good - var x = y + 5; + var x∙=∙y∙+∙5; ``` - End files with a single newline character. From 615dc76f632dad35ccb08809b825485d96b88b4e Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Thu, 2 Apr 2015 09:13:38 -0700 Subject: [PATCH 0105/1536] [whitespace] remove dots, they look bad --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 99d78beb82..c395491c8e 100644 --- a/README.md +++ b/README.md @@ -786,7 +786,7 @@ } // good - function test()∙{ + function test() { console.log('test'); } @@ -797,7 +797,7 @@ }); // good - dog.set('attr',∙{ + dog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog' }); @@ -808,7 +808,7 @@ ```javascript // bad if(isJedi) { - fight∙(); + fight (); } // good @@ -817,7 +817,7 @@ } // bad - function fight∙() { + function fight () { console.log ('Swooosh!'); } @@ -834,7 +834,7 @@ var x=y+5; // good - var x∙=∙y∙+∙5; + var x = y + 5; ``` - End files with a single newline character. From 3058e38d0157db360d4b513342455213e2642fe3 Mon Sep 17 00:00:00 2001 From: Rob Loach Date: Thu, 2 Apr 2015 12:36:42 -0400 Subject: [PATCH 0106/1536] fix(eslint): Remove amd and jquery from env --- linters/eslintrc | 2 -- 1 file changed, 2 deletions(-) diff --git a/linters/eslintrc b/linters/eslintrc index 4dcf426715..e90a6a11b6 100644 --- a/linters/eslintrc +++ b/linters/eslintrc @@ -1,8 +1,6 @@ env: browser: true node: true - amd: true - jquery: true rules: no-new-object: 2 From 2bccaf62031d25b97aa71dac62607526fdc22b6f Mon Sep 17 00:00:00 2001 From: Justin Gardner Date: Thu, 2 Apr 2015 20:40:40 +0100 Subject: [PATCH 0107/1536] Added Adult Swim to In the Wild section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 516f0e2862..485b03ab7a 100644 --- a/README.md +++ b/README.md @@ -1605,6 +1605,7 @@ This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) + - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript) - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) From 4b012cddf32e396753bd9dddd7ad6306ba7a913c Mon Sep 17 00:00:00 2001 From: Marcio Oliveira Date: Fri, 3 Apr 2015 19:51:16 -0300 Subject: [PATCH 0108/1536] Rephrasing Array#push style guide --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e91903d1f8..5cd3f44c13 100644 --- a/README.md +++ b/README.md @@ -135,7 +135,7 @@ var items = []; ``` - - If you don't know array length use Array#push. + - Use Array#push instead of direct assignment to add items to an array. ```javascript var someStack = []; From ebe8cb253dce09535f8a45e47d1ec5be75129f27 Mon Sep 17 00:00:00 2001 From: Roman Date: Sat, 4 Apr 2015 11:47:48 +0300 Subject: [PATCH 0109/1536] Fix a typo in selector --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e91903d1f8..1efa341848 100644 --- a/README.md +++ b/README.md @@ -870,7 +870,7 @@ // bad $('#items'). - find('selected'). + find('.selected'). highlight(). end(). find('.open'). From 6cda67e2f54556f8b42f08be27bd8fbc92936a94 Mon Sep 17 00:00:00 2001 From: Sunshine Yin Date: Sun, 5 Apr 2015 12:57:01 -0700 Subject: [PATCH 0110/1536] Fix minor punctuation errors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (1) BEFORE: Never name a parameter `arguments`, this will take precedence over the `arguments` object. AFTER: Never name a parameter `arguments`. This will take precedence over the `arguments` object. (2) BEFORE: Variable declarations get hoisted to the top of their scope, their assignment does not. AFTER: Variable declarations get hoisted to the top of their scope, but their assignment does not. (3) BEFORE: for multiline comments AFTER: for multi-line comments (4)BEFORE: It’s okay to write a custom toString() method, just make sure AFTER: It's okay to write a custom toString() method. Just make sure --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bcbe6489c3..2bb2ea8885 100644 --- a/README.md +++ b/README.md @@ -301,7 +301,7 @@ } ``` - - Never name a parameter `arguments`, this will take precedence over the `arguments` object that is given to every function scope. + - Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. ```javascript // bad @@ -475,7 +475,7 @@ ## Hoisting - - Variable declarations get hoisted to the top of their scope, their assignment does not. + - Variable declarations get hoisted to the top of their scope, but their assignment does not. ```javascript // we know this wouldn't work (assuming there @@ -665,7 +665,7 @@ ## Comments - - Use `/** ... */` for multiline comments. Include a description, specify types and values for all parameters and return values. + - Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. ```javascript // bad From 999a9f3dc5e97e816747f39de6668d1075bd7b75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Ho=C5=99ava?= Date: Sun, 5 Apr 2015 14:51:18 -0700 Subject: [PATCH 0111/1536] Alphabetized Translation links --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e91903d1f8..dcb4d3c582 100644 --- a/README.md +++ b/README.md @@ -1681,18 +1681,18 @@ This style guide is also available in other languages: - - ![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) - - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) + - ![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) - - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/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) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - - ![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) + - ![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) + - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) + - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) ## The JavaScript Style Guide Guide From 87ea8909d851f1a56b6cb7173b73a15f4b2a5d5b Mon Sep 17 00:00:00 2001 From: Rob Loach Date: Sun, 5 Apr 2015 23:04:13 -0400 Subject: [PATCH 0112/1536] fix(one-var): Add one-var setting from @nkbt --- linters/eslintrc | 1 + 1 file changed, 1 insertion(+) diff --git a/linters/eslintrc b/linters/eslintrc index e90a6a11b6..fa9296ac90 100644 --- a/linters/eslintrc +++ b/linters/eslintrc @@ -33,6 +33,7 @@ rules: space-before-function-paren: [2, "never"] no-spaced-func: 2 no-wrap-func: 2 + one-var: [2, "never"] camelcase: 2 new-cap: 2 consistent-this: [1, "_this"] From 540365c4cc68323abb401bcb0e7f55ceb5113d1f Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Mon, 6 Apr 2015 18:00:36 -0700 Subject: [PATCH 0113/1536] [whitespace] class => classed. fixes #294 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6d2a6492c4..fd5f4ffdaf 100644 --- a/README.md +++ b/README.md @@ -885,7 +885,7 @@ .updateCount(); // bad - var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) + var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); @@ -894,7 +894,7 @@ var leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') - .class('led', true) + .classed('led', true) .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') From 67dda213b81c8330f337635a11d85eacf03a3afb Mon Sep 17 00:00:00 2001 From: Varayut Lerdkanlayanawat Date: Thu, 16 Apr 2015 10:12:06 +0700 Subject: [PATCH 0114/1536] Add Thai language version --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c41b1ecb84..befcf4ef5b 100644 --- a/README.md +++ b/README.md @@ -1693,6 +1693,7 @@ - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) + - ![th](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Thailand.png) **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide) ## The JavaScript Style Guide Guide From 64013fb578c2600ed4d3c22e9d1296dbe8ed5db9 Mon Sep 17 00:00:00 2001 From: nagits Date: Fri, 17 Apr 2015 18:28:05 +0500 Subject: [PATCH 0115/1536] Add Flexberry to the organizations list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index befcf4ef5b..78c1142e2b 100644 --- a/README.md +++ b/README.md @@ -1641,6 +1641,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) + - **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) - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) From 5fe373c646b39b6efb42b153cfdd2d183186bead Mon Sep 17 00:00:00 2001 From: robertmargelli Date: Fri, 17 Apr 2015 15:13:59 -0700 Subject: [PATCH 0116/1536] Added italian translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 78c1142e2b..826f4dffd2 100644 --- a/README.md +++ b/README.md @@ -1689,6 +1689,7 @@ - ![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) - ![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) - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) From b694fedccdcfa1c2c1761957de44fc43d1e9d175 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sat, 18 Apr 2015 17:58:26 -0700 Subject: [PATCH 0117/1536] [linters] update .eslintrc --- linters/.eslintrc | 168 ++++++++++++++++++++++++++++++++++++++++++++++ linters/eslintrc | 43 ------------ 2 files changed, 168 insertions(+), 43 deletions(-) create mode 100644 linters/.eslintrc delete mode 100644 linters/eslintrc diff --git a/linters/.eslintrc b/linters/.eslintrc new file mode 100644 index 0000000000..c491f2009e --- /dev/null +++ b/linters/.eslintrc @@ -0,0 +1,168 @@ +{ + "parser": "babel-eslint", + "env": { + "browser": true, + "node": true + }, + "ecmaFeatures": { + "arrowFunctions": true, + "blockBindings": true, + "classes": true, + "defaultParams": true, + "destructuring": true, + "forOf": true, + "generators": false, + "modules": true, + "objectLiteralComputedProperties": true, + "objectLiteralDuplicateProperties": false, + "objectLiteralShorthandMethods": true, + "objectLiteralShorthandProperties": true, + "spread": true, + "superInFunctions": true, + "templateStrings": true, + "jsx": true + }, + "rules": { +/** + * Strict mode + */ + // babel inserts "use strict"; for us + // http://eslint.org/docs/rules/strict + "strict": [2, "never"], + +/** + * ES6 + */ + "no-var": 2, // http://eslint.org/docs/rules/no-var + +/** + * Variables + */ + "no-shadow": 2, // http://eslint.org/docs/rules/no-shadow + "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names + "no-unused-vars": [2, { // http://eslint.org/docs/rules/no-unused-vars + "vars": "local", + "args": "after-used" + }], + "no-use-before-define": 2, // http://eslint.org/docs/rules/no-use-before-define + +/** + * 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-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 + "no-constant-condition": 1, // http://eslint.org/docs/rules/no-constant-condition + "no-dupe-keys": 2, // http://eslint.org/docs/rules/no-dupe-keys + "no-duplicate-case": 2, // http://eslint.org/docs/rules/no-duplicate-case + "no-empty": 2, // http://eslint.org/docs/rules/no-empty + "no-ex-assign": 2, // http://eslint.org/docs/rules/no-ex-assign + "no-extra-boolean-cast": 0, // http://eslint.org/docs/rules/no-extra-boolean-cast + "no-extra-semi": 2, // http://eslint.org/docs/rules/no-extra-semi + "no-func-assign": 2, // http://eslint.org/docs/rules/no-func-assign + "no-inner-declarations": 2, // http://eslint.org/docs/rules/no-inner-declarations + "no-invalid-regexp": 2, // http://eslint.org/docs/rules/no-invalid-regexp + "no-irregular-whitespace": 2, // http://eslint.org/docs/rules/no-irregular-whitespace + "no-obj-calls": 2, // http://eslint.org/docs/rules/no-obj-calls + "no-reserved-keys": 2, // http://eslint.org/docs/rules/no-reserved-keys + "no-sparse-arrays": 2, // http://eslint.org/docs/rules/no-sparse-arrays + "no-unreachable": 2, // http://eslint.org/docs/rules/no-unreachable + "use-isnan": 2, // http://eslint.org/docs/rules/use-isnan + "block-scoped-var": 2, // http://eslint.org/docs/rules/block-scoped-var + +/** + * Best practices + */ + "consistent-return": 2, // http://eslint.org/docs/rules/consistent-return + "curly": [2, "multi-line"], // http://eslint.org/docs/rules/curly + "default-case": 2, // http://eslint.org/docs/rules/default-case + "dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation + "allowKeywords": false + }], + "eqeqeq": 2, // http://eslint.org/docs/rules/eqeqeq + "guard-for-in": 2, // http://eslint.org/docs/rules/guard-for-in + "no-caller": 2, // http://eslint.org/docs/rules/no-caller + "no-else-return": 2, // http://eslint.org/docs/rules/no-else-return + "no-eq-null": 2, // http://eslint.org/docs/rules/no-eq-null + "no-eval": 2, // http://eslint.org/docs/rules/no-eval + "no-extend-native": 2, // http://eslint.org/docs/rules/no-extend-native + "no-extra-bind": 2, // http://eslint.org/docs/rules/no-extra-bind + "no-fallthrough": 2, // http://eslint.org/docs/rules/no-fallthrough + "no-floating-decimal": 2, // http://eslint.org/docs/rules/no-floating-decimal + "no-implied-eval": 2, // http://eslint.org/docs/rules/no-implied-eval + "no-lone-blocks": 2, // http://eslint.org/docs/rules/no-lone-blocks + "no-loop-func": 2, // http://eslint.org/docs/rules/no-loop-func + "no-multi-str": 2, // http://eslint.org/docs/rules/no-multi-str + "no-native-reassign": 2, // http://eslint.org/docs/rules/no-native-reassign + "no-new": 2, // http://eslint.org/docs/rules/no-new + "no-new-func": 2, // http://eslint.org/docs/rules/no-new-func + "no-new-wrappers": 2, // http://eslint.org/docs/rules/no-new-wrappers + "no-octal": 2, // http://eslint.org/docs/rules/no-octal + "no-octal-escape": 2, // http://eslint.org/docs/rules/no-octal-escape + "no-param-reassign": 2, // http://eslint.org/docs/rules/no-param-reassign + "no-proto": 2, // http://eslint.org/docs/rules/no-proto + "no-redeclare": 2, // http://eslint.org/docs/rules/no-redeclare + "no-return-assign": 2, // http://eslint.org/docs/rules/no-return-assign + "no-script-url": 2, // http://eslint.org/docs/rules/no-script-url + "no-self-compare": 2, // http://eslint.org/docs/rules/no-self-compare + "no-sequences": 2, // http://eslint.org/docs/rules/no-sequences + "no-throw-literal": 2, // http://eslint.org/docs/rules/no-throw-literal + "no-with": 2, // http://eslint.org/docs/rules/no-with + "radix": 2, // http://eslint.org/docs/rules/radix + "vars-on-top": 2, // http://eslint.org/docs/rules/vars-on-top + "wrap-iife": [2, "any"], // http://eslint.org/docs/rules/wrap-iife + "yoda": 2, // http://eslint.org/docs/rules/yoda + +/** + * Style + */ + "indent": [2, 2], // http://eslint.org/docs/rules/ + "brace-style": [2, // http://eslint.org/docs/rules/brace-style + "1tbs", { + "allowSingleLine": true + }], + "quotes": [ + 2, "single", "avoid-escape" // http://eslint.org/docs/rules/quotes + ], + "camelcase": [2, { // http://eslint.org/docs/rules/camelcase + "properties": "never" + }], + "comma-spacing": [2, { // http://eslint.org/docs/rules/comma-spacing + "before": false, + "after": true + }], + "comma-style": [2, "last"], // http://eslint.org/docs/rules/comma-style + "eol-last": 2, // http://eslint.org/docs/rules/eol-last + "func-names": 1, // http://eslint.org/docs/rules/func-names + "key-spacing": [2, { // http://eslint.org/docs/rules/key-spacing + "beforeColon": false, + "afterColon": true + }], + "new-cap": [2, { // http://eslint.org/docs/rules/new-cap + "newIsCap": true + }], + "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines + "max": 2 + }], + "no-nested-ternary": 2, // http://eslint.org/docs/rules/no-nested-ternary + "no-new-object": 2, // http://eslint.org/docs/rules/no-new-object + "no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func + "no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces + "no-wrap-func": 2, // http://eslint.org/docs/rules/no-wrap-func + "one-var": [2, "never"], // http://eslint.org/docs/rules/one-var + "padded-blocks": [2, "never"], // http://eslint.org/docs/rules/padded-blocks + "semi": [2, "always"], // http://eslint.org/docs/rules/semi + "semi-spacing": [2, { // http://eslint.org/docs/rules/semi-spacing + "before": false, + "after": true + }], + "space-after-keywords": 2, // http://eslint.org/docs/rules/space-after-keywords + "space-before-blocks": 2, // http://eslint.org/docs/rules/space-before-blocks + "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 + } +} diff --git a/linters/eslintrc b/linters/eslintrc deleted file mode 100644 index fa9296ac90..0000000000 --- a/linters/eslintrc +++ /dev/null @@ -1,43 +0,0 @@ -env: - browser: true - node: true - -rules: - no-new-object: 2 - no-reserved-keys: 2 - no-array-constructor: 2 - quotes: [2, "single"] - indent: [2, 2] - no-multi-str: 2 - no-multi-spaces: 2 - no-shadow-restricted-names: 2 - dot-notation: 2 - block-scoped-var: 2 - vars-on-top: 2 - no-unused-vars: 2 - eqeqeq: 2 - use-isnan: 2 - no-eq-null: 2 - brace-style: 2 - spaced-line-comment: 2 - valid-jsdoc: 2 - space-infix-ops: 2 - eol-last: 2 - padded-blocks: [2, "never"] - space-before-blocks: 2 - comma-dangle: [2, "never"] - comma-style: 2 - semi: [2, always] - semi-spacing: 2 - no-extra-boolean-cast: 2 - space-before-function-paren: [2, "never"] - no-spaced-func: 2 - no-wrap-func: 2 - one-var: [2, "never"] - camelcase: 2 - new-cap: 2 - consistent-this: [1, "_this"] - func-names: 2 - key-spacing: 2 - no-dupe-keys: 2 - strict: 2 From 91d56b6874b55dd545cdb668f1c3b3b1a9f446d9 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 19 Apr 2015 15:34:51 -0700 Subject: [PATCH 0118/1536] [eslint] fix whitespace, silence underscore dangle --- linters/.eslintrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/linters/.eslintrc b/linters/.eslintrc index c491f2009e..357f9d9b75 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -50,7 +50,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 @@ -151,6 +151,7 @@ "no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func "no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces "no-wrap-func": 2, // http://eslint.org/docs/rules/no-wrap-func + "no-underscore-dangle": 0, // http://eslint.org/docs/rules/no-underscore-dangle "one-var": [2, "never"], // http://eslint.org/docs/rules/one-var "padded-blocks": [2, "never"], // http://eslint.org/docs/rules/padded-blocks "semi": [2, "always"], // http://eslint.org/docs/rules/semi From 7fe4883a7571e0e64abda1937bd807f6c5a2a0d2 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 19 Apr 2015 15:42:15 -0700 Subject: [PATCH 0119/1536] [variables] fix variable hoisting example. fixes #265 --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 826f4dffd2..5a60d84f14 100644 --- a/README.md +++ b/README.md @@ -447,7 +447,7 @@ return name; } - // bad + // bad - unnessary function call function() { var name = getName(); @@ -455,16 +455,21 @@ return false; } + this.setFirstName(name); + return true; } // good function() { + var name; + if (!arguments.length) { return false; } - var name = getName(); + name = getName(); + this.setFirstName(name); return true; } From 17dde0d59338ce6550cbbb0019b27e6de428e4c1 Mon Sep 17 00:00:00 2001 From: Jensen Date: Mon, 20 Apr 2015 16:17:48 -0700 Subject: [PATCH 0120/1536] Remove excess whitespace in Whitespace section --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5a60d84f14..3679b4a98e 100644 --- a/README.md +++ b/README.md @@ -891,7 +891,7 @@ // bad var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) - .attr('width', (radius + margin) * 2).append('svg:g') + .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); @@ -900,7 +900,7 @@ .data(data) .enter().append('svg:svg') .classed('led', true) - .attr('width', (radius + margin) * 2) + .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); From a1b53a1d857936ce7a7a0602da4bb15b3e8f9eac Mon Sep 17 00:00:00 2001 From: Maxim Date: Thu, 23 Apr 2015 15:25:49 +0300 Subject: [PATCH 0121/1536] Added new organization. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3679b4a98e..ee4ca8f8ee 100644 --- a/README.md +++ b/README.md @@ -1655,6 +1655,7 @@ - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) + - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) From 15c947b48bcb3ef2fee1655cd99e22f0395f2e1f Mon Sep 17 00:00:00 2001 From: Nikita Gusakov Date: Sat, 25 Apr 2015 18:24:58 +0300 Subject: [PATCH 0122/1536] Allow dot-notation keywords in eslint ES6 gives us promises, which have `.catch` method. Other Promise implementation also uses `try` and `finally` methods, which are also reserved keywords ([bluebird](https://github.com/petkaantonov/bluebird/blob/master/API.md)). --- linters/.eslintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/linters/.eslintrc b/linters/.eslintrc index 357f9d9b75..32eecff357 100644 --- a/linters/.eslintrc +++ b/linters/.eslintrc @@ -79,7 +79,7 @@ "curly": [2, "multi-line"], // http://eslint.org/docs/rules/curly "default-case": 2, // http://eslint.org/docs/rules/default-case "dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation - "allowKeywords": false + "allowKeywords": true }], "eqeqeq": 2, // http://eslint.org/docs/rules/eqeqeq "guard-for-in": 2, // http://eslint.org/docs/rules/guard-for-in From 1282ee63df09442602588af5cedce850533b217a Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Mon, 27 Apr 2015 16:39:57 -0700 Subject: [PATCH 0123/1536] Add comment on why we're breaking a rule --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ee4ca8f8ee..834db2004c 100644 --- a/README.md +++ b/README.md @@ -250,6 +250,7 @@ items = []; for (i = 0; i < length; i++) { + // use direct assignment in this case because we're micro-optimizing. items[i] = '
  • ' + messages[i].message + '
    • '; } From a6e906a1b96067dd259f5b7a490692bfb521ab25 Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 23 Apr 2015 09:10:29 -0400 Subject: [PATCH 0124/1536] Clarifying what rule is being enforced. Capitalization of constructors is not the rule in question here. It makes it more clear what the offending difference is between `//bad` and `//good` to have consistent constructor capitalization. --- README.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/README.md b/README.md index 3679b4a98e..f700a69971 100644 --- a/README.md +++ b/README.md @@ -1147,17 +1147,12 @@ // bad var OBJEcttsssss = {}; var this_is_my_object = {}; + var o = {}; function c() {} - var u = new user({ - name: 'Bob Parr' - }); // good var thisIsMyObject = {}; function thisIsMyFunction() {} - var user = new User({ - name: 'Bob Parr' - }); ``` - Use PascalCase when naming constructors or classes. From 58cdc731f435db78f3c1f4d466284796128fb75b Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Thu, 2 Apr 2015 08:43:50 -0700 Subject: [PATCH 0125/1536] Initial ES6 style guide --- README.md | 1085 +++++++++++++++++++++---------- es5/README.md | 1712 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 2445 insertions(+), 352 deletions(-) create mode 100644 es5/README.md diff --git a/README.md b/README.md index 02ecc75ee6..c6b552c885 100644 --- a/README.md +++ b/README.md @@ -4,14 +4,21 @@ *A mostly reasonable approach to JavaScript* +[For our old ES5-only guide click here](es5/). ## Table of Contents 1. [Types](#types) + 1. [References](#references) 1. [Objects](#objects) 1. [Arrays](#arrays) + 1. [Destructuring](#destructuring) 1. [Strings](#strings) 1. [Functions](#functions) + 1. [Arrow Functions](#arrow-functions) + 1. [Constructors](#constructors) + 1. [Modules](#modules) + 1. [Iterators and Generators](#iterators-and-generators) 1. [Properties](#properties) 1. [Variables](#variables) 1. [Hoisting](#hoisting) @@ -24,11 +31,11 @@ 1. [Type Casting & Coercion](#type-casting--coercion) 1. [Naming Conventions](#naming-conventions) 1. [Accessors](#accessors) - 1. [Constructors](#constructors) 1. [Events](#events) 1. [Modules](#modules) 1. [jQuery](#jquery) 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) + 1. [ECMAScript 6 Styles](#ecmascript-6-styles) 1. [Testing](#testing) 1. [Performance](#performance) 1. [Resources](#resources) @@ -50,8 +57,8 @@ + `undefined` ```javascript - var foo = 1; - var bar = foo; + const foo = 1; + let bar = foo; bar = 9; @@ -64,8 +71,8 @@ + `function` ```javascript - var foo = [1, 2]; - var bar = foo; + const foo = [1, 2]; + const bar = foo; bar[0] = 9; @@ -74,29 +81,77 @@ **[⬆ back to top](#table-of-contents)** +## References + + - 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. + + ```javascript + // bad + var a = 1; + var b = 2; + + // good + const a = 1; + const b = 2; + ``` + + - If you must mutate references, use `let` instead of `var`. + + > Why? `let` is block-scoped rather than function-scoped like `var`. + + ```javascript + // bad + var count = 1; + if (true) { + count += 1; + } + + // good, use the let. + let count = 1; + if (true) { + count += 1; + } + ``` + + - Note that both `let` and `const` are block-scoped. + + ```javascript + // const and let only exist in the blocks they are defined in. + { + let a = 1; + const b = 1; + } + console.log(a); // ReferenceError + console.log(b); // ReferenceError + ``` + +**[⬆ back to top](#table-of-contents)** + ## Objects - Use the literal syntax for object creation. ```javascript // bad - var item = new Object(); + const item = new Object(); // good - var item = {}; + 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). ```javascript // bad - var superman = { + const superman = { default: { clark: 'kent' }, private: true }; // good - var superman = { + const superman = { defaults: { clark: 'kent' }, hidden: true }; @@ -106,21 +161,118 @@ ```javascript // bad - var superman = { + const superman = { class: 'alien' }; // bad - var superman = { + const superman = { klass: 'alien' }; // good - var superman = { + const superman = { type: 'alien' }; ``` + + - 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. + + ```javascript + + function getKey(k) { + return `a key named ${k}`; + } + + // bad + const obj = { + id: 5, + name: 'San Francisco' + }; + obj[getKey('enabled')] = true; + + // good + const obj = { + id: 5, + name: 'San Francisco', + [getKey('enabled')]: true, + }; + ``` + + + - Use object method shorthand. + + ```javascript + // bad + const atom = { + value: 1, + + addValue: function (value) { + return atom.value + value; + }, + }; + + // good + const atom = { + value: 1, + + addValue(value) { + return atom.value + value; + }, + }; + ``` + + + - Use property value shorthand. + + > Why? It is shorter to write and descriptive. + + ```javascript + const lukeSkywalker = 'Luke Skywalker'; + + // bad + const obj = { + lukeSkywalker: lukeSkywalker + }; + + // good + const obj = { + lukeSkywalker + }; + ``` + + - Group your shorthand properties at the beginning of your object declaration. + + > Why? It's easier to tell which properties are using the shorthand. + + ```javascript + const anakinSkywalker = 'Anakin Skywalker'; + const lukeSkywalker = 'Luke Skywalker'; + + // bad + const obj = { + episodeOne: 1, + twoJedisWalkIntoACantina: 2, + lukeSkywalker, + episodeThree: 3, + mayTheFourth: 4, + anakinSkywalker + }; + + // good + const obj = { + lukeSkywalker, + anakinSkywalker, + episodeOne: 1, + twoJedisWalkIntoACantina: 2, + episodeThree: 3, + mayTheFourth: 4 + }; + ``` + **[⬆ back to top](#table-of-contents)** ## Arrays @@ -129,16 +281,16 @@ ```javascript // bad - var items = new Array(); + const items = new Array(); // good - var items = []; + const items = []; ``` - Use Array#push instead of direct assignment to add items to an array. ```javascript - var someStack = []; + const someStack = []; // bad @@ -148,33 +300,96 @@ someStack.push('abracadabra'); ``` - - When you need to copy an array use Array#slice. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7) + + - Use array spreads `...` to copy arrays. ```javascript - var len = items.length; - var itemsCopy = []; - var i; - // bad + const len = items.length; + const itemsCopy = []; + let i; + for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good - itemsCopy = items.slice(); + const itemsCopy = [...items]; + ``` + - To convert an array-like object to an array, use Array#from. + + ```javascript + const foo = document.querySelectorAll('.foo'); + const nodes = Array.from(foo); ``` - - To convert an array-like object to an array, use Array#slice. +**[⬆ back to top](#table-of-contents)** + +## Destructuring + + - Use object destructuring when accessing and using multiple properties of an object. + + > Why? Destructuring saves you from creating temporary references for those properties. ```javascript - function trigger() { - var args = Array.prototype.slice.call(arguments); - ... + // bad + function getFullName(user) { + const firstName = user.firstName; + const lastName = user.lastName; + + return `${firstName} ${lastName}`; + } + + // good + function getFullName(obj) { + const { firstName, lastName } = obj; + return `${firstName} ${lastName}`; + } + + // best + function getFullName({ firstName, lastName }) { + return `${firstName} ${lastName}`; } ``` -**[⬆ back to top](#table-of-contents)** + - Use array destructuring. + + ```javascript + const arr = [1, 2, 3, 4]; + + // bad + const first = arr[0]; + const second = arr[1]; + + // good + const [first, second] = arr; + ``` + - 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. + + ```javascript + function processInput(input) { + // then a miracle occurs + return [left, right, top, bottom]; + } + + // the caller needs to think about the order of return data + const [left, __, top] = processInput(input); + + // good + function processInput(input) { + // then a miracle occurs + return { left, right, top, bottom }; + } + + // the caller selects only the data they need + const { left, right } = processInput(input); + ``` + + +**[⬆ back to top](#table-of-contents)** ## Strings @@ -182,16 +397,16 @@ ```javascript // bad - var name = "Bob Parr"; + const name = "Bob Parr"; // good - var name = 'Bob Parr'; + const name = 'Bob Parr'; // bad - var fullName = "Bob " + this.lastName; + const fullName = "Bob " + this.lastName; // good - var fullName = 'Bob ' + this.lastName; + const fullName = 'Bob ' + this.lastName; ``` - Strings longer than 80 characters should be written across multiple lines using string concatenation. @@ -199,62 +414,39 @@ ```javascript // bad - var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; + const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; // bad - var errorMessage = 'This is a super long error that was thrown because \ + const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.'; // good - var errorMessage = 'This is a super long error that was thrown because ' + + const errorMessage = 'This is a super long error that was thrown because ' + 'of Batman. When you stop to think about how Batman had anything to do ' + 'with this, you would get nowhere fast.'; ``` - - When programmatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). - - ```javascript - var items; - var messages; - var length; - var i; - - messages = [{ - state: 'success', - message: 'This one worked.' - }, { - state: 'success', - message: 'This one worked as well.' - }, { - state: 'error', - message: 'This one did not work.' - }]; + + - When programmatically building up strings, use template strings instead of concatenation. - length = messages.length; + > Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features. + ```javascript // bad - function inbox(messages) { - items = '
      '; - - for (i = 0; i < length; i++) { - items += '
    • ' + messages[i].message + '
      • '; - } + function sayHi(name) { + return 'How are you, ' + name + '?'; + } - return items + '
    '; + // bad + function sayHi(name) { + return ['How are you, ', name, '?'].join(); } // good - function inbox(messages) { - items = []; - - for (i = 0; i < length; i++) { - // use direct assignment in this case because we're micro-optimizing. - items[i] = '
  • ' + messages[i].message + '
    • '; - } - - return '
      ' + items.join('') + '
    '; + function sayHi(name) { + return `How are you, ${name}?`; } ``` @@ -263,21 +455,25 @@ ## Functions - - Function expressions: + - 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. ```javascript - // anonymous function expression - var anonymous = function() { - return true; + // bad + const foo = function () { }; - // named function expression - var named = function named() { - return true; - }; + // good + function foo() { + } + ``` + - Function expressions: + + ```javascript // immediately-invoked function expression (IIFE) - (function() { + (() => { console.log('Welcome to the Internet. Please follow me.'); })(); ``` @@ -294,9 +490,9 @@ } // good - var test; + let test; if (currentUser) { - test = function test() { + test = () => { console.log('Yup.'); }; } @@ -316,31 +512,320 @@ } ``` + + - 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`. + + ```javascript + // bad + function concatenateAll() { + const args = Array.prototype.slice.call(arguments); + return args.join(''); + } + + // good + function concatenateAll(...args) { + return args.join(''); + } + ``` + + + - Use default parameter syntax rather than mutating function arguments. + + ```javascript + // really bad + function handleThings(opts) { + // No! We shouldn't mutate function arguments. + // Double bad: if opts is falsy it'll be set to an object which may + // be what you want but it can introduce subtle bugs. + opts = opts || {}; + // ... + } + + // still bad + function handleThings(opts) { + if (opts === void 0) { + opts = {}; + } + // ... + } + + // good + function handleThings(opts = {}) { + // ... + } + ``` + +**[⬆ back to top](#table-of-contents)** + +## Arrow Functions + + - 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. + + > Why not? If you have a fairly complicated function, you might move that logic out into its own function declaration. + + ```javascript + // bad + [1, 2, 3].map(function (x) { + return x * x; + }); + + // good + [1, 2, 3].map((x) => { + return x * x + }); + ``` + + - 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. + + > Why not? If you plan on returning an object. + + ```javascript + // good + [1, 2, 3].map((x) => x * x); + + // good + [1, 2, 3].map((x) => { + return { number: x }; + }); + ``` + + - 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); + ``` + **[⬆ back to top](#table-of-contents)** +## Constructors + + - Always use `class`. Avoid manipulating `prototype` directly. + + > Why? `class` syntax is more concise and easier to reason about. + + ```javascript + // bad + function Queue(contents = []) { + this._queue = [...contents]; + } + Queue.prototype.pop = function() { + const value = this._queue[0]; + this._queue.splice(0, 1); + return value; + } + + + // good + class Queue { + constructor(contents = []) { + this._queue = [...contents]; + } + pop() { + const value = this._queue[0]; + this._queue.splice(0, 1); + return value; + } + } + ``` + + - Use `extends` for inheritance. + + > Why? It is a built-in way to inherit prototype functionality without breaking `instanceof`. + + ```javascript + // bad + const inherits = require('inherits'); + function PeekableQueue(contents) { + Queue.apply(this, contents); + } + inherits(PeekableQueue, Queue); + PeekableQueue.prototype.peek = function() { + return this._queue[0]; + } + + // good + class PeekableQueue extends Queue { + peek() { + return this._queue[0]; + } + } + ``` + + - Methods can return `this` to help with method chaining. + + ```javascript + // bad + Jedi.prototype.jump = function() { + this.jumping = true; + return true; + }; + + Jedi.prototype.setHeight = function(height) { + this.height = height; + }; + + const luke = new Jedi(); + luke.jump(); // => true + luke.setHeight(20); // => undefined + + // good + class Jedi { + jump() { + this.jumping = true; + return this; + } + + setHeight(height) { + this.height = height; + return this; + } + } + + const luke = new Jedi(); + + luke.jump() + .setHeight(20); + ``` + + + - It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. + + ```javascript + class Jedi { + contructor(options = {}) { + this.name = options.name || 'no name'; + } + + getName() { + return this.name; + } + + toString() { + return 'Jedi - ' + this.getName(); + } + } + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Modules + + - 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. + + ```javascript + // bad + const AirbnbStyleGuide = require('./AirbnbStyleGuide'); + module.exports = AirbnbStyleGuide.es6; + + // ok + import AirbnbStyleGuide from './AirbnbStyleGuide'; + export default AirbnbStyleGuide.es6; + + // best + import { es6 } from './AirbnbStyleGuide'; + export default es6; + ``` + + - Do not use wildcard imports. + + > Why? This makes sure you have a single default export. + + ```javascript + // bad + import * as AirbnbStyleGuide from './AirbnbStyleGuide'; + + // good + import AirbnbStyleGuide from './AirbnbStyleGuide'; + ``` + + - 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. + + ```javascript + // bad + // filename es6.js + export default { es6 } from './airbnbStyleGuide'; + + // good + // filename es6.js + import { es6 } from './AirbnbStyleGuide'; + export default es6; + ``` + +**[⬆ back to top](#table-of-contents)** + +## Iterators and Generators + + - Don't use iterators. Prefer JavaScript's function constructors 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. + + ```javascript + const numbers = [1, 2, 3, 4, 5]; + + // bad + let sum = 0; + for (let num of numbers) { + sum += num; + } + + sum === 10; + + // good + let sum = 0; + numbers.forEach((num) => sum += num); + sum === 10; + + // best (use the functional force) + const sum = numbers.reduce((total, num) => total + num, 0); + sum === 10; + ``` + + - Don't use generators. + + > Why? They don't transpile well to ES5. + +**[⬆ back to top](#table-of-contents)** + ## Properties - Use dot notation when accessing properties. ```javascript - var luke = { + const luke = { jedi: true, age: 28 }; // bad - var isJedi = luke['jedi']; + const isJedi = luke['jedi']; // good - var isJedi = luke.jedi; + const isJedi = luke.jedi; ``` - Use subscript notation `[]` when accessing properties with a variable. ```javascript - var luke = { + const luke = { jedi: true, age: 28 }; @@ -349,7 +834,7 @@ return luke[prop]; } - var isJedi = getProp('jedi'); + const isJedi = getProp('jedi'); ``` **[⬆ back to top](#table-of-contents)** @@ -357,90 +842,77 @@ ## Variables - - Always use `var` 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. + - 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 superPower = new SuperPower(); // good - var superPower = new SuperPower(); + const superPower = new SuperPower(); ``` - - Use one `var` declaration per variable. - 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. + - 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. ```javascript // bad - var items = getItems(), + const items = getItems(), goSportsTeam = true, dragonball = 'z'; // bad // (compare to above, and try to spot the mistake) - var items = getItems(), + const items = getItems(), goSportsTeam = true; dragonball = 'z'; // good - var items = getItems(); - var goSportsTeam = true; - var dragonball = 'z'; + const items = getItems(); + const goSportsTeam = true; + const dragonball = 'z'; ``` - - Declare unassigned variables last. This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. + - 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. ```javascript // bad - var i, len, dragonball, + let i, len, dragonball, items = getItems(), goSportsTeam = true; // bad - var i; - var items = getItems(); - var dragonball; - var goSportsTeam = true; - var len; + let i; + let items = getItems(); + let dragonball; + let goSportsTeam = true; + let len; // good - var items = getItems(); - var goSportsTeam = true; - var dragonball; - var length; - var i; + const goSportsTeam = true; + const items = getItems(); + let dragonball; + let i; + let length; ``` - - Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues. + - Assign variables where you need them, but place them in a reasonable place. - ```javascript - // bad - function() { - test(); - console.log('doing stuff..'); - - //..other stuff.. - - var name = getName(); - - if (name === 'test') { - return false; - } - - return name; - } + > Why? `let` and `const` are block scoped and not function scoped. + ```javascript // good function() { - var name = getName(); - test(); console.log('doing stuff..'); //..other stuff.. + const name = getName(); + if (name === 'test') { return false; } @@ -449,10 +921,10 @@ } // bad - unnessary function call - function() { - var name = getName(); + function(hasName) { + const name = getName(); - if (!arguments.length) { + if (!hasName) { return false; } @@ -462,14 +934,12 @@ } // good - function() { - var name; - - if (!arguments.length) { + function(hasName) { + if (!hasName) { return false; } - name = getName(); + const name = getName(); this.setFirstName(name); return true; @@ -481,7 +951,7 @@ ## Hoisting - - Variable declarations get hoisted to the top of their scope, but their assignment does not. + - `var` declarations get hoisted to the top of their scope, but their assignment does not. `const` and `let` declarations suffer from [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). Also see 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 @@ -503,10 +973,17 @@ // declaration to the top of the scope, // which means our example could be rewritten as: function example() { - var declaredButNotAssigned; + let declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; } + + // using const and let + function example() { + console.log(declaredButNotAssigned); // => throws a ReferenceError + console.log(typeof declaredButNotAssigned); // => throws a ReferenceError + const declaredButNotAssigned = true; + } ``` - Anonymous function expressions hoist their variable name, but not the function assignment. @@ -517,7 +994,7 @@ anonymous(); // => TypeError anonymous is not a function - var anonymous = function() { + let anonymous = function() { console.log('anonymous function expression'); }; } @@ -533,7 +1010,7 @@ superPower(); // => ReferenceError superPower is not defined - var named = function superPower() { + let named = function superPower() { console.log('Flying'); }; } @@ -545,7 +1022,7 @@ named(); // => TypeError named is not a function - var named = function named() { + let named = function named() { console.log('named'); } } @@ -568,7 +1045,6 @@ **[⬆ back to top](#table-of-contents)** - ## Comparison Operators & Equality - Use `===` and `!==` over `==` and `!=`. @@ -707,17 +1183,17 @@ ```javascript // bad - var active = true; // is current tab + const active = true; // is current tab // good // is current tab - var active = true; + const active = true; // bad function getType() { console.log('fetching type...'); // set the default type to 'no type' - var type = this._type || 'no type'; + const type = this._type || 'no type'; return type; } @@ -727,7 +1203,7 @@ console.log('fetching type...'); // set the default type to 'no type' - var type = this._type || 'no type'; + const type = this._type || 'no type'; return type; } @@ -769,17 +1245,17 @@ ```javascript // bad function() { - ∙∙∙∙var name; + ∙∙∙∙const name; } // bad function() { - ∙var name; + ∙const name; } // good function() { - ∙∙var name; + ∙∙const name; } ``` @@ -837,10 +1313,10 @@ ```javascript // bad - var x=y+5; + const x=y+5; // good - var x = y + 5; + const x = y + 5; ``` - End files with a single newline character. @@ -891,13 +1367,13 @@ .updateCount(); // bad - var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) + const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); // good - var leds = stage.selectAll('.led') + const leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') .classed('led', true) @@ -924,7 +1400,7 @@ return baz; // bad - var obj = { + const obj = { foo: function() { }, bar: function() { @@ -933,7 +1409,7 @@ return obj; // good - var obj = { + const obj = { foo: function() { }, @@ -953,21 +1429,21 @@ ```javascript // bad - var story = [ + const story = [ once , upon , aTime ]; // good - var story = [ + const story = [ once, upon, aTime ]; // bad - var hero = { + const hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' @@ -975,7 +1451,7 @@ }; // good - var hero = { + const hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', @@ -989,23 +1465,23 @@ ```javascript // bad - var hero = { + const hero = { firstName: 'Kevin', lastName: 'Flynn', }; - var heroes = [ + const heroes = [ 'Batman', 'Superman', ]; // good - var hero = { + const hero = { firstName: 'Kevin', lastName: 'Flynn' }; - var heroes = [ + const heroes = [ 'Batman', 'Superman' ]; @@ -1021,19 +1497,19 @@ ```javascript // bad (function() { - var name = 'Skywalker' + const name = 'Skywalker' return name })() // good - (function() { - var name = 'Skywalker'; + (() => { + const name = 'Skywalker'; return name; })(); // good (guards against the function becoming an argument when two files with IIFEs are concatenated) - ;(function() { - var name = 'Skywalker'; + ;(() => { + const name = 'Skywalker'; return name; })(); ``` @@ -1052,40 +1528,40 @@ // => this.reviewScore = 9; // bad - var totalScore = this.reviewScore + ''; + const totalScore = this.reviewScore + ''; // good - var totalScore = '' + this.reviewScore; + const totalScore = '' + this.reviewScore; // bad - var totalScore = '' + this.reviewScore + ' total score'; + const totalScore = '' + this.reviewScore + ' total score'; // good - var totalScore = this.reviewScore + ' total score'; + const totalScore = this.reviewScore + ' total score'; ``` - Use `parseInt` for Numbers and always with a radix for type casting. ```javascript - var inputValue = '4'; + const inputValue = '4'; // bad - var val = new Number(inputValue); + const val = new Number(inputValue); // bad - var val = +inputValue; + const val = +inputValue; // bad - var val = inputValue >> 0; + const val = inputValue >> 0; // bad - var val = parseInt(inputValue); + const val = parseInt(inputValue); // good - var val = Number(inputValue); + const val = Number(inputValue); // good - var val = parseInt(inputValue, 10); + 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. @@ -1097,7 +1573,7 @@ * Bitshifting the String to coerce it to a * Number made it a lot faster. */ - var val = inputValue >> 0; + 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: @@ -1111,16 +1587,16 @@ - Booleans: ```javascript - var age = 0; + const age = 0; // bad - var hasAge = new Boolean(age); + const hasAge = new Boolean(age); // good - var hasAge = Boolean(age); + const hasAge = Boolean(age); // good - var hasAge = !!age; + const hasAge = !!age; ``` **[⬆ back to top](#table-of-contents)** @@ -1146,13 +1622,12 @@ ```javascript // bad - var OBJEcttsssss = {}; - var this_is_my_object = {}; - var o = {}; + const OBJEcttsssss = {}; + const this_is_my_object = {}; function c() {} // good - var thisIsMyObject = {}; + const thisIsMyObject = {}; function thisIsMyFunction() {} ``` @@ -1164,16 +1639,18 @@ this.name = options.name; } - var bad = new user({ + const bad = new user({ name: 'nope' }); // good - function User(options) { - this.name = options.name; + class User { + constructor(options) { + this.name = options.name; + } } - var good = new User({ + const good = new User({ name: 'yup' }); ``` @@ -1189,50 +1666,33 @@ this._firstName = 'Panda'; ``` - - When saving a reference to `this` use `_this`. + - Don't save references to `this`. Use arrow functions or Function#bind. ```javascript // bad - function() { - var self = this; + function foo() { + const self = this; return function() { console.log(self); }; } // bad - function() { - var that = this; + function foo() { + const that = this; return function() { console.log(that); }; } // good - function() { - var _this = this; - return function() { - console.log(_this); + function foo() { + return () => { + console.log(this); }; } ``` - - Name your functions. This is helpful for stack traces. - - ```javascript - // bad - var log = function(msg) { - console.log(msg); - }; - - // good - var log = function log(msg) { - console.log(msg); - }; - ``` - - - **Note:** IE8 and below exhibit some quirks with named function expressions. See [http://kangax.github.io/nfe/](http://kangax.github.io/nfe/) for more info. - - If your file exports a single class, your filename should be exactly the name of the class. ```javascript // file contents @@ -1243,15 +1703,36 @@ // in some other file // bad - var CheckBox = require('./checkBox'); + const CheckBox = require('./checkBox'); // bad - var CheckBox = require('./check_box'); + const CheckBox = require('./check_box'); // good - var CheckBox = require('./CheckBox'); + const CheckBox = require('./CheckBox'); ``` + - Use camelCase when you export-default a function. Your filename should be identical to your function's name. + + ```javascript + function makeStyleGuide() { + } + + export default makeStyleGuide; + ``` + + - Use PascalCase when you export a singleton / function library / bare object. + + ```javascript + const AirbnbStyleGuide = { + es6: { + } + }; + + export default AirbnbStyleGuide; + ``` + + **[⬆ back to top](#table-of-contents)** @@ -1291,104 +1772,20 @@ - It's okay to create get() and set() functions, but be consistent. ```javascript - function Jedi(options) { - options || (options = {}); - var lightsaber = options.lightsaber || 'blue'; - this.set('lightsaber', lightsaber); - } - - Jedi.prototype.set = function(key, val) { - this[key] = val; - }; - - Jedi.prototype.get = function(key) { - return this[key]; - }; - ``` - -**[⬆ back to top](#table-of-contents)** - - -## Constructors - - - Assign methods to the prototype object, instead of overwriting the prototype with a new object. Overwriting the prototype makes inheritance impossible: by resetting the prototype you'll overwrite the base! - - ```javascript - function Jedi() { - console.log('new jedi'); - } - - // bad - Jedi.prototype = { - fight: function fight() { - console.log('fighting'); - }, - - block: function block() { - console.log('blocking'); + class Jedi { + constructor(options = {}) { + const lightsaber = options.lightsaber || 'blue'; + this.set('lightsaber', lightsaber); } - }; - - // good - Jedi.prototype.fight = function fight() { - console.log('fighting'); - }; - - Jedi.prototype.block = function block() { - console.log('blocking'); - }; - ``` - - Methods can return `this` to help with method chaining. - - ```javascript - // bad - Jedi.prototype.jump = function() { - this.jumping = true; - return true; - }; - - Jedi.prototype.setHeight = function(height) { - this.height = height; - }; - - var luke = new Jedi(); - luke.jump(); // => true - luke.setHeight(20); // => undefined - - // good - Jedi.prototype.jump = function() { - this.jumping = true; - return this; - }; - - Jedi.prototype.setHeight = function(height) { - this.height = height; - return this; - }; - - var luke = new Jedi(); - - luke.jump() - .setHeight(20); - ``` - - - - It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. + set(key, val) { + this[key] = val; + } - ```javascript - function Jedi(options) { - options || (options = {}); - this.name = options.name || 'no name'; + get(key) { + return this[key]; + } } - - Jedi.prototype.getName = function getName() { - return this.name; - }; - - Jedi.prototype.toString = function toString() { - return 'Jedi - ' + this.getName(); - }; ``` **[⬆ back to top](#table-of-contents)** @@ -1398,7 +1795,7 @@ - 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: - ```js + ```javascript // bad $(this).trigger('listingUpdated', listing.id); @@ -1411,7 +1808,7 @@ prefer: - ```js + ```javascript // good $(this).trigger('listingUpdated', { listingId : listing.id }); @@ -1425,47 +1822,16 @@ **[⬆ back to top](#table-of-contents)** -## Modules - - - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933) - - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. - - Add a method called `noConflict()` that sets the exported module to the previous version and returns this one. - - Always declare `'use strict';` at the top of the module. - - ```javascript - // fancyInput/fancyInput.js - - !function(global) { - 'use strict'; - - var previousFancyInput = global.FancyInput; - - function FancyInput(options) { - this.options = options || {}; - } - - FancyInput.noConflict = function noConflict() { - global.FancyInput = previousFancyInput; - return FancyInput; - }; - - global.FancyInput = FancyInput; - }(this); - ``` - -**[⬆ back to top](#table-of-contents)** - - ## jQuery - Prefix jQuery object variables with a `$`. ```javascript // bad - var sidebar = $('.sidebar'); + const sidebar = $('.sidebar'); // good - var $sidebar = $('.sidebar'); + const $sidebar = $('.sidebar'); ``` - Cache jQuery lookups. @@ -1484,7 +1850,7 @@ // good function setSidebar() { - var $sidebar = $('.sidebar'); + const $sidebar = $('.sidebar'); $sidebar.hide(); // ...stuff... @@ -1524,6 +1890,25 @@ **[⬆ back to top](#table-of-contents)** +## ECMAScript 6 Styles + +This is a collection of links to the various es6 features. + +1. [Arrow Functions](#arrow-functions) +1. [Classes](#constructors) +1. [Object Shorthand](#es6-object-shorthand) +1. [Object Concise](#es6-object-concise) +1. [Object Computed Properties](#es6-computed-properties) +1. [Template Strings](#es6-template-literals) +1. [Destructuring](#destructuring) +1. [Default Parameters](#es6-default-parameters) +1. [Rest](#es6-rest) +1. [Array Spreads](#es6-array-spreads) +1. [Let and Const](#references) +1. [Iterators and Generators](#iterators-and-generators) +1. [Modules](#modules) + +**[⬆ back to top](#table-of-contents)** ## Testing @@ -1570,7 +1955,6 @@ - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/) - - [JavaScript Standard Style](https://github.com/feross/standard) **Other Styles** @@ -1603,8 +1987,6 @@ - [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 - - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) - Kyle Simpson **Blogs** @@ -1661,7 +2043,6 @@ - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) - - **Nordic Venture Family**: [CodeDistillery/javascript](https://github.com/CodeDistillery/javascript) - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) diff --git a/es5/README.md b/es5/README.md new file mode 100644 index 0000000000..bcbe6489c3 --- /dev/null +++ b/es5/README.md @@ -0,0 +1,1712 @@ +[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) + +# Airbnb JavaScript Style Guide() { + +*A mostly reasonable approach to JavaScript* + + +## Table of Contents + + 1. [Types](#types) + 1. [Objects](#objects) + 1. [Arrays](#arrays) + 1. [Strings](#strings) + 1. [Functions](#functions) + 1. [Properties](#properties) + 1. [Variables](#variables) + 1. [Hoisting](#hoisting) + 1. [Comparison Operators & Equality](#comparison-operators--equality) + 1. [Blocks](#blocks) + 1. [Comments](#comments) + 1. [Whitespace](#whitespace) + 1. [Commas](#commas) + 1. [Semicolons](#semicolons) + 1. [Type Casting & Coercion](#type-casting--coercion) + 1. [Naming Conventions](#naming-conventions) + 1. [Accessors](#accessors) + 1. [Constructors](#constructors) + 1. [Events](#events) + 1. [Modules](#modules) + 1. [jQuery](#jquery) + 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) + 1. [Testing](#testing) + 1. [Performance](#performance) + 1. [Resources](#resources) + 1. [In the Wild](#in-the-wild) + 1. [Translation](#translation) + 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) + 1. [Chat With Us About Javascript](#chat-with-us-about-javascript) + 1. [Contributors](#contributors) + 1. [License](#license) + +## Types + + - **Primitives**: When you access a primitive type you work directly on its value. + + + `string` + + `number` + + `boolean` + + `null` + + `undefined` + + ```javascript + var foo = 1; + var bar = foo; + + bar = 9; + + console.log(foo, bar); // => 1, 9 + ``` + - **Complex**: When you access a complex type you work on a reference to its value. + + + `object` + + `array` + + `function` + + ```javascript + var foo = [1, 2]; + var bar = foo; + + bar[0] = 9; + + console.log(foo[0], bar[0]); // => 9, 9 + ``` + +**[⬆ back to top](#table-of-contents)** + +## Objects + + - Use the literal syntax for object creation. + + ```javascript + // bad + var item = new Object(); + + // good + var 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). + + ```javascript + // bad + var superman = { + default: { clark: 'kent' }, + private: true + }; + + // good + var superman = { + defaults: { clark: 'kent' }, + hidden: true + }; + ``` + + - Use readable synonyms in place of reserved words. + + ```javascript + // bad + var superman = { + class: 'alien' + }; + + // bad + var superman = { + klass: 'alien' + }; + + // good + var superman = { + type: 'alien' + }; + ``` + +**[⬆ back to top](#table-of-contents)** + +## Arrays + + - Use the literal syntax for array creation. + + ```javascript + // bad + var items = new Array(); + + // good + var items = []; + ``` + + - If you don't know array length use Array#push. + + ```javascript + var someStack = []; + + + // bad + someStack[someStack.length] = 'abracadabra'; + + // good + someStack.push('abracadabra'); + ``` + + - When you need to copy an array use Array#slice. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7) + + ```javascript + var len = items.length; + var itemsCopy = []; + var i; + + // bad + for (i = 0; i < len; i++) { + itemsCopy[i] = items[i]; + } + + // good + itemsCopy = items.slice(); + ``` + + - To convert an array-like object to an array, use Array#slice. + + ```javascript + function trigger() { + var args = Array.prototype.slice.call(arguments); + ... + } + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Strings + + - Use single quotes `''` for strings. + + ```javascript + // bad + var name = "Bob Parr"; + + // good + var name = 'Bob Parr'; + + // bad + var fullName = "Bob " + this.lastName; + + // good + var fullName = 'Bob ' + this.lastName; + ``` + + - 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). + + ```javascript + // bad + var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; + + // bad + var errorMessage = 'This is a super long error that was thrown because \ + of Batman. When you stop to think about how Batman had anything to do \ + with this, you would get nowhere \ + fast.'; + + // good + var errorMessage = 'This is a super long error that was thrown because ' + + 'of Batman. When you stop to think about how Batman had anything to do ' + + 'with this, you would get nowhere fast.'; + ``` + + - When programmatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). + + ```javascript + var items; + var messages; + var length; + var i; + + messages = [{ + state: 'success', + message: 'This one worked.' + }, { + state: 'success', + message: 'This one worked as well.' + }, { + state: 'error', + message: 'This one did not work.' + }]; + + length = messages.length; + + // bad + function inbox(messages) { + items = '
      '; + + for (i = 0; i < length; i++) { + items += '
    • ' + messages[i].message + '
      • '; + } + + return items + '
    '; + } + + // good + function inbox(messages) { + items = []; + + for (i = 0; i < length; i++) { + items[i] = '
  • ' + messages[i].message + '
    • '; + } + + return '
      ' + items.join('') + '
    '; + } + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Functions + + - Function expressions: + + ```javascript + // anonymous function expression + var anonymous = function() { + return true; + }; + + // named function expression + var named = function named() { + return true; + }; + + // immediately-invoked function expression (IIFE) + (function() { + console.log('Welcome to the Internet. Please follow me.'); + })(); + ``` + + - 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). + + ```javascript + // bad + if (currentUser) { + function test() { + console.log('Nope.'); + } + } + + // good + var test; + if (currentUser) { + test = function test() { + console.log('Yup.'); + }; + } + ``` + + - Never name a parameter `arguments`, this will take precedence over the `arguments` object that is given to every function scope. + + ```javascript + // bad + function nope(name, options, arguments) { + // ...stuff... + } + + // good + function yup(name, options, args) { + // ...stuff... + } + ``` + +**[⬆ back to top](#table-of-contents)** + + + +## Properties + + - Use dot notation when accessing properties. + + ```javascript + var luke = { + jedi: true, + age: 28 + }; + + // bad + var isJedi = luke['jedi']; + + // good + var isJedi = luke.jedi; + ``` + + - Use subscript notation `[]` when accessing properties with a variable. + + ```javascript + var luke = { + jedi: true, + age: 28 + }; + + function getProp(prop) { + return luke[prop]; + } + + var isJedi = getProp('jedi'); + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Variables + + - Always use `var` 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 + superPower = new SuperPower(); + + // good + var superPower = new SuperPower(); + ``` + + - Use one `var` declaration per variable. + 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. + + ```javascript + // bad + var items = getItems(), + goSportsTeam = true, + dragonball = 'z'; + + // bad + // (compare to above, and try to spot the mistake) + var items = getItems(), + goSportsTeam = true; + dragonball = 'z'; + + // good + var items = getItems(); + var goSportsTeam = true; + var dragonball = 'z'; + ``` + + - Declare unassigned variables last. This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. + + ```javascript + // bad + var i, len, dragonball, + items = getItems(), + goSportsTeam = true; + + // bad + var i; + var items = getItems(); + var dragonball; + var goSportsTeam = true; + var len; + + // good + var items = getItems(); + var goSportsTeam = true; + var dragonball; + var length; + var i; + ``` + + - Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues. + + ```javascript + // bad + function() { + test(); + console.log('doing stuff..'); + + //..other stuff.. + + var name = getName(); + + if (name === 'test') { + return false; + } + + return name; + } + + // good + function() { + var name = getName(); + + test(); + console.log('doing stuff..'); + + //..other stuff.. + + if (name === 'test') { + return false; + } + + return name; + } + + // bad + function() { + var name = getName(); + + if (!arguments.length) { + return false; + } + + return true; + } + + // good + function() { + if (!arguments.length) { + return false; + } + + var name = getName(); + + return true; + } + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Hoisting + + - Variable declarations get hoisted to the top of their scope, their assignment does not. + + ```javascript + // we know this wouldn't work (assuming there + // is no notDefined global variable) + function example() { + console.log(notDefined); // => throws a ReferenceError + } + + // creating a variable declaration after you + // reference the variable will work due to + // variable hoisting. Note: the assignment + // value of `true` is not hoisted. + function example() { + console.log(declaredButNotAssigned); // => undefined + var declaredButNotAssigned = true; + } + + // The interpreter is hoisting the variable + // declaration to the top of the scope, + // which means our example could be rewritten as: + function example() { + var declaredButNotAssigned; + console.log(declaredButNotAssigned); // => undefined + declaredButNotAssigned = true; + } + ``` + + - Anonymous function expressions hoist their variable name, but not the function assignment. + + ```javascript + function example() { + console.log(anonymous); // => undefined + + anonymous(); // => TypeError anonymous is not a function + + var anonymous = function() { + console.log('anonymous function expression'); + }; + } + ``` + + - Named function expressions hoist the variable name, not the function name or the function body. + + ```javascript + function example() { + console.log(named); // => undefined + + named(); // => TypeError named is not a function + + superPower(); // => ReferenceError superPower is not defined + + var named = function superPower() { + console.log('Flying'); + }; + } + + // the same is true when the function name + // is the same as the variable name. + function example() { + console.log(named); // => undefined + + named(); // => TypeError named is not a function + + var named = function named() { + console.log('named'); + } + } + ``` + + - Function declarations hoist their name and the function body. + + ```javascript + function example() { + superPower(); // => Flying + + function superPower() { + console.log('Flying'); + } + } + ``` + + - For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting) by [Ben Cherry](http://www.adequatelygood.com/). + +**[⬆ back to top](#table-of-contents)** + + + +## Comparison Operators & Equality + + - Use `===` and `!==` over `==` and `!=`. + - Comparison operators are evaluated using coercion with the `ToBoolean` method and always follow these simple rules: + + + **Objects** evaluate to **true** + + **Undefined** evaluates to **false** + + **Null** evaluates to **false** + + **Booleans** evaluate to **the value of the boolean** + + **Numbers** evaluate to **false** if **+0, -0, or NaN**, otherwise **true** + + **Strings** evaluate to **false** if an empty string `''`, otherwise **true** + + ```javascript + if ([0]) { + // true + // An array is an object, objects evaluate to true + } + ``` + + - Use shortcuts. + + ```javascript + // bad + if (name !== '') { + // ...stuff... + } + + // good + if (name) { + // ...stuff... + } + + // bad + if (collection.length > 0) { + // ...stuff... + } + + // good + if (collection.length) { + // ...stuff... + } + ``` + + - 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. + + ```javascript + // bad + if (test) + return false; + + // good + if (test) return false; + + // good + if (test) { + return false; + } + + // bad + function() { return false; } + + // good + function() { + return false; + } + ``` + + - 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 + // bad + if (test) { + thing1(); + thing2(); + } + else { + thing3(); + } + + // good + if (test) { + thing1(); + thing2(); + } else { + thing3(); + } + ``` + + +**[⬆ back to top](#table-of-contents)** + + +## Comments + + - Use `/** ... */` for multiline comments. Include a description, specify types and values for all parameters and return values. + + ```javascript + // bad + // make() returns a new element + // based on the passed in tag name + // + // @param {String} tag + // @return {Element} element + function make(tag) { + + // ...stuff... + + return element; + } + + // good + /** + * make() returns a new element + * based on the passed in tag name + * + * @param {String} tag + * @return {Element} element + */ + function make(tag) { + + // ...stuff... + + return element; + } + ``` + + - 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 + var active = true; // is current tab + + // good + // is current tab + var active = true; + + // bad + function getType() { + console.log('fetching type...'); + // set the default type to 'no type' + var type = this._type || 'no type'; + + return type; + } + + // good + function getType() { + console.log('fetching type...'); + + // set the default type to 'no type' + var type = this._type || 'no type'; + + return type; + } + ``` + + - 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. + + ```javascript + function Calculator() { + + // FIXME: shouldn't use a global here + total = 0; + + return this; + } + ``` + + - Use `// TODO:` to annotate solutions to problems. + + ```javascript + function Calculator() { + + // TODO: total should be configurable by an options param + this.total = 0; + + return this; + } + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Whitespace + + - Use soft tabs set to 2 spaces. + + ```javascript + // bad + function() { + ∙∙∙∙var name; + } + + // bad + function() { + ∙var name; + } + + // good + function() { + ∙∙var name; + } + ``` + + - Place 1 space before the leading brace. + + ```javascript + // bad + function test(){ + console.log('test'); + } + + // good + function test() { + console.log('test'); + } + + // bad + dog.set('attr',{ + age: '1 year', + breed: 'Bernese Mountain Dog' + }); + + // good + dog.set('attr', { + age: '1 year', + breed: 'Bernese Mountain Dog' + }); + ``` + + - Set off operators with spaces. + + ```javascript + // bad + var x=y+5; + + // good + var x = y + 5; + ``` + + - End files with a single newline character. + + ```javascript + // bad + (function(global) { + // ...stuff... + })(this); + ``` + + ```javascript + // bad + (function(global) { + // ...stuff... + })(this);↵ + ↵ + ``` + + ```javascript + // good + (function(global) { + // ...stuff... + })(this);↵ + ``` + + - 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 + // bad + $('#items').find('.selected').highlight().end().find('.open').updateCount(); + + // bad + $('#items'). + find('selected'). + highlight(). + end(). + find('.open'). + updateCount(); + + // good + $('#items') + .find('.selected') + .highlight() + .end() + .find('.open') + .updateCount(); + + // bad + var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) + .attr('width', (radius + margin) * 2).append('svg:g') + .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') + .call(tron.led); + + // good + var leds = stage.selectAll('.led') + .data(data) + .enter().append('svg:svg') + .class('led', true) + .attr('width', (radius + margin) * 2) + .append('svg:g') + .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') + .call(tron.led); + ``` + + - Leave a blank line after blocks and before the next statement + + ```javascript + // bad + if (foo) { + return bar; + } + return baz; + + // good + if (foo) { + return bar; + } + + return baz; + + // bad + var obj = { + foo: function() { + }, + bar: function() { + } + }; + return obj; + + // good + var obj = { + foo: function() { + }, + + bar: function() { + } + }; + + return obj; + ``` + + +**[⬆ back to top](#table-of-contents)** + +## Commas + + - Leading commas: **Nope.** + + ```javascript + // bad + var story = [ + once + , upon + , aTime + ]; + + // good + var story = [ + once, + upon, + aTime + ]; + + // bad + var hero = { + firstName: 'Bob' + , lastName: 'Parr' + , heroName: 'Mr. Incredible' + , superPower: 'strength' + }; + + // good + var hero = { + firstName: 'Bob', + lastName: 'Parr', + heroName: 'Mr. Incredible', + superPower: 'strength' + }; + ``` + + - Additional trailing comma: **Nope.** This can cause problems with IE6/7 and IE9 if it's in quirksmode. Also, in some implementations of ES3 would add length to an array if it had an additional trailing comma. This was clarified in ES5 ([source](http://es5.github.io/#D)): + + > Edition 5 clarifies the fact that a trailing comma at the end of an ArrayInitialiser does not add to the length of the array. This is not a semantic change from Edition 3 but some implementations may have previously misinterpreted this. + + ```javascript + // bad + var hero = { + firstName: 'Kevin', + lastName: 'Flynn', + }; + + var heroes = [ + 'Batman', + 'Superman', + ]; + + // good + var hero = { + firstName: 'Kevin', + lastName: 'Flynn' + }; + + var heroes = [ + 'Batman', + 'Superman' + ]; + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Semicolons + + - **Yup.** + + ```javascript + // bad + (function() { + var name = 'Skywalker' + return name + })() + + // good + (function() { + var name = 'Skywalker'; + return name; + })(); + + // good (guards against the function becoming an argument when two files with IIFEs are concatenated) + ;(function() { + var name = 'Skywalker'; + return name; + })(); + ``` + + [Read more](http://stackoverflow.com/a/7365214/1712802). + +**[⬆ back to top](#table-of-contents)** + + +## Type Casting & Coercion + + - Perform type coercion at the beginning of the statement. + - Strings: + + ```javascript + // => this.reviewScore = 9; + + // bad + var totalScore = this.reviewScore + ''; + + // good + var totalScore = '' + this.reviewScore; + + // bad + var totalScore = '' + this.reviewScore + ' total score'; + + // good + var totalScore = this.reviewScore + ' total score'; + ``` + + - Use `parseInt` for Numbers and always with a radix for type casting. + + ```javascript + var inputValue = '4'; + + // bad + var val = new Number(inputValue); + + // bad + var val = +inputValue; + + // bad + var val = inputValue >> 0; + + // bad + var val = parseInt(inputValue); + + // good + var val = Number(inputValue); + + // good + var 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. + + ```javascript + // good + /** + * parseInt was the reason my code was slow. + * Bitshifting the String to coerce it to a + * Number made it a lot faster. + */ + var 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: + + ```javascript + 2147483647 >> 0 //=> 2147483647 + 2147483648 >> 0 //=> -2147483648 + 2147483649 >> 0 //=> -2147483647 + ``` + + - Booleans: + + ```javascript + var age = 0; + + // bad + var hasAge = new Boolean(age); + + // good + var hasAge = Boolean(age); + + // good + var hasAge = !!age; + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Naming Conventions + + - Avoid single letter names. Be descriptive with your naming. + + ```javascript + // bad + function q() { + // ...stuff... + } + + // good + function query() { + // ..stuff.. + } + ``` + + - Use camelCase when naming objects, functions, and instances. + + ```javascript + // bad + var OBJEcttsssss = {}; + var this_is_my_object = {}; + function c() {} + var u = new user({ + name: 'Bob Parr' + }); + + // good + var thisIsMyObject = {}; + function thisIsMyFunction() {} + var user = new User({ + name: 'Bob Parr' + }); + ``` + + - Use PascalCase when naming constructors or classes. + + ```javascript + // bad + function user(options) { + this.name = options.name; + } + + var bad = new user({ + name: 'nope' + }); + + // good + function User(options) { + this.name = options.name; + } + + var good = new User({ + name: 'yup' + }); + ``` + + - Use a leading underscore `_` when naming private properties. + + ```javascript + // bad + this.__firstName__ = 'Panda'; + this.firstName_ = 'Panda'; + + // good + this._firstName = 'Panda'; + ``` + + - When saving a reference to `this` use `_this`. + + ```javascript + // bad + function() { + var self = this; + return function() { + console.log(self); + }; + } + + // bad + function() { + var that = this; + return function() { + console.log(that); + }; + } + + // good + function() { + var _this = this; + return function() { + console.log(_this); + }; + } + ``` + + - Name your functions. This is helpful for stack traces. + + ```javascript + // bad + var log = function(msg) { + console.log(msg); + }; + + // good + var log = function log(msg) { + console.log(msg); + }; + ``` + + - **Note:** IE8 and below exhibit some quirks with named function expressions. See [http://kangax.github.io/nfe/](http://kangax.github.io/nfe/) for more info. + + - If your file exports a single class, your filename should be exactly the name of the class. + ```javascript + // file contents + class CheckBox { + // ... + } + module.exports = CheckBox; + + // in some other file + // bad + var CheckBox = require('./checkBox'); + + // bad + var CheckBox = require('./check_box'); + + // good + var CheckBox = require('./CheckBox'); + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Accessors + + - Accessor functions for properties are not required. + - If you do make accessor functions use getVal() and setVal('hello'). + + ```javascript + // bad + dragon.age(); + + // good + dragon.getAge(); + + // bad + dragon.age(25); + + // good + dragon.setAge(25); + ``` + + - If the property is a boolean, use isVal() or hasVal(). + + ```javascript + // bad + if (!dragon.age()) { + return false; + } + + // good + if (!dragon.hasAge()) { + return false; + } + ``` + + - It's okay to create get() and set() functions, but be consistent. + + ```javascript + function Jedi(options) { + options || (options = {}); + var lightsaber = options.lightsaber || 'blue'; + this.set('lightsaber', lightsaber); + } + + Jedi.prototype.set = function(key, val) { + this[key] = val; + }; + + Jedi.prototype.get = function(key) { + return this[key]; + }; + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Constructors + + - Assign methods to the prototype object, instead of overwriting the prototype with a new object. Overwriting the prototype makes inheritance impossible: by resetting the prototype you'll overwrite the base! + + ```javascript + function Jedi() { + console.log('new jedi'); + } + + // bad + Jedi.prototype = { + fight: function fight() { + console.log('fighting'); + }, + + block: function block() { + console.log('blocking'); + } + }; + + // good + Jedi.prototype.fight = function fight() { + console.log('fighting'); + }; + + Jedi.prototype.block = function block() { + console.log('blocking'); + }; + ``` + + - Methods can return `this` to help with method chaining. + + ```javascript + // bad + Jedi.prototype.jump = function() { + this.jumping = true; + return true; + }; + + Jedi.prototype.setHeight = function(height) { + this.height = height; + }; + + var luke = new Jedi(); + luke.jump(); // => true + luke.setHeight(20); // => undefined + + // good + Jedi.prototype.jump = function() { + this.jumping = true; + return this; + }; + + Jedi.prototype.setHeight = function(height) { + this.height = height; + return this; + }; + + var luke = new Jedi(); + + luke.jump() + .setHeight(20); + ``` + + + - It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. + + ```javascript + function Jedi(options) { + options || (options = {}); + this.name = options.name || 'no name'; + } + + Jedi.prototype.getName = function getName() { + return this.name; + }; + + Jedi.prototype.toString = function toString() { + return 'Jedi - ' + this.getName(); + }; + ``` + +**[⬆ back to top](#table-of-contents)** + + +## 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: + + ```js + // bad + $(this).trigger('listingUpdated', listing.id); + + ... + + $(this).on('listingUpdated', function(e, listingId) { + // do something with listingId + }); + ``` + + prefer: + + ```js + // good + $(this).trigger('listingUpdated', { listingId : listing.id }); + + ... + + $(this).on('listingUpdated', function(e, data) { + // do something with data.listingId + }); + ``` + + **[⬆ back to top](#table-of-contents)** + + +## Modules + + - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933) + - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. + - Add a method called `noConflict()` that sets the exported module to the previous version and returns this one. + - Always declare `'use strict';` at the top of the module. + + ```javascript + // fancyInput/fancyInput.js + + !function(global) { + 'use strict'; + + var previousFancyInput = global.FancyInput; + + function FancyInput(options) { + this.options = options || {}; + } + + FancyInput.noConflict = function noConflict() { + global.FancyInput = previousFancyInput; + return FancyInput; + }; + + global.FancyInput = FancyInput; + }(this); + ``` + +**[⬆ back to top](#table-of-contents)** + + +## jQuery + + - Prefix jQuery object variables with a `$`. + + ```javascript + // bad + var sidebar = $('.sidebar'); + + // good + var $sidebar = $('.sidebar'); + ``` + + - Cache jQuery lookups. + + ```javascript + // bad + function setSidebar() { + $('.sidebar').hide(); + + // ...stuff... + + $('.sidebar').css({ + 'background-color': 'pink' + }); + } + + // good + function setSidebar() { + var $sidebar = $('.sidebar'); + $sidebar.hide(); + + // ...stuff... + + $sidebar.css({ + 'background-color': 'pink' + }); + } + ``` + + - 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. + + ```javascript + // bad + $('ul', '.sidebar').hide(); + + // bad + $('.sidebar').find('ul').hide(); + + // good + $('.sidebar ul').hide(); + + // good + $('.sidebar > ul').hide(); + + // good + $sidebar.find('ul').hide(); + ``` + +**[⬆ back to top](#table-of-contents)** + + +## ECMAScript 5 Compatibility + + - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/). + +**[⬆ back to top](#table-of-contents)** + + +## Testing + + - **Yup.** + + ```javascript + function() { + return true; + } + ``` + +**[⬆ back to top](#table-of-contents)** + + +## Performance + + - [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/) + - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2) + - [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost) + - [Bang Function](http://jsperf.com/bang-function) + - [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13) + - [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text) + - [Long String Concatenation](http://jsperf.com/ya-string-concat) + - Loading... + +**[⬆ back to top](#table-of-contents)** + + +## Resources + + +**Read This** + + - [Annotated ECMAScript 5.1](http://es5.github.com/) + +**Tools** + + - Code Style Linters + + [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) + +**Other Styleguides** + + - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) + - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) + - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/) + - [JavaScript Standard Style](https://github.com/feross/standard) + +**Other Styles** + + - [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen + - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - Ross Allen + - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) - JeongHoon Byun + - [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman + +**Further Reading** + + - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll + - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer + - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz + - [ES6 Features](https://github.com/lukehoban/es6features) - Luke Hoban + - [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) - Benjamin De Cock + +**Books** + + - [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford + - [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov + - [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz + - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders + - [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas + - [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw + - [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig + - [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch + - [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault + - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg + - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy + - [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 + - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) - Kyle Simpson + +**Blogs** + + - [DailyJS](http://dailyjs.com/) + - [JavaScript Weekly](http://javascriptweekly.com/) + - [JavaScript, JavaScript...](http://javascriptweblog.wordpress.com/) + - [Bocoup Weblog](http://weblog.bocoup.com/) + - [Adequately Good](http://www.adequatelygood.com/) + - [NCZOnline](http://www.nczonline.net/) + - [Perfection Kills](http://perfectionkills.com/) + - [Ben Alman](http://benalman.com/) + - [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/) + - [Dustin Diaz](http://dustindiaz.com/) + - [nettuts](http://net.tutsplus.com/?s=javascript) + +**Podcasts** + + - [JavaScript Jabber](http://devchat.tv/js-jabber/) + + +**[⬆ back to top](#table-of-contents)** + +## In the Wild + + This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. + + - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) + - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) + - **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) + - **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) + - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) + - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) + - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) + - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) + - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) + - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) + - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) + - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) + - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) + - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) + - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript) + - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) + - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) + - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) + - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) + - **Muber**: [muber/javascript](https://github.com/muber/javascript) + - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) + - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) + - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript) + - **Nordic Venture Family**: [CodeDistillery/javascript](https://github.com/CodeDistillery/javascript) + - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) + - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) + - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) + - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript) + - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) + - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) + - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) + - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) + - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/javascript) + - **Target**: [target/javascript](https://github.com/target/javascript) + - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) + - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) + - **Userify**: [userify/javascript](https://github.com/userify/javascript) + - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) + - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript) + - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) + - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) + +## Translation + + This style guide is also available in other languages: + + - ![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) + - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) + - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/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) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) + - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/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) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) + - ![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) + - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) + +## The JavaScript Style Guide Guide + + - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) + +## Chat With Us About JavaScript + + - Find us on [gitter](https://gitter.im/airbnb/javascript). + +## Contributors + + - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) + + +## License + +(The MIT License) + +Copyright (c) 2014 Airbnb + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +'Software'), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +**[⬆ back to top](#table-of-contents)** + +# }; From b8fd0438fb2878aaf617716ac3513ae3da6910c6 Mon Sep 17 00:00:00 2001 From: Casey Jenks Date: Thu, 2 Apr 2015 21:41:11 -0400 Subject: [PATCH 0126/1536] Iterators and Generators: sum should be 15, not 10 --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c6b552c885..896351e0a7 100644 --- a/README.md +++ b/README.md @@ -786,16 +786,16 @@ sum += num; } - sum === 10; + sum === 15; // good let sum = 0; numbers.forEach((num) => sum += num); - sum === 10; + sum === 15; // best (use the functional force) const sum = numbers.reduce((total, num) => total + num, 0); - sum === 10; + sum === 15; ``` - Don't use generators. From a6a573e3ccac39cabf83780a0b02b30a2c5ee6b2 Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Fri, 3 Apr 2015 14:47:01 -0700 Subject: [PATCH 0127/1536] Use more template literals, s/suffer/blessed with --- README.md | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 896351e0a7..fbb05387fa 100644 --- a/README.md +++ b/README.md @@ -401,12 +401,6 @@ // good const name = 'Bob Parr'; - - // bad - const fullName = "Bob " + this.lastName; - - // good - const fullName = 'Bob ' + this.lastName; ``` - Strings longer than 80 characters should be written across multiple lines using string concatenation. @@ -714,7 +708,7 @@ } toString() { - return 'Jedi - ' + this.getName(); + return `Jedi - ${this.getName()}`; } } ``` @@ -951,7 +945,7 @@ ## Hoisting - - `var` declarations get hoisted to the top of their scope, but their assignment does not. `const` and `let` declarations suffer from [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). Also see why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). + - `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 @@ -1531,13 +1525,7 @@ const totalScore = this.reviewScore + ''; // good - const totalScore = '' + this.reviewScore; - - // bad - const totalScore = '' + this.reviewScore + ' total score'; - - // good - const totalScore = this.reviewScore + ' total score'; + const totalScore = String(this.reviewScore); ``` - Use `parseInt` for Numbers and always with a radix for type casting. From 22e3c89d045e60fba240b07009bed07ba1797eaf Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Fri, 3 Apr 2015 15:15:56 -0700 Subject: [PATCH 0128/1536] Removing a few trailing commas --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fbb05387fa..eb77894051 100644 --- a/README.md +++ b/README.md @@ -198,7 +198,7 @@ const obj = { id: 5, name: 'San Francisco', - [getKey('enabled')]: true, + [getKey('enabled')]: true }; ``` @@ -212,7 +212,7 @@ addValue: function (value) { return atom.value + value; - }, + } }; // good @@ -221,7 +221,7 @@ addValue(value) { return atom.value + value; - }, + } }; ``` From bc5b0ee007ba9e7bd92afb7caf325f4c63fc6e09 Mon Sep 17 00:00:00 2001 From: Luke Westby Date: Fri, 3 Apr 2015 21:13:50 -0500 Subject: [PATCH 0129/1536] Change wording in Iterators and Generators I found the term "function constructors" to be confusing as the functions the section refers to are not constructors. I think "higher-order functions" or something similar would be more clear. Thanks! --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index eb77894051..f68fc1d4de 100644 --- a/README.md +++ b/README.md @@ -767,7 +767,7 @@ ## Iterators and Generators - - Don't use iterators. Prefer JavaScript's function constructors instead of loops like `for-of`. + - 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. From e8260674988be12080b3c75d3af84c64ed35af86 Mon Sep 17 00:00:00 2001 From: NoNameSheep Date: Sat, 4 Apr 2015 13:54:49 +0800 Subject: [PATCH 0130/1536] advice against side effect in default parameter --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index f68fc1d4de..869f8a051c 100644 --- a/README.md +++ b/README.md @@ -550,6 +550,23 @@ // ... } ``` + + - Don't put side effect into default parameter + + > it introduces confusion and subtlety. Arguments in function call are evaluated at call site, but default parameters are not evaluated at define site. + + ```javascript + var b = 1 + // bad + function count(a = b++) { + console.log(a) + } + count() // 1 + count() // 2 + count(3) // 3 + count() // 3 + ``` + **[⬆ back to top](#table-of-contents)** From 38ae6b6df209d229491cb6ce0edc2c0d5b1d34b9 Mon Sep 17 00:00:00 2001 From: Sean Massa Date: Sun, 5 Apr 2015 01:34:31 -0500 Subject: [PATCH 0131/1536] add `bad` comment to bad section of destructuring --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 869f8a051c..db16779168 100644 --- a/README.md +++ b/README.md @@ -370,6 +370,7 @@ > Why? You can add new properties over time or change the order of things without breaking call sites. ```javascript + // bad function processInput(input) { // then a miracle occurs return [left, right, top, bottom]; From 6d34c516cc1649fe795a5145e89545328d04d360 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 5 Apr 2015 21:49:13 -0700 Subject: [PATCH 0132/1536] [toc] remove extra modules link --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index db16779168..272d94a140 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,6 @@ 1. [Naming Conventions](#naming-conventions) 1. [Accessors](#accessors) 1. [Events](#events) - 1. [Modules](#modules) 1. [jQuery](#jquery) 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) 1. [ECMAScript 6 Styles](#ecmascript-6-styles) From f7321b303d6f3046ba49741041312fa2d8c76ed7 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Sun, 5 Apr 2015 21:50:08 -0700 Subject: [PATCH 0133/1536] [modules] fix invalid syntax in bad example. fixes #287 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 272d94a140..24a5edcfbe 100644 --- a/README.md +++ b/README.md @@ -772,7 +772,7 @@ ```javascript // bad // filename es6.js - export default { es6 } from './airbnbStyleGuide'; + export { es6 as default } from './airbnbStyleGuide'; // good // filename es6.js From 875d2ad05e7587bec304375f9d5451a80ef13ae5 Mon Sep 17 00:00:00 2001 From: Tomek Wiszniewski Date: Fri, 10 Apr 2015 00:13:09 +0200 Subject: [PATCH 0134/1536] Add `esnext` to the jsHint configuration This way we'll allow ES6 syntax. --- linters/jshintrc | 3 +++ 1 file changed, 3 insertions(+) diff --git a/linters/jshintrc b/linters/jshintrc index cc6e398b40..141067fd23 100644 --- a/linters/jshintrc +++ b/linters/jshintrc @@ -13,6 +13,9 @@ // Define globals exposed by Node.js. "node": true, + // Allow ES6. + "esnext": true, + /* * ENFORCING OPTIONS * ================= From ee176044c303a523cbb1ee68d1202d399639bcb3 Mon Sep 17 00:00:00 2001 From: dsc Date: Fri, 10 Apr 2015 15:34:54 +0200 Subject: [PATCH 0135/1536] Rename two let keywords to const --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 24a5edcfbe..0c1afab917 100644 --- a/README.md +++ b/README.md @@ -897,9 +897,9 @@ // bad let i; - let items = getItems(); + const items = getItems(); let dragonball; - let goSportsTeam = true; + const goSportsTeam = true; let len; // good From 0cca5e21fc66d6c5f076af71ab9a269a3ccddcc7 Mon Sep 17 00:00:00 2001 From: Tomek Wiszniewski Date: Sat, 11 Apr 2015 12:46:08 +0200 Subject: [PATCH 0136/1536] Fix hoisting examples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hoisting only happens to `var`. As kangax describes in [Why `typeof` is no longer “safe”](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15/3). Also, I wonder if we need the whole section, since you recommend to [avoid using `var` altogether](https://github.com/airbnb/javascript/blob/b492/README.md#references). --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0c1afab917..aaf2290f9e 100644 --- a/README.md +++ b/README.md @@ -1005,7 +1005,7 @@ anonymous(); // => TypeError anonymous is not a function - let anonymous = function() { + var anonymous = function() { console.log('anonymous function expression'); }; } @@ -1021,7 +1021,7 @@ superPower(); // => ReferenceError superPower is not defined - let named = function superPower() { + var named = function superPower() { console.log('Flying'); }; } @@ -1033,7 +1033,7 @@ named(); // => TypeError named is not a function - let named = function named() { + var named = function named() { console.log('named'); } } From e5006931f106fd6b1e3907fddc70950ed6c1cff2 Mon Sep 17 00:00:00 2001 From: Matias Singers Date: Sun, 12 Apr 2015 20:44:48 +0800 Subject: [PATCH 0137/1536] Use modules in naming conventions example Following the rule from further up: "Always use modules (import/export) over a non-standard module system." --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index aaf2290f9e..1ba0446bdc 100644 --- a/README.md +++ b/README.md @@ -1704,17 +1704,17 @@ class CheckBox { // ... } - module.exports = CheckBox; + export default CheckBox; // in some other file // bad - const CheckBox = require('./checkBox'); + import CheckBox from './checkBox'; // bad - const CheckBox = require('./check_box'); + import CheckBox from './check_box'; // good - const CheckBox = require('./CheckBox'); + import CheckBox from './CheckBox'; ``` - Use camelCase when you export-default a function. Your filename should be identical to your function's name. From d0028724eac28637d7bc4cde2ceac1c634dc452c Mon Sep 17 00:00:00 2001 From: Herrington Darkholme Date: Mon, 13 Apr 2015 09:04:39 +0800 Subject: [PATCH 0138/1536] add semicolons --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1ba0446bdc..b149f3570e 100644 --- a/README.md +++ b/README.md @@ -550,21 +550,21 @@ // ... } ``` - + - Don't put side effect into default parameter - - > it introduces confusion and subtlety. Arguments in function call are evaluated at call site, but default parameters are not evaluated at define site. + + > it introduces confusion and subtlety. Arguments in function call are evaluated at call site, but default parameters are not evaluated at define site. ```javascript - var b = 1 + var b = 1; // bad function count(a = b++) { - console.log(a) + console.log(a); } - count() // 1 - count() // 2 - count(3) // 3 - count() // 3 + count(); // 1 + count(); // 2 + count(3); // 3 + count(); // 3 ``` From cb47b478c70bb0d1bee0a60643c5970bd67a799a Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Mon, 27 Apr 2015 16:58:09 -0700 Subject: [PATCH 0139/1536] Amend grammar for default parameters --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b149f3570e..e63ee40032 100644 --- a/README.md +++ b/README.md @@ -551,9 +551,9 @@ } ``` - - Don't put side effect into default parameter + - Avoid side effects with default parameters - > it introduces confusion and subtlety. Arguments in function call are evaluated at call site, but default parameters are not evaluated at define site. + > Why? They are confusing to reason about. ```javascript var b = 1; From 455529c2346bd9f38e9ce09c507afbc11bba6b17 Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Tue, 28 Apr 2015 21:28:40 -0700 Subject: [PATCH 0140/1536] Updates es5 guide with latest --- es5/README.md | 78 +++++++++++++++++++++++++++++++++++---------------- 1 file changed, 54 insertions(+), 24 deletions(-) diff --git a/es5/README.md b/es5/README.md index bcbe6489c3..02ecc75ee6 100644 --- a/es5/README.md +++ b/es5/README.md @@ -135,7 +135,7 @@ var items = []; ``` - - If you don't know array length use Array#push. + - Use Array#push instead of direct assignment to add items to an array. ```javascript var someStack = []; @@ -250,6 +250,7 @@ items = []; for (i = 0; i < length; i++) { + // use direct assignment in this case because we're micro-optimizing. items[i] = '
  • ' + messages[i].message + '
    • '; } @@ -301,7 +302,7 @@ } ``` - - Never name a parameter `arguments`, this will take precedence over the `arguments` object that is given to every function scope. + - Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. ```javascript // bad @@ -447,7 +448,7 @@ return name; } - // bad + // bad - unnessary function call function() { var name = getName(); @@ -455,16 +456,21 @@ return false; } + this.setFirstName(name); + return true; } // good function() { + var name; + if (!arguments.length) { return false; } - var name = getName(); + name = getName(); + this.setFirstName(name); return true; } @@ -475,7 +481,7 @@ ## Hoisting - - Variable declarations get hoisted to the top of their scope, their assignment does not. + - Variable declarations get hoisted to the top of their scope, but their assignment does not. ```javascript // we know this wouldn't work (assuming there @@ -665,7 +671,7 @@ ## Comments - - Use `/** ... */` for multiline comments. Include a description, specify types and values for all parameters and return values. + - Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. ```javascript // bad @@ -803,6 +809,30 @@ }); ``` + - 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 + if(isJedi) { + fight (); + } + + // good + if (isJedi) { + fight(); + } + + // bad + function fight () { + console.log ('Swooosh!'); + } + + // good + function fight() { + console.log('Swooosh!'); + } + ``` + - Set off operators with spaces. ```javascript @@ -846,7 +876,7 @@ // bad $('#items'). - find('selected'). + find('.selected'). highlight(). end(). find('.open'). @@ -861,8 +891,8 @@ .updateCount(); // bad - var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) - .attr('width', (radius + margin) * 2).append('svg:g') + var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) + .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); @@ -870,8 +900,8 @@ var leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') - .class('led', true) - .attr('width', (radius + margin) * 2) + .classed('led', true) + .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); @@ -1118,17 +1148,12 @@ // bad var OBJEcttsssss = {}; var this_is_my_object = {}; + var o = {}; function c() {} - var u = new user({ - name: 'Bob Parr' - }); // good var thisIsMyObject = {}; function thisIsMyFunction() {} - var user = new User({ - name: 'Bob Parr' - }); ``` - Use PascalCase when naming constructors or classes. @@ -1607,6 +1632,7 @@ This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) + - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript) - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) @@ -1616,6 +1642,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) + - **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) - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) @@ -1624,6 +1651,7 @@ - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide) - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript) - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) + - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) @@ -1656,18 +1684,20 @@ This style guide is also available in other languages: - - ![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) - - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) + - ![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) - - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/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) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) - - ![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) + - ![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) + - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) + - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) - ![pl](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Poland.png) **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [uprock/javascript](https://github.com/uprock/javascript) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) + - ![th](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Thailand.png) **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide) ## The JavaScript Style Guide Guide From cc460132ccbcbad2dceac70474ca3756e43b5b95 Mon Sep 17 00:00:00 2001 From: Josh Perez Date: Tue, 28 Apr 2015 21:31:58 -0700 Subject: [PATCH 0141/1536] Learn you some ES6 --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index e63ee40032..5c1913cc55 100644 --- a/README.md +++ b/README.md @@ -1944,6 +1944,12 @@ This is a collection of links to the various es6 features. ## Resources +**Learning ES6** + + - [Draft ECMA 2015 (ES6) Spec](https://people.mozilla.org/~jorendorff/es6-draft.html) + - [ExploringJS](http://exploringjs.com/) + - [ES6 Compatibility Table](https://kangax.github.io/compat-table/es6/) + - [Comprehensive Overview of ES6 Features](http://es6-features.org/) **Read This** From a41c1fab68fa913c9184299cfa92ac453a420291 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Apr 2015 10:07:11 -0700 Subject: [PATCH 0142/1536] [intro] our es5 guide is still up to date --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5c1913cc55..825ccfc539 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ *A mostly reasonable approach to JavaScript* -[For our old ES5-only guide click here](es5/). +[For the ES5-only guide click here](es5/). ## Table of Contents From a2034b0f6ce448c272bd4c13773dfd710dbfeb89 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Apr 2015 10:39:01 -0700 Subject: [PATCH 0143/1536] [commas] additional trailing commas good in es6. fixes #323 --- README.md | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 825ccfc539..ea5de7c7ab 100644 --- a/README.md +++ b/README.md @@ -1470,31 +1470,45 @@ }; ``` - - Additional trailing comma: **Nope.** This can cause problems with IE6/7 and IE9 if it's in quirksmode. Also, in some implementations of ES3 would add length to an array if it had an additional trailing comma. This was clarified in ES5 ([source](http://es5.github.io/#D)): + - Additional trailing comma: **Yup.** - > Edition 5 clarifies the fact that a trailing comma at the end of an ArrayInitialiser does not add to the length of the array. This is not a semantic change from Edition 3 but some implementations may have previously misinterpreted this. + > 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. ```javascript + // bad - git diff without trailing comma + const hero = { + - firstName: 'Bob', + + lastName: 'Parr', + + heroName: 'Mr. Incredible' + } + + // good - git diff with trailing comma + const hero = { + firstName: 'Bob', + lastName: 'Parr', + + heroName: 'Mr. Incredible', + } + // bad const hero = { firstName: 'Kevin', - lastName: 'Flynn', + lastName: 'Flynn' }; const heroes = [ 'Batman', - 'Superman', + 'Superman' ]; // good const hero = { firstName: 'Kevin', - lastName: 'Flynn' + lastName: 'Flynn', }; const heroes = [ 'Batman', - 'Superman' + 'Superman', ]; ``` From 7ade95434c6d9e8faf862e6f69df1110449e4955 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Apr 2015 10:42:03 -0700 Subject: [PATCH 0144/1536] [commas] fix bad git diff example --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ea5de7c7ab..4ae97936b4 100644 --- a/README.md +++ b/README.md @@ -1477,7 +1477,8 @@ ```javascript // bad - git diff without trailing comma const hero = { - - firstName: 'Bob', + firstName: 'Bob', + - lastName: 'Parr' + lastName: 'Parr', + heroName: 'Mr. Incredible' } From 07bba234a0f45e70dc7e7d7fa6810b6e966aefbd Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Apr 2015 11:48:52 -0700 Subject: [PATCH 0145/1536] [readme] update additional trailing commas, examples --- README.md | 102 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 53 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 4ae97936b4..e1680fb91e 100644 --- a/README.md +++ b/README.md @@ -189,7 +189,7 @@ // bad const obj = { id: 5, - name: 'San Francisco' + name: 'San Francisco', }; obj[getKey('enabled')] = true; @@ -197,7 +197,7 @@ const obj = { id: 5, name: 'San Francisco', - [getKey('enabled')]: true + [getKey('enabled')]: true, }; ``` @@ -211,7 +211,7 @@ addValue: function (value) { return atom.value + value; - } + }, }; // good @@ -220,7 +220,7 @@ addValue(value) { return atom.value + value; - } + }, }; ``` @@ -258,7 +258,7 @@ lukeSkywalker, episodeThree: 3, mayTheFourth: 4, - anakinSkywalker + anakinSkywalker, }; // good @@ -268,7 +268,7 @@ episodeOne: 1, twoJedisWalkIntoACantina: 2, episodeThree: 3, - mayTheFourth: 4 + mayTheFourth: 4, }; ``` @@ -397,10 +397,10 @@ ```javascript // bad - const name = "Bob Parr"; + const name = "Capt. Janeway"; // good - const name = 'Bob Parr'; + const name = 'Capt. Janeway'; ``` - Strings longer than 80 characters should be written across multiple lines using string concatenation. @@ -809,7 +809,7 @@ sum === 15; ``` - - Don't use generators. + - Don't use generators for now. > Why? They don't transpile well to ES5. @@ -823,7 +823,7 @@ ```javascript const luke = { jedi: true, - age: 28 + age: 28, }; // bad @@ -838,7 +838,7 @@ ```javascript const luke = { jedi: true, - age: 28 + age: 28, }; function getProp(prop) { @@ -1225,24 +1225,26 @@ - Use `// FIXME:` to annotate problems. ```javascript - function Calculator() { + class Calculator { + constructor() { + // FIXME: shouldn't use a global here + total = 0; - // FIXME: shouldn't use a global here - total = 0; - - return this; + return this; + } } ``` - Use `// TODO:` to annotate solutions to problems. ```javascript - function Calculator() { - - // TODO: total should be configurable by an options param - this.total = 0; + class Calculator { + constructor() { + // TODO: total should be configurable by an options param + this.total = 0; - return this; + return this; + } } ``` @@ -1412,20 +1414,20 @@ // bad const obj = { - foo: function() { + foo() { + }, + bar() { }, - bar: function() { - } }; return obj; // good const obj = { - foo: function() { + foo() { }, - bar: function() { - } + bar() { + }, }; return obj; @@ -1450,23 +1452,23 @@ const story = [ once, upon, - aTime + aTime, ]; // bad const hero = { - firstName: 'Bob' - , lastName: 'Parr' - , heroName: 'Mr. Incredible' - , superPower: 'strength' + firstName: 'Ada' + , lastName: 'Lovelace' + , birthYear: 1815 + , superPower: 'computers' }; // good const hero = { - firstName: 'Bob', - lastName: 'Parr', - heroName: 'Mr. Incredible', - superPower: 'strength' + firstName: 'Ada', + lastName: 'Lovelace', + birthYear: 1815, + superPower: 'computers', }; ``` @@ -1477,23 +1479,24 @@ ```javascript // bad - git diff without trailing comma const hero = { - firstName: 'Bob', - - lastName: 'Parr' - + lastName: 'Parr', - + heroName: 'Mr. Incredible' + firstName: 'Florence', + - lastName: 'Nightingale' + + lastName: 'Nightingale', + + inventorOf: ['coxcomb graph', 'mordern nursing'] } // good - git diff with trailing comma const hero = { - firstName: 'Bob', - lastName: 'Parr', - + heroName: 'Mr. Incredible', + firstName: 'Florence', + lastName: 'Nightingale', + + inventorOf: ['coxcomb chart', 'mordern nursing'], } // bad const hero = { - firstName: 'Kevin', - lastName: 'Flynn' + firstName: 'Dana', + lastName: 'Scully', + catchPhrase: 'Adventure is out there' }; const heroes = [ @@ -1503,8 +1506,9 @@ // good const hero = { - firstName: 'Kevin', - lastName: 'Flynn', + firstName: 'Dana', + lastName: 'Scully', + catchPhrase: 'Adventure is out there', }; const heroes = [ @@ -1660,7 +1664,7 @@ } const bad = new user({ - name: 'nope' + name: 'nope', }); // good @@ -1671,7 +1675,7 @@ } const good = new User({ - name: 'yup' + name: 'yup', }); ``` From 2521d46683ce8487f0bd1cdfdd49d42cf595faf6 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Apr 2015 11:49:28 -0700 Subject: [PATCH 0146/1536] [readme] update additional trailing commas, examples --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index e1680fb91e..b0cf7d9e92 100644 --- a/README.md +++ b/README.md @@ -1495,8 +1495,7 @@ // bad const hero = { firstName: 'Dana', - lastName: 'Scully', - catchPhrase: 'Adventure is out there' + lastName: 'Scully' }; const heroes = [ @@ -1508,7 +1507,6 @@ const hero = { firstName: 'Dana', lastName: 'Scully', - catchPhrase: 'Adventure is out there', }; const heroes = [ From 0ffbdd3692e6717dd5d34288da5e2e3efb8be0e9 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 29 Apr 2015 12:26:14 -0700 Subject: [PATCH 0147/1536] [comments] fix example --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index b0cf7d9e92..18a460a7e6 100644 --- a/README.md +++ b/README.md @@ -1229,8 +1229,6 @@ constructor() { // FIXME: shouldn't use a global here total = 0; - - return this; } } ``` @@ -1242,8 +1240,6 @@ constructor() { // TODO: total should be configurable by an options param this.total = 0; - - return this; } } ``` From 3764337df248e5068684f00bd2153dfd31fa243f Mon Sep 17 00:00:00 2001 From: Alvin Sng Date: Wed, 29 Apr 2015 15:29:51 -0700 Subject: [PATCH 0148/1536] React/JSX Style Guide --- react/README.md | 218 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 react/README.md diff --git a/react/README.md b/react/README.md new file mode 100644 index 0000000000..331382735f --- /dev/null +++ b/react/README.md @@ -0,0 +1,218 @@ +# Airbnb React/JSX Style Guide + +*A mostly reasonable approach to React and JSX* + +## Table of Contents + + 1. [Basic Rules](#basic-rules) + 1. [Naming](#naming) + 1. [Declaration](#declaration) + 1. [Alignment](#alignment) + 1. [Quotes](#quotes) + 1. [Spacing](#spacing) + 1. [Props](#props) + 1. [Parentheses](#parentheses) + 1. [Tags](#tags) + 1. [Ordering](#ordering) + +## Basic Rules + + - Only include one React component per file. + - Always use JSX syntax. + - Do not use `React.createElement` unless you're initializing the app from a `.js` file. + +## Naming + + - **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 + const reservationCard = require('./ReservationCard'); + + // good + const ReservationCard = require('./ReservationCard'); + + // bad + const ReservationItem = ; + + // good + const reservationItem = ; + ``` + + **Component Naming**: Use the filename as the component name. So `ReservationCard.jsx` should have a reference name of ReservationCard. However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name: + ```javascript + // bad + const Footer = require('./Footer/Footer.jsx') + + // bad + const Footer = require('./Footer/index.jsx') + + // good + const Footer = require('./Footer') + ``` + + +## Declaration + - Do not use displayName for naming components, instead name the component by reference. + + ```javascript + // bad + export default React.createClass({ + displayName: 'ReservationCard', + // stuff goes here + }); + + // good + const ReservationCard = React.createClass({ + // stuff goes here + }); + export default ReservationCard; + ``` + +## Alignment + - Follow these alignment styles for JSX syntax + + ```javascript + // bad + + + // good + + + // if props fit in one line then keep it on the same line + + + // children get indented normally + + + + ``` + +## Quotes + - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JavaScript. + ```javascript + // bad + + + // good + + + // bad + + + // good + + ``` + +## Spacing + - Always include a single space in your self-closing tag. + ```javascript + // bad + + + // very bad + + + // bad + + + // good + + ``` + +## Props + - Alphabetically order your props. + ```javascript + // bad + + + // good + + ``` + +## Parentheses + - Wrap JSX tags in parentheses when they span more than one line: + ```javascript + /// bad + render() { + return + + ; + } + + // good + render() { + return ( + + + + ); + } + + // good, when single line + render() { + const body =
    hello
    ; + return {body}; + } + ``` + +## Tags + - Always self-close tags that have no children. + ```javascript + // bad + + + // good + + ``` + + - If your component has multi-line properties, close its tag on a new line. + ```javascript + // bad + + + // good + + ``` + +## Ordering + - Always follow the following order for methods in a react component: + + 1. displayName + 2. mixins (as of React v0.13 mixins are deprecated) + 3. statics + 4. propTypes + 5. getDefaultProps + 6. getInitialState + 7. componentWillMount + 8. componentDidMount + 9. componentWillReceiveProps + 10. shouldComponentUpdate + 11. componentWillUpdate + 12. componentWillUnmount + 13. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() + 14. *gettter methods for render* like getSelectReason() or getFooterContent() + 15. *Optional render methods* like renderNavigation() or renderProfilePicture() + 16. render + +**[⬆ back to top](#table-of-contents)** From 2595cb6724d0fd02ed771006517394fc43df341e Mon Sep 17 00:00:00 2001 From: Alvin Sng Date: Thu, 30 Apr 2015 11:57:01 -0700 Subject: [PATCH 0149/1536] removed alpha sort, changed jsx exten to js, added method prefix rule, added camelCase for props --- react/README.md | 63 +++++++++++++++++++++++++++++++++---------------- 1 file changed, 43 insertions(+), 20 deletions(-) diff --git a/react/README.md b/react/README.md index 331382735f..6d9eb16921 100644 --- a/react/README.md +++ b/react/README.md @@ -13,18 +13,19 @@ 1. [Props](#props) 1. [Parentheses](#parentheses) 1. [Tags](#tags) + 1. [Methods](#methods) 1. [Ordering](#ordering) ## Basic Rules - Only include one React component per file. - Always use JSX syntax. - - Do not use `React.createElement` unless you're initializing the app from a `.js` file. + - Do not use `React.createElement` unless you're initializing the app from a file that does not transform JSX. ## Naming - - **Extensions**: Use `.jsx` extension for React components. - - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. + - **Extensions**: Use `.js` extension for React components. + - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.js`. - **Reference Naming**: Use PascalCase for React components and camelCase for their instances: ```javascript // bad @@ -40,13 +41,13 @@ const reservationItem = ; ``` - **Component Naming**: Use the filename as the component name. So `ReservationCard.jsx` should have a reference name of ReservationCard. However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name: + **Component Naming**: Use the filename as the component name. 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: ```javascript // bad - const Footer = require('./Footer/Footer.jsx') + const Footer = require('./Footer/Footer.js') // bad - const Footer = require('./Footer/index.jsx') + const Footer = require('./Footer/index.js') // good const Footer = require('./Footer') @@ -71,17 +72,17 @@ ``` ## Alignment - - Follow these alignment styles for JSX syntax + - Follow these alignment styles for js syntax ```javascript // bad - + // good // if props fit in one line then keep it on the same line @@ -89,8 +90,8 @@ // children get indented normally @@ -130,18 +131,18 @@ ``` ## Props - - Alphabetically order your props. + - Always use camelCase for prop names. ```javascript // bad // good ``` @@ -150,7 +151,7 @@ ```javascript /// bad render() { - return + return ; } @@ -195,6 +196,28 @@ /> ``` +## Methods + - Do not use underscore prefix for internal methods of a react component. + ```javascript + // bad + React.createClass({ + _onClickSubmit() { + // do stuff + } + + // other stuff + }); + + // good + React.createClass({ + onClickSubmit() { + // do stuff + } + + // other stuff + }); + ``` + ## Ordering - Always follow the following order for methods in a react component: @@ -211,7 +234,7 @@ 11. componentWillUpdate 12. componentWillUnmount 13. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription() - 14. *gettter methods for render* like getSelectReason() or getFooterContent() + 14. *getter methods for render* like getSelectReason() or getFooterContent() 15. *Optional render methods* like renderNavigation() or renderProfilePicture() 16. render From a9319691e4618188732c132e96cc8122955b678f Mon Sep 17 00:00:00 2001 From: Tomek Wiszniewski Date: Tue, 5 May 2015 09:51:00 +0200 Subject: [PATCH 0150/1536] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 18a460a7e6..d80628486a 100644 --- a/README.md +++ b/README.md @@ -586,7 +586,7 @@ // good [1, 2, 3].map((x) => { - return x * x + return x * x; }); ``` From df5029b5a55602a0b65f6a0a8dd7ac9a757caea8 Mon Sep 17 00:00:00 2001 From: Harrison Shoff Date: Wed, 6 May 2015 15:49:50 -0700 Subject: [PATCH 0151/1536] [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 0152/1536] [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 0153/1536] [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 0154/1536] [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 0155/1536] 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 0156/1536] 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 0157/1536] 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 0158/1536] [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 0159/1536] 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 0160/1536] 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 0161/1536] 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 0162/1536] 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 0163/1536] 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 0164/1536] 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 0165/1536] 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 0166/1536] 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 0167/1536] 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 0168/1536] 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 0169/1536] 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 0170/1536] 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 0171/1536] 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 0172/1536] 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 0173/1536] 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 0174/1536] 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 0175/1536] 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 0176/1536] 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 0177/1536] 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 0178/1536] 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 0179/1536] 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 0180/1536] 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 0181/1536] Allow reserved words as keys in ES6 module context MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `