Classes and id’s in HTML use all lower-case with dashes (-), not camelCase or under_scores:
Do this:
<div id="search-results">
<span class="title-wrapper">
Not this:
<div id="searchResults"> // Don't use camel-case for ids
<span class="title_wrapper"> // Don't use underscore
Always use double quotes (”) to border attributes.
Do this:
<div id="searchResults">
Not this:
<div id='searchResults'>
Use 4 space indents (spaces, no tabs)
Must pass JSLint. Meaningful defaults for JSLint is
/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ /*global $ */Note
The above recommendation has one caveat.
JSLint warns about lines consisting entirely of whitespace, but we ignore those warnings. The JSLint feature built into Brackets filters out these warnings automatically.
Note
JSHint instead? we might configure it with a single .jshintrc file
79 characters with a soft limit of 84 if absolutely necessary. Try to avoid too deeply nested code by cleverly placing break, continue and return statements.
General Naming and Syntax
Variable and function names use camelCase (not under_scores):
Do this:
var editorHolder; function getText();Not this:
var editor_holder; // Don't use underscore! function get_text(); // Don't use underscore!Never assign multiple variables on the same line.
Don’t do this:
var a = 1, b = 'foo', c = 'wtf';
Private variables
Use _ prefixes on private variables/methods: Do this:
var _privateVar = 42; function _privateFunction()Not this:
var privateVar = 42; // Private vars should start with _ function privateFunction() // Private functions should start with _
Arrays and Objects
Use [] to assign a new array, not new Array().
Use {} for new objects, as well.
Two scenarios for [] (one can be on the same line, with discretion and the other not so much):
// Okay on a single line var stuff = [1, 2, 3]; // Never on a single line, multiple only var longerStuff = [ 'some longer stuff', 'other longer stuff' ];
Working with jQuery
Use $ prefixes on variables referring to jQuery objects:
Do this:
var $sidebar = $("#sidebar");Not this:
var sidebar = $("#sidebar"); // Use '$' to prefix variables referring to jQuery objects
Do this:
var someVar;
someVar = 2 + 2;
Not this:
var someVar // Missing semicolon!
someVar = 2 + 2 // Missing semicolon!
Always use === for comparison. The only exceptions are when testing for null and undefined
if (value !== 0) {
console.log('value can not be undefined');
}
Try to avoid ternary, especially if it would use multiple lines:
This is OK:
return user.isLoggedIn ? 'yay' : 'boo';
Not this:
var foo = (user.lastLogin > new Date().getTime() - 16000) ? user.lastLogin - 24000 : 'wut';
Use double quotes in JavaScript. If a JavaScript string literal contains code within it, use single quotes within the string to avoid escaping.
Do this:
var aString = "Hello";
someFunction("This is awesome!");
var htmlCode = "<div id='some-id' class='some-class'></div>";
Not this:
var aString = 'Hello'; // Use double quotes!
someFunction('This is awesome!'); // Use double quotes!
var htmlCode = '<div id="some-id" class="some-class"></div>'; // Use double quotes!
var htmlCode = "<div id=\"some-id\" class=\"some-class\"></div>"; // Within string, use single quotes!
All comments should be C++ single line style
//comment.
Even multiline comments should use // at the start of each line
Use C style /* comments */ for notices at the top and bottom of the file
Annotations should use the /** annotation */ style
/** This is my function
@param arg1 string The first argument
@return boolean
*/
var myFunc = function (arg1) {
return true;
};
Annotate all functions