eslint/docs/src/rules/array-element-newline.md

   1 ---
   2 title: array-element-newline
   3 layout: doc
   4 rule_type: layout
   5 related_rules:
   6 - array-bracket-spacing
   7 - array-bracket-newline
   8 - object-property-newline
   9 - object-curly-spacing
  10 - object-curly-newline
  11 - max-statements-per-line
  12 - block-spacing
  13 - brace-style
  14 ---
  15
  16
  17
  18 A number of style guides require or disallow line breaks between array elements.
  19
  20 ## Rule Details
  21
  22 This rule enforces line breaks between array elements.
  23
  24 ## Options
  25
  26 This rule has either a string option:
  27
  28 * `"always"` (default) requires line breaks between array elements
  29 * `"never"` disallows line breaks between array elements
  30 * `"consistent"` requires consistent usage of linebreaks between array elements
  31
  32 Or an object option (Requires line breaks if any of properties is satisfied. Otherwise, disallows line breaks):
  33
  34 * `"multiline": <boolean>` requires line breaks if there are line breaks inside elements. If this is false, this condition is disabled.
  35 * `"minItems": <number>` requires line breaks if the number of elements is at least the given integer. If this is 0, this condition will act the same as the option `"always"`. If this is `null` (the default), this condition is disabled.
  36
  37 Alternatively, different configurations can be specified for array expressions and array patterns:
  38
  39 ```json
  40 {
  41     "array-element-newline": ["error", {
  42         "ArrayExpression": "consistent",
  43         "ArrayPattern": { "minItems": 3 },
  44     }]
  45 }
  46 ```
  47
  48 * `"ArrayExpression"` configuration for array expressions (if unspecified, this rule will not apply to array expressions)
  49 * `"ArrayPattern"` configuration for array patterns of destructuring assignments (if unspecified, this rule will not apply to array patterns)
  50
  51 ### always
  52
  53 Examples of **incorrect** code for this rule with the default `"always"` option:
  54
  55 :::incorrect
  56
  57 ```js
  58 /*eslint array-element-newline: ["error", "always"]*/
  59
  60 var c = [1, 2];
  61 var d = [1, 2, 3];
  62 var e = [1, 2, 3
  63 ];
  64 var f = [
  65   1, 2, 3
  66 ];
  67 var g = [
  68     function foo() {
  69         dosomething();
  70     }, function bar() {
  71         dosomething();
  72     }
  73 ];
  74 ```
  75
  76 :::
  77
  78 Examples of **correct** code for this rule with the default `"always"` option:
  79
  80 :::correct
  81
  82 ```js
  83 /*eslint array-element-newline: ["error", "always"]*/
  84
  85 var a = [];
  86 var b = [1];
  87 var c = [1,
  88     2];
  89 var d = [1,
  90     2,
  91     3];
  92 var d = [
  93   1,
  94   2,
  95   3
  96 ];
  97 var e = [
  98     function foo() {
  99         dosomething();
 100     },
 101     function bar() {
 102         dosomething();
 103     }
 104 ];
 105 ```
 106
 107 :::
 108
 109 ### never
 110
 111 Examples of **incorrect** code for this rule with the `"never"` option:
 112
 113 :::incorrect
 114
 115 ```js
 116 /*eslint array-element-newline: ["error", "never"]*/
 117
 118 var c = [
 119     1,
 120     2
 121 ];
 122 var d = [
 123     1,
 124     2,
 125     3
 126 ];
 127 var e = [
 128     function foo() {
 129         dosomething();
 130     },
 131     function bar() {
 132         dosomething();
 133     }
 134 ];
 135 ```
 136
 137 :::
 138
 139 Examples of **correct** code for this rule with the `"never"` option:
 140
 141 :::correct
 142
 143 ```js
 144 /*eslint array-element-newline: ["error", "never"]*/
 145
 146 var a = [];
 147 var b = [1];
 148 var c = [1, 2];
 149 var d = [1, 2, 3];
 150 var e = [
 151     1, 2, 3];
 152 var f = [
 153   1, 2, 3
 154 ];
 155 var g = [
 156     function foo() {
 157         dosomething();
 158     }, function bar() {
 159         dosomething();
 160     }
 161 ];
 162 ```
 163
 164 :::
 165
 166 ### consistent
 167
 168 Examples of **incorrect** code for this rule with the `"consistent"` option:
 169
 170 :::incorrect
 171
 172 ```js
 173 /*eslint array-element-newline: ["error", "consistent"]*/
 174
 175 var a = [
 176     1, 2,
 177     3
 178 ];
 179 var b = [
 180     function foo() {
 181         dosomething();
 182     }, function bar() {
 183         dosomething();
 184     },
 185     function baz() {
 186         dosomething();
 187     }
 188 ];
 189 ```
 190
 191 :::
 192
 193 Examples of **correct** code for this rule with the `"consistent"` option:
 194
 195 :::correct
 196
 197 ```js
 198 /*eslint array-element-newline: ["error", "consistent"]*/
 199
 200 var a = [];
 201 var b = [1];
 202 var c = [1, 2];
 203 var d = [1, 2, 3];
 204 var e = [
 205     1,
 206     2
 207 ];
 208 var f = [
 209     1,
 210     2,
 211     3
 212 ];
 213 var g = [
 214     function foo() {
 215         dosomething();
 216     }, function bar() {
 217         dosomething();
 218     }, function baz() {
 219         dosomething();
 220     }
 221 ];
 222 var h = [
 223     function foo() {
 224         dosomething();
 225     },
 226     function bar() {
 227         dosomething();
 228     },
 229     function baz() {
 230         dosomething();
 231     }
 232 ];
 233 ```
 234
 235 :::
 236
 237 ### multiline
 238
 239 Examples of **incorrect** code for this rule with the `{ "multiline": true }` option:
 240
 241 :::incorrect
 242
 243 ```js
 244 /*eslint array-element-newline: ["error", { "multiline": true }]*/
 245
 246 var d = [1,
 247     2, 3];
 248 var e = [
 249     function foo() {
 250         dosomething();
 251     }, function bar() {
 252         dosomething();
 253     }
 254 ];
 255 ```
 256
 257 :::
 258
 259 Examples of **correct** code for this rule with the `{ "multiline": true }` option:
 260
 261 :::correct
 262
 263 ```js
 264 /*eslint array-element-newline: ["error", { "multiline": true }]*/
 265
 266 var a = [];
 267 var b = [1];
 268 var c = [1, 2];
 269 var d = [1, 2, 3];
 270 var e = [
 271     function foo() {
 272         dosomething();
 273     },
 274     function bar() {
 275         dosomething();
 276     }
 277 ];
 278 ```
 279
 280 :::
 281
 282 ### minItems
 283
 284 Examples of **incorrect** code for this rule with the `{ "minItems": 3 }` option:
 285
 286 :::incorrect
 287
 288 ```js
 289 /*eslint array-element-newline: ["error", { "minItems": 3 }]*/
 290
 291 var c = [1,
 292     2];
 293 var d = [1, 2, 3];
 294 var e = [
 295     function foo() {
 296         dosomething();
 297     },
 298     function bar() {
 299         dosomething();
 300     }
 301 ];
 302 ```
 303
 304 :::
 305
 306 Examples of **correct** code for this rule with the `{ "minItems": 3 }` option:
 307
 308 :::correct
 309
 310 ```js
 311 /*eslint array-element-newline: ["error", { "minItems": 3 }]*/
 312
 313 var a = [];
 314 var b = [1];
 315 var c = [1, 2];
 316 var d = [1,
 317     2,
 318     3];
 319 var e = [
 320     function foo() {
 321         dosomething();
 322     }, function bar() {
 323         dosomething();
 324     }
 325 ];
 326 ```
 327
 328 :::
 329
 330 ### multiline and minItems
 331
 332 Examples of **incorrect** code for this rule with the `{ "multiline": true, "minItems": 3 }` options:
 333
 334 :::incorrect
 335
 336 ```js
 337 /*eslint array-element-newline: ["error", { "multiline": true, "minItems": 3 }]*/
 338
 339 var c = [1,
 340 2];
 341 var d = [1, 2, 3];
 342 var e = [
 343     function foo() {
 344         dosomething();
 345     }, function bar() {
 346         dosomething();
 347     }
 348 ];
 349 ```
 350
 351 :::
 352
 353 Examples of **correct** code for this rule with the `{ "multiline": true, "minItems": 3 }` options:
 354
 355 :::correct
 356
 357 ```js
 358 /*eslint array-element-newline: ["error", { "multiline": true, "minItems": 3 }]*/
 359
 360 var a = [];
 361 var b = [1];
 362 var c = [1, 2];
 363 var d = [1,
 364     2,
 365     3];
 366 var e = [
 367     function foo() {
 368         dosomething();
 369     },
 370     function bar() {
 371         dosomething();
 372     }
 373 ];
 374 ```
 375
 376 :::
 377
 378 ### ArrayExpression and ArrayPattern
 379
 380 Examples of **incorrect** code for this rule with the `{ "ArrayExpression": "always", "ArrayPattern": "never" }` options:
 381
 382 :::incorrect
 383
 384 ```js
 385 /*eslint array-element-newline: ["error", { "ArrayExpression": "always", "ArrayPattern": "never" }]*/
 386
 387 var a = [1, 2];
 388 var b = [1, 2, 3];
 389 var c = [
 390     function foo() {
 391         dosomething();
 392     }, function bar() {
 393         dosomething();
 394     }
 395 ];
 396
 397 var [d,
 398     e] = arr;
 399 var [f,
 400     g,
 401     h] = arr;
 402 var [i = function foo() {
 403   dosomething()
 404 },
 405 j = function bar() {
 406   dosomething()
 407 }] = arr
 408 ```
 409
 410 :::
 411
 412 Examples of **correct** code for this rule with the `{ "ArrayExpression": "always", "ArrayPattern": "never" }` options:
 413
 414 :::correct
 415
 416 ```js
 417 /*eslint array-element-newline: ["error", { "ArrayExpression": "always", "ArrayPattern": "never" }]*/
 418
 419 var a = [1,
 420     2];
 421 var b = [1,
 422     2,
 423     3];
 424 var c = [
 425     function foo() {
 426         dosomething();
 427     },
 428     function bar() {
 429         dosomething();
 430     }
 431 ];
 432
 433 var [d, e] = arr
 434 var [f, g, h] = arr
 435 var [i = function foo() {
 436     dosomething()
 437 }, j = function bar() {
 438     dosomething()
 439 }] = arr
 440 ```
 441
 442 :::
 443
 444 ## When Not To Use It
 445
 446 If you don't want to enforce linebreaks between array elements, don't enable this rule.
 447
 448 ## Compatibility
 449
 450 * **JSCS:** [validateNewlineAfterArrayElements](https://jscs-dev.github.io/rule/validateNewlineAfterArrayElements)