]>
Commit | Line | Data |
---|---|---|
eb39fafa DC |
1 | # Require or disallow a space before function parenthesis (space-before-function-paren) |
2 | ||
3 | When formatting a function, whitespace is allowed between the function name or `function` keyword and the opening paren. Named functions also require a space between the `function` keyword and the function name, but anonymous functions require no whitespace. For example: | |
4 | ||
5 | ```js | |
6 | function withoutSpace(x) { | |
7 | // ... | |
8 | } | |
9 | ||
10 | function withSpace (x) { | |
11 | // ... | |
12 | } | |
13 | ||
14 | var anonymousWithoutSpace = function() {}; | |
15 | ||
16 | var anonymousWithSpace = function () {}; | |
17 | ``` | |
18 | ||
19 | Style guides may require a space after the `function` keyword for anonymous functions, while others specify no whitespace. Similarly, the space after a function name may or may not be required. | |
20 | ||
21 | ## Rule Details | |
22 | ||
23 | This rule aims to enforce consistent spacing before function parentheses and as such, will warn whenever whitespace doesn't match the preferences specified. | |
24 | ||
25 | ## Options | |
26 | ||
27 | This rule has a string option or an object option: | |
28 | ||
29 | ```js | |
30 | { | |
31 | "space-before-function-paren": ["error", "always"], | |
32 | // or | |
33 | "space-before-function-paren": ["error", { | |
34 | "anonymous": "always", | |
35 | "named": "always", | |
36 | "asyncArrow": "always" | |
37 | }], | |
38 | } | |
39 | ``` | |
40 | ||
41 | * `always` (default) requires a space followed by the `(` of arguments. | |
42 | * `never` disallows any space followed by the `(` of arguments. | |
43 | ||
44 | The string option does not check async arrow function expressions for backward compatibility. | |
45 | ||
46 | You can also use a separate option for each type of function. | |
47 | Each of the following options can be set to `"always"`, `"never"`, or `"ignore"`. The default is `"always"`. | |
48 | ||
49 | * `anonymous` is for anonymous function expressions (e.g. `function () {}`). | |
50 | * `named` is for named function expressions (e.g. `function foo () {}`). | |
51 | * `asyncArrow` is for async arrow function expressions (e.g. `async () => {}`). | |
52 | ||
53 | ### "always" | |
54 | ||
55 | Examples of **incorrect** code for this rule with the default `"always"` option: | |
56 | ||
57 | ```js | |
58 | /*eslint space-before-function-paren: "error"*/ | |
59 | /*eslint-env es6*/ | |
60 | ||
61 | function foo() { | |
62 | // ... | |
63 | } | |
64 | ||
65 | var bar = function() { | |
66 | // ... | |
67 | }; | |
68 | ||
69 | var bar = function foo() { | |
70 | // ... | |
71 | }; | |
72 | ||
73 | class Foo { | |
74 | constructor() { | |
75 | // ... | |
76 | } | |
77 | } | |
78 | ||
79 | var foo = { | |
80 | bar() { | |
81 | // ... | |
82 | } | |
83 | }; | |
84 | ||
85 | var foo = async() => 1 | |
86 | ``` | |
87 | ||
88 | Examples of **correct** code for this rule with the default `"always"` option: | |
89 | ||
90 | ```js | |
91 | /*eslint space-before-function-paren: "error"*/ | |
92 | /*eslint-env es6*/ | |
93 | ||
94 | function foo () { | |
95 | // ... | |
96 | } | |
97 | ||
98 | var bar = function () { | |
99 | // ... | |
100 | }; | |
101 | ||
102 | var bar = function foo () { | |
103 | // ... | |
104 | }; | |
105 | ||
106 | class Foo { | |
107 | constructor () { | |
108 | // ... | |
109 | } | |
110 | } | |
111 | ||
112 | var foo = { | |
113 | bar () { | |
114 | // ... | |
115 | } | |
116 | }; | |
117 | ||
118 | var foo = async () => 1 | |
119 | ``` | |
120 | ||
121 | ### "never" | |
122 | ||
123 | Examples of **incorrect** code for this rule with the `"never"` option: | |
124 | ||
125 | ```js | |
126 | /*eslint space-before-function-paren: ["error", "never"]*/ | |
127 | /*eslint-env es6*/ | |
128 | ||
129 | function foo () { | |
130 | // ... | |
131 | } | |
132 | ||
133 | var bar = function () { | |
134 | // ... | |
135 | }; | |
136 | ||
137 | var bar = function foo () { | |
138 | // ... | |
139 | }; | |
140 | ||
141 | class Foo { | |
142 | constructor () { | |
143 | // ... | |
144 | } | |
145 | } | |
146 | ||
147 | var foo = { | |
148 | bar () { | |
149 | // ... | |
150 | } | |
151 | }; | |
152 | ||
153 | var foo = async () => 1 | |
154 | ``` | |
155 | ||
156 | Examples of **correct** code for this rule with the `"never"` option: | |
157 | ||
158 | ```js | |
159 | /*eslint space-before-function-paren: ["error", "never"]*/ | |
160 | /*eslint-env es6*/ | |
161 | ||
162 | function foo() { | |
163 | // ... | |
164 | } | |
165 | ||
166 | var bar = function() { | |
167 | // ... | |
168 | }; | |
169 | ||
170 | var bar = function foo() { | |
171 | // ... | |
172 | }; | |
173 | ||
174 | class Foo { | |
175 | constructor() { | |
176 | // ... | |
177 | } | |
178 | } | |
179 | ||
180 | var foo = { | |
181 | bar() { | |
182 | // ... | |
183 | } | |
184 | }; | |
185 | ||
186 | var foo = async() => 1 | |
187 | ``` | |
188 | ||
189 | ### `{"anonymous": "always", "named": "never", "asyncArrow": "always"}` | |
190 | ||
191 | Examples of **incorrect** code for this rule with the `{"anonymous": "always", "named": "never", "asyncArrow": "always"}` option: | |
192 | ||
193 | ```js | |
194 | /*eslint space-before-function-paren: ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}]*/ | |
195 | /*eslint-env es6*/ | |
196 | ||
197 | function foo () { | |
198 | // ... | |
199 | } | |
200 | ||
201 | var bar = function() { | |
202 | // ... | |
203 | }; | |
204 | ||
205 | class Foo { | |
206 | constructor () { | |
207 | // ... | |
208 | } | |
209 | } | |
210 | ||
211 | var foo = { | |
212 | bar () { | |
213 | // ... | |
214 | } | |
215 | }; | |
216 | ||
217 | var foo = async(a) => await a | |
218 | ``` | |
219 | ||
220 | Examples of **correct** code for this rule with the `{"anonymous": "always", "named": "never", "asyncArrow": "always"}` option: | |
221 | ||
222 | ```js | |
223 | /*eslint space-before-function-paren: ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}]*/ | |
224 | /*eslint-env es6*/ | |
225 | ||
226 | function foo() { | |
227 | // ... | |
228 | } | |
229 | ||
230 | var bar = function () { | |
231 | // ... | |
232 | }; | |
233 | ||
234 | class Foo { | |
235 | constructor() { | |
236 | // ... | |
237 | } | |
238 | } | |
239 | ||
240 | var foo = { | |
241 | bar() { | |
242 | // ... | |
243 | } | |
244 | }; | |
245 | ||
246 | var foo = async (a) => await a | |
247 | ``` | |
248 | ||
249 | ### `{"anonymous": "never", "named": "always"}` | |
250 | ||
251 | Examples of **incorrect** code for this rule with the `{"anonymous": "never", "named": "always"}` option: | |
252 | ||
253 | ```js | |
254 | /*eslint space-before-function-paren: ["error", { "anonymous": "never", "named": "always" }]*/ | |
255 | /*eslint-env es6*/ | |
256 | ||
257 | function foo() { | |
258 | // ... | |
259 | } | |
260 | ||
261 | var bar = function () { | |
262 | // ... | |
263 | }; | |
264 | ||
265 | class Foo { | |
266 | constructor() { | |
267 | // ... | |
268 | } | |
269 | } | |
270 | ||
271 | var foo = { | |
272 | bar() { | |
273 | // ... | |
274 | } | |
275 | }; | |
276 | ``` | |
277 | ||
278 | Examples of **correct** code for this rule with the `{"anonymous": "never", "named": "always"}` option: | |
279 | ||
280 | ```js | |
281 | /*eslint space-before-function-paren: ["error", { "anonymous": "never", "named": "always" }]*/ | |
282 | /*eslint-env es6*/ | |
283 | ||
284 | function foo () { | |
285 | // ... | |
286 | } | |
287 | ||
288 | var bar = function() { | |
289 | // ... | |
290 | }; | |
291 | ||
292 | class Foo { | |
293 | constructor () { | |
294 | // ... | |
295 | } | |
296 | } | |
297 | ||
298 | var foo = { | |
299 | bar () { | |
300 | // ... | |
301 | } | |
302 | }; | |
303 | ``` | |
304 | ||
305 | ### `{"anonymous": "ignore", "named": "always"}` | |
306 | ||
307 | Examples of **incorrect** code for this rule with the `{"anonymous": "ignore", "named": "always"}` option: | |
308 | ||
309 | ```js | |
310 | /*eslint space-before-function-paren: ["error", { "anonymous": "ignore", "named": "always" }]*/ | |
311 | /*eslint-env es6*/ | |
312 | ||
313 | function foo() { | |
314 | // ... | |
315 | } | |
316 | ||
317 | class Foo { | |
318 | constructor() { | |
319 | // ... | |
320 | } | |
321 | } | |
322 | ||
323 | var foo = { | |
324 | bar() { | |
325 | // ... | |
326 | } | |
327 | }; | |
328 | ``` | |
329 | ||
330 | Examples of **correct** code for this rule with the `{"anonymous": "ignore", "named": "always"}` option: | |
331 | ||
332 | ```js | |
333 | /*eslint space-before-function-paren: ["error", { "anonymous": "ignore", "named": "always" }]*/ | |
334 | /*eslint-env es6*/ | |
335 | ||
336 | var bar = function() { | |
337 | // ... | |
338 | }; | |
339 | ||
340 | var bar = function () { | |
341 | // ... | |
342 | }; | |
343 | ||
344 | function foo () { | |
345 | // ... | |
346 | } | |
347 | ||
348 | class Foo { | |
349 | constructor () { | |
350 | // ... | |
351 | } | |
352 | } | |
353 | ||
354 | var foo = { | |
355 | bar () { | |
356 | // ... | |
357 | } | |
358 | }; | |
359 | ``` | |
360 | ||
361 | ## When Not To Use It | |
362 | ||
363 | You can turn this rule off if you are not concerned with the consistency of spacing before function parenthesis. | |
364 | ||
365 | ## Related Rules | |
366 | ||
367 | * [space-after-keywords](space-after-keywords.md) | |
368 | * [space-return-throw-case](space-return-throw-case.md) |