Use JSHint to detect errors and potential problems. Every jQuery project has a Grunt task for linting all JavaScript files: grunt jshint. The options for JSHint are stored in a .jshintrc file; many repositories will have multiple .jshintrc files based on the type of code in each directory.
Each .jshintrc file follows a specific format. All options must be alphabetized and grouped:
1
2
3
4
5
6
7
8
9
10
11
12
The following common options must be used in all projects:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
If the project supports browsers which do not implement ES5, then the es3 option must be included with the repo-specific options.
In general, the jQuery style guide encourages liberal spacing for improved human readability. The minification process creates a file that is optimized for browsers to read and process.
if/else/for/while/try always have braces and always go on multiple lines.!, ++) must not have space next to their operand., and ; must not have preceding space.; used as a statement terminator must be at the end of the line.: after a property name in an object definition must not have preceding space.? and : in a ternary conditional must have space on both sides.{}, [], fn())1
2
3
4
link Good Examples
if(condition) doSomething();
while(!condition) iterating++;
for(var i=0;i<100;i++) object[array[i]] = someFn(i);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
link Object and Array Expressions
} else if ( otherCondition ) {
object[ array[ i ] ] = someFn( i );
foo( options, object[ property ] );
foo( [ a, b ], "property", { c: d } );
foo( { a: "alpha", b: "beta" } );
Object and array expressions can be on one line if they are short (remember the line length limits). When an expression is too long to fit on one line, there must be one property or element per line, with the opening and closing braces each on their own lines. Property names only need to be quoted if they are reserved words or contain special characters:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
link Multi-line Statements
when: 4, "you are": 15 };
map = { ready: 9, when: 4, "you are": 15 };
array = [ { key: val } ];
array = [ { key: val }, { key2: val2 } ];
When a statement is too long to fit on one line, line breaks must occur after an operator.
1
2
3
4
5
6
7
var html = "<p>The sum of " + a + " and " + b + " plus " + c
+ " is " + ( a + b + c );
var html = "<p>The sum of " + a + " and " + b + " plus " + c +
Lines should be broken into logical groups if it improves readability, such as splitting each expression of a ternary operator onto its own line even if both will fit on a single line.
1
2
3
var baz = firstCondition( foo ) && secondCondition( bar ) ?
When a conditional is too long to fit on one line, successive lines must be indented one extra level to distinguish them from the body.
1
2
3
4
link Chained Method Calls
if ( firstCondition() && secondCondition() &&
When a chain of method calls is too long to fit on one line, there must be one call per line, with the first call on a separate line from the object the methods are called on. If the method changes the context, an extra level of indentation must be used.
link Full File ClosuresWhen an entire file is wrapped in a closure, the body of the closure is not indented.
1
2
3
4
5
module.exports = function( grunt ) {
The same applies to AMD wrappers.
1
2
3
4
5
6
7
8
9
], function( foo, bar, baz ) {
For UMD, the factory is indented to visually differentiate it from the body.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
link Constructors
if ( typeof define === "function" && define.amd ) {
Constructor functions should always be invoked with argument lists, even when such lists are empty.
1
2
when = time || new Date();
When property access or method invocation is immediately performed on the result of a constructor function, clarify precedence with wrapping parentheses.
1
2
link Equality
detachedMode = ( new TemplateFactory( settings ) ).nodeType === 11;
match = ( new RegExp( pattern ) ).exec( input );
Strict equality checks (===) must be used in favor of abstract equality checks (==). The only exception is when checking for undefined and null by way of null. The use of == null is also acceptable in cases where only one of null or undefined may be logically encountered, such as uninitialized variables.
typeof object === "string"typeof object === "number"typeof object === "boolean"typeof object === "object"jQuery.isPlainObject( object )jQuery.isFunction( object )jQuery.isArray( object )object.nodeTypeobject === nullobject == nulltypeof variable === "undefined"variable === undefinedobject.prop === undefinedComments are always preceded by a blank line. Comments start with a capital first letter, but don't require a period at the end, unless you're writing full sentences. There must be a single space between the comment token and the comment text.
Single line comments go over the line they refer to:
Multi-line comments are only used for file and function headers.
Inline comments are allowed as an exception when used to annotate special arguments in formal parameter lists or when needed to support a specific development tool:
1
2
3
4
function foo( types, selector, data, fn, one ) {
Do not write API documentation in comments. API documentation lives in its own repository.
link QuotesjQuery uses double quotes.
1
var double = "I am wrapped in double quotes";
Strings that require inner quoting must use double outside and single inside.
1
link Semicolons
var html = "<div id='my-id'></div>";
Use them. Never rely on ASI.
link Naming ConventionsVariable and function names should be full words, using camel case with a lowercase first letter. Names should be descriptive but not excessively so. Exceptions are allowed for iterators, such as the use of i to represent the index in a loop. Constructors do not need a capital first letter.
Each project may expose at most one global variable.
link DOM Node Rules.nodeName must always be used in favor of .tagName.
.nodeType must be used to determine the classification of a node (not .nodeName).
The usage of switch statements is generally discouraged, but can be useful when there are a large number of cases - especially when multiple cases can be handled by the same block, or fall-through logic (the default case) can be leveraged.
When using switch statements:
break for each case other than default.case statements with the switch.1
2
3
4
5
6
7
8
9
10
11
switch ( event.keyCode ) {
case $.ui.keyCode.ESCAPE:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4