JavaScript Style Guide

This Style Guide Is Obsolete

Versions 3.4 and later will be using ES6 and the Airbnb JavaScript Style Guide

ES5 Style Guide (3.3 and lower)

1. Use JSHint (linting) and JSCS (style enforcement)

See installing GruntJS on the main REAMDE. There is a grunt task for jshint and jscs, simply run: grunt check from the command line and both will execute.

2. Spacing

• Indent using 4 spaces
• No end of line whitespace
• Use a blank line with no whitespace after blocks
• Use a space after if/else/for/while/try
• Use a space after variable declaration and assignment

Good

    var x = 10;

    if (something) {
    } else {
    }

    for (x = 0; x < 10; x++) {
    }

    while (true) {
    }

    try {
    } catch (e) {
    }

    // No space after function keyword
    function(x) {
    }

Bad

    var x=10; // Use spacing

    // No space after the if or after the paren
    if(something){
    }

// No indent
if (true) {
}

    // Use curly braces
    if (true)
        callSomething();

    // Use multiple lines
    if (true) { callSomething();}

    if (someting) {
    }
    doSomethingAfter(); // Put a blank line after the previous block

3. Curly Brackets

• Always use curly brackets
• The starting bracket should go on the same line as the keyword
• The ending bracket should be on a new line by itself

Good

    if (something) {
    } else {
    }

    for (x = 0; x < 10; x++) {
    }

    while (true) {
    }

    try {
    } catch (e) {
    }

Bad

    // Always use curly braces
    if (true)
        callSomething();

    // Use multiple lines
    if (true) { callSomething();}

4. Function Calls

• No spaces for parens when calling a function
• Only use a space after the comma for multiple arguments

Good

noArgsCall();
callSomething(arg);
callSomething2(arg1, arg2);

Bad

noArgsCall ( );
callSomething ( arg );
callSomething2 ( arg1 , arg2 );

5. Assignment

• Use one var at the top of the function
• Use a newline after the semicolon

Good

    var x, y, z;

    function something(x) {
        var x, y,
            z = true;

        // Code
    }

    function somethingToo(x) {
        var x = 'something',
            y = 'something',
            i;

        // Code
        for (i = 0; i < 10; i++) {
        }
    }

Bad

    var x;
    var y;
    var z;

    function something(x) {
        var x;
        var y;
        var z = true;

        // Code
    }

    function somethingToo(x) {
        // var i is declared separate from the others
        for (var i = 0; i < 10; i++) {
            // All vars should be at the top of the function
            var x = 'something',
                y = 'something';
        }
    }

6. Equality

• Always use === in favor of ==

7. Quotes

• Always use a single quote, so templates can use double quotes for HTML attributes

Example

    //Template
    itemTemplate: new Simplate([
        '<span id="something">{%: $.AccountName %}</span>'
    ])

8. Comments

• Put comment above line you are commenting, with some exception for inline comments
• Use JSDoc (http://usejsdoc.org/) comments when possible

Example

    // Localized
    someText: 'SalesLogix'

    /*
     * @ param {string} name Name of person
     */
    function callByName(name) {
    }

    while (/*TODO: Remove this*/ true) {
    }