Translation Airbnb Style Guide

We, like everyone else, initially used standards for writing code in the development, but in fact they were limited to something like this:

- In the Camelkeys write?
- Yes, as usual, in the Camekake
… two weeks passed…
- We are in Camelcase agreed !!!

')
In our case, it wasn’t that last phrase.
I have long wanted to systematize this somehow, but I didn’t get around to choosing between styles from jQuery, Google, ideomatic.js and Crockford.

When a month ago, a guide from AirBnB got into the ghithab trending, it immediately caught our eye ...
A week ago we transferred it , primarily for our own needs, but we could not share it with the community.

• Original: https://github.com/airbnb/javascript
• Translation: https://github.com/uprock/javascript

I strongly advise you to read at least all beginner js developers.


How is it so different from other manuals, and how did it like us so much?
The fact is that it is not so much indicative of how to style the code stylistically, as it tells how to correctly write in JavaScript. This is not only a list of guidelines for JSLint, but a platform to start writing well: this text, which can be thoughtfully read in an hour, gives trainees more insight into JavaScript than their own day of trial and error and questions to older colleagues.

Regarding design, this guide uses “popular” choices.
Examples:
2 spaces tab is used, also in Google, npm, Node.js, Idiomatic
Always use a semicolon like Google, Node.js, Crockford
Declaring Variables with Hanging Commas in One Var, as in Idiomatic, jQuery
What is interesting here is indicated even a similar point:

Declare variables that are not assigned a value at the end. This is useful when you need to set the value of one of these variables based on the values ​​already assigned.

camelCase for variables - like in Google, npm, Node, Idiomatic
At the same time, this guide clearly states:

Use camelCase to name objects, functions, and variables.
Use PascalCase to name class constructors.

Some points are clearly and clearly explained, for example:

Additional comma at the end of objects: None. It can cause problems with IE6 / 7 and IE9 in compatibility mode. In some implementations of ES3, a comma at the end of an array increases its length by 1, which can cause problems. This question has been clarified only in ES5 (original):

Revision ECMAScript 5 unequivocally establishes the fact that the comma at the end of the ArrayInitialiser should not increase the length of the array. This is a non-semantic change from ECMAScript 3 Revision, but some implementations have previously incorrectly resolved this issue.

The mechanisms of the work of “ascent” of declarations of variables and functions within the scope are clearly explained.

Declaring an anonymous function raises the variable itself, but not its value, to the top of the scope.
Named functions raise the variable to the top of the scope, but not its value. The name of the function is not available in the scope of the variable and is only available from the inside.
Function declarations raise the name and its value to the top of the current scope.

Each example is clearly and vividly illustrated with a test block of code, many things chosen for speed or performance reasons are accompanied by references to jsPerf, ECMAScript specification (for those incredulous bothers who are not sufficiently simple) or some very interesting articles on this topic.

In general, at least, this is a very interesting piece of reading, and if you have long wanted to formalize the style of writing code, now is the time.
Included is a set of links to other basic guides, a list of commands that already use this style of writing code, sites that are worth reading and many more useful links, and most importantly - the configuration for JSLint in Sublime.

Here is a brief summary of the content for the busiest:

• Always use short syntax to create objects and arrays;
  
• For strings, use single quotes, the maximum length of the string is 80 characters, hyphenation through +;
  
• All declarations of variables (and functions) at the beginning of the block, separated by a comma and with one var for the whole function. Function declaration (not assignment) is not allowed in conditional blocks;
  
• Variables without assignment of values ​​go at the end of the declaration of variables;
  
• Access to the properties and methods of the object is always possible through a dot, a query like user ['get'] is forbidden (unless it is required for something special in the code);
  
• Always test strict equality and use type casting;
  
• Braces are only for multi-line code blocks. If there is one operator with a new line - it also needs to be wrapped in {};
  
• Multi-line comments are always via / ** * /, use JSDoc;
  
• Single-line comments only through //, always precede the described, they are preceded by one empty line;
  
• Tabulation - two spaces, opening the bracket always one space;
  
• Use logical indents in the call chains, each call on a new line. So, in jQuery, for example, the access is set before and after each change of the target block (.find, .closest, .children, and so on);
  
• Semicolons are always where they are needed;
  
• Type conversion is possible at the beginning of the operation, for numbers always use parseInt or Number. Bitwise operations for casting are permissible for the sake of speed; each such operation must be commented upon;
  
• All functions are named, camelCase for all variables and functions, PascalCase for constructors. At private methods and properties we put in the beginning "_"
  For links to this use _this;
  
• Universal assessors are not used, getters and setters are assigned to each property, or common .get and .set are made.
  Replacing a prototype is evil, prototypes can only be expanded;
  
• An event is always transmitted as an object so that it can be expanded during the ascent;
  
• jQuery variables are given the prefix $;
  

From ourselves we added literally several explanatory blocks and made one change: in the original it was proposed to use comments // FIXME and // TODO, but IDE and code editors usually highlight only // TODO, so instead of // FIXME it is proposed to use // TODO FIXME for easier navigation through the automatically generated index.

Just in case, duplicate links:

• Original: https://github.com/airbnb/javascript
• Translation: https://github.com/uprock/javascript