Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 230 lines (136 sloc) 4.061 kb
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
1 .. _js-style:
2
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
3 JS Style Guide
4 ==============
5
6 First and Foremost
7 ------------------
8
9 **ALWAYS** use JSHint_ on your code.
10
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
11 .. Note::
12
13 There are some exceptions for which JSHint complains about things in
14 node that you can ignore, like how it doesn't know what 'const' is
15 and complains about not knowing what 'require' is. You can add
16 keywords to ignore to a `.jshintrc` file.
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
17
18 .. _JSHint: http://www.jshint.com/
19
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
20
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
21 Variable Formatting:
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
22 --------------------
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
23
24 ::
25
26 // Classes: CapitalizedWords
27 var MyClass = ...
28
29 // Variables and Functions: camelCase
30 var myVariable = ...
31
32 // Constants: UPPER_CASE_WITH_UNDERSCORES
33 // Backend
34 const MY_CONST = ...
35
36 // Client-side
37 var MY_CONST = ...
38
39
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
40 Indentation
41 ~~~~~~~~~~~
42
43 4-space indents (no tabs).
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
44
45 For our projects, always assign var on a newline, not comma separated::
46
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
47 // Bad
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
48 var a = 1,
49 b = 2,
50 c = 3;
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
51
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
52 // Good
53 var a = 1;
54 var b = 2;
55 var c = 3;
56
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
57
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
58 Use ``[]`` to assign a new array, not ``new Array()``.
59
60 Use ``{}`` for new objects, as well.
61
62 Two scenarios for ``[]`` (one can be on the same line, with discretion
63 and the other not so much)::
64
65 // Okay on a single line
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
66 var stuff = [1, 2, 3];
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
67
68 // Never on a single line, multiple only
69 var longerStuff = [
70 'some longer stuff',
71 'other longer stuff'
72 ];
73
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
74
75 Never assign multiple variables on the same line
76 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
77
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
78 Bad::
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
79
80 var a = 1, b = 'foo', c = 'wtf';
81
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
82
83 DO NOT line up variable names
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
84 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
85
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
86 Bad::
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
87
88 var wut = true;
89 var boohoo = false;
90
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
91
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
92 Semi-colons
93 -----------
94
95 **Use them.**
96
97 Not because ASI is black-magic, or whatever. I'm sure we all understand
98 ASI. Just do it for consistency.
99
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
100
101 Conditionals and Loops
102 ----------------------
103
104 ::
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
105
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
106 // Bad
107 if (something) doStuff()
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
108
109 // Good
110 if (something) {
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
111 doStuff();
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
112 }
113
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
114
115 Space after keyword, and space before curly
116 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
117
118 ::
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
119
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
120 // Bad
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
121 if(bad){
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
122
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
123 }
124
125 // Good
126 if (something) {
127
128 }
129
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
130
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
131 Functions
132 ---------
133
134 Named Functions
135 ~~~~~~~~~~~~~~~
136
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
137 **Always** name functions, even if assigned to another variable or
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
138 property. This improves error stacks when debugging.
139
140 No space between name and opening paren. Space between closing paren
141 and brace::
142
143 var method = function doSomething(argOne, argTwo) {
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
144
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
145 }
146
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
147
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
148 Anonymous Functions
149 ~~~~~~~~~~~~~~~~~~~
150
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
151 You're doing it wrong. See above about named functions.
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
152
153
154 Operators
155 ---------
156
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
157 Always use ``===``.
158
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
159 Only exception is when testing for null and undefined.
160
161 Example::
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
162
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
163 if (value != null) {
164
165 }
166
167
168 Quotes
169 ------
170
171 Always use single quotes: ``'not double'``
172
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
173 Only exception: ``"don't escape single quotes in strings. use double quotes"``
174
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
175
176 Comments
177 --------
178
179 For node functions, always provide a clear comment in this format::
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
180
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
181 /* Briefly explains what this does
182 * Expects: whatever parameters
183 * Returns: whatever it returns
184 */
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
185
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
186
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
187 If comments are really long, also do it in the ``/* ... */`` format
188 like above. Otherwise make short comments like::
189
190 // This is my short comment and it ends in a period.
191
0bcdc01 @willkg Add js-style to index; fix rst issues
willkg authored
192
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
193 Ternaries
194 ---------
195
196 Try not to use them.
197
198 If a ternary uses multiple lines, don't use a ternary::
199
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
200 // Bad
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
201 var foo = (user.lastLogin > new Date().getTime() - 16000) ? user.lastLogin - 24000 : 'wut';
202
203 // Good
204 return user.isLoggedIn ? 'yay' : 'boo';
205
206
207 General Good Practices
208 ----------------------
209
210 If you see yourself repeating something that can be a constant, refactor
211 it as a single constant declaration at the top of the file.
212
213 Cache regex into a constant.
214
215 Always check for truthiness::
216
506e21a @seanmonstar style-guide adjustments based on feedback
seanmonstar authored
217 // Bad
9b640fb @seanmonstar a JavaScript Style Guide
seanmonstar authored
218 if (blah !== false) { ...
219
220 // Good
221 if (blah) { ...
222
223
224 If code is really long, try to break it up to the next line or
225 refactor (try to keep within the 80-col limit but if you go a bit past
226 it's not a big deal). Indent the subsequent lines one indent
227 (2-spaces) in.
228
229 If it looks too clever, it probably is, so just make it simple.
Something went wrong with that request. Please try again.