Code Style Guidelines

All code in any code-base should look like a single person typed it, no matter how many people contributed.

Format

Use JSBeautify to format code.

grunt format

The options are stored in .jsbeautifyrc file.

Lint

Use JSHint to detect errors and potential problems.

grunt lint

The options for JSHint are stored in .jshintrc file.

Indentation

The unit of indentation is tabs that equal 4 spaces. Never mix spaces and tabs.

// Good
while (condition) {
    statements
}

// Bad
while (condition) {
  statements
}

Every AlloyUI project contains a .editorconfig file that automatically set some indentation definitions. Just make sure to install Editor Config's plugin on your code editor and you'll be all set.

Comments

See YUIDoc's comment syntax. You could also check our Documentation Guideline.

Semicolons

Relying on ASI (Automatic Semicolon Insertion) can cause hard to debug problems, so don't do it. Always use semicolons.

// Good
a = b + c;
test();

// Bad
a = b + c
test()

Variables

All variables should be declared before used. Multiple var statements are allowed.

// Good
var foo = '';
var bar = '';

// Bad
foo = '';
var bar = '';

Constants (variables with permanent values) are written uppercase.

// Good
var FOO = 'foo';

// Bad
var foo = 'foo';

Strings

Prefer single quotes over double quotes.

// Good
var string = '<p class="foo">Lorem Ipsum</p>';

// Bad
var string = "<p class='foo'>Lorem Ipsum</p>";

Hexidecimal colors are written uppercase.

// Good
var color = '#D96AB6';

// Bad
var color = '#d96ab6';

// Good
var color = 0xD96AB6;

// Bad
var color = 0xd96ab6;

New lines

Parentheses () and commas , are not followed by indented children on new lines.

// Good
YUI().use('aui-module', function (Y) {
    statements
});

// Bad
YUI().use(
    'aui-module',
    function (Y) {
        statements
    }
);

Curly brackets {} are followed by new lines and indented children.

// Good
if (condition) {
    statements
}
else {
    statements
}

// Bad
if (condition) {
    statements
} else {
    statements
}

Whitespace

Add spaces between operators (=, >, *, etc).

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

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

Both function expressions and function declarations doesn't have a space between the function keyword and the function name.

// Good
var foo = function() {
    statements
};

// Bad
var foo = function () {
    statements
};

// Good
function bar() {
    statements
}

// Bad
function bar () {
    statements
}

Add spaces outside parentheses () but avoid it inside.

// Good
if (x > 10) {
    statements
}

// Bad
if( x > 10 ){
    statements
}

Empty lines have no trailing spaces.

Conditionals

Avoid inline conditionals. Every conditional (with single or multiple statements) should use curly brackets {}.

// Good
if (condition) {
    statements
}
else if (condition) {
    statements
}
else {
    statements
}

// Bad
if (condition) statement;
else if (condition) statement;
else statement;

Equality

Because of type coercion, avoiding == and != at all is recommended. Instead, use strict equality operators === and !==.

// Good
if (foo === 'foo') {
    statement
}

// Bad
if (foo == 'foo') {
    statement
}

// Good
if (bar !== 'bar') {
    statement
}

// Bad
if (bar != 'bar') {
    statement
}

Loops

Avoid inline loops. Every loop (with single or multiple statements) should use curly brackets {}.

// Good
for (initialization; condition; expression) {
    statements
}

// Bad
for (initialization; condition; expression) statement;