eslint/docs/src/rules/space-before-function-paren.md

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