From 3c504e9622588aadbb2c9f4163ea6699e75d6459 Mon Sep 17 00:00:00 2001 From: James Bunt Date: Wed, 23 Apr 2014 11:00:09 +1200 Subject: [PATCH 0001/1493] 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 697aa00da0a53402a92bac6629e856302b7d1707 Mon Sep 17 00:00:00 2001 From: Mark Storus Date: Tue, 29 Jul 2014 16:09:54 -0700 Subject: [PATCH 0002/1493] 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 0003/1493] 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 0004/1493] [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 0005/1493] [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 0006/1493] [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 0007/1493] 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 0008/1493] [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 0009/1493] [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 0010/1493] [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 0011/1493] [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 0012/1493] 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 0013/1493] 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 0014/1493] 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 0015/1493] 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 0016/1493] 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 0017/1493] [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 0018/1493] [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 0019/1493] 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 0020/1493] [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 0021/1493] [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 0022/1493] 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 0023/1493] 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 0024/1493] 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 0025/1493] 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 0026/1493] [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 0027/1493] [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 0028/1493] [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 0029/1493] 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 0030/1493] 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 0031/1493] 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 0032/1493] 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 0033/1493] 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 0034/1493] 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 0035/1493] 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 0036/1493] 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 0037/1493] 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 0038/1493] 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 0039/1493] 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 0040/1493] 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 0041/1493] 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 0042/1493] 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 0043/1493] 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 0044/1493] [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 0045/1493] [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 0046/1493] 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 0047/1493] 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 0048/1493] 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 0049/1493] 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 0050/1493] 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 0051/1493] 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 0052/1493] 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 0053/1493] 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 0054/1493] 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 0055/1493] 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 0056/1493] 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 0057/1493] 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 0058/1493] [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 0059/1493] 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 0060/1493] 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 0061/1493] [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 0062/1493] [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 0063/1493] 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 0064/1493] 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 0065/1493] 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 0066/1493] 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 0067/1493] 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 0068/1493] 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 0069/1493] 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 0070/1493] [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 0071/1493] 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 0072/1493] 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 0073/1493] 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 0074/1493] [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 0075/1493] [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 0076/1493] [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 0077/1493] 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 0078/1493] 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 0079/1493] 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 0080/1493] 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 0081/1493] 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 0082/1493] 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 0083/1493] 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 0084/1493] 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 0085/1493] 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 0086/1493] 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 0087/1493] 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 0088/1493] 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 0089/1493] [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 0090/1493] [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 0091/1493] 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 0092/1493] 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 0093/1493] 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 0094/1493] 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 0095/1493] 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 0096/1493] 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 0097/1493] 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 0098/1493] 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 0099/1493] [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 0100/1493] [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 0101/1493] [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 0102/1493] [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 0103/1493] [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 0104/1493] [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 0105/1493] 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 0106/1493] 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 0107/1493] 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 0108/1493] [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 0109/1493] [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 0110/1493] [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 0111/1493] [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 0112/1493] 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 0113/1493] 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 0114/1493] 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 0115/1493] [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 0116/1493] 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 0117/1493] 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 0118/1493] 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 0119/1493] 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 0120/1493] 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 0121/1493] 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 0122/1493] 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 0123/1493] 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 0124/1493] 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 0125/1493] 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 0126/1493] 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 0127/1493] 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 0128/1493] 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 0129/1493] 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 0130/1493] 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 0131/1493] 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 0132/1493] 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 0133/1493] 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 0134/1493] 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 0135/1493] 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 0136/1493] 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 0137/1493] 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 0138/1493] Allow reserved words as keys in ES6 module context MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `